Как настроить маршрут Highcharts?

Question

Я рисую дорожки над графиком, и мне нужно изменить их цвет на зависание над другим элементом на странице - список точек данных на div справа от моей страницы.

Вот мой код:

chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'graph', 
     type: 'area', 
     backgroundColor: 'transparent', 
     height: 470 
    }, 
    plotOptions: { 
     area: { 
      enableMouseTracking: false, 
      showInLegend: false, 
      stacking: 'percent', 
      lineWidth: 0, 
      marker: { 
       fillColor: 'transparent', 
       states: { 
        hover: { 
         lineColor: 'transparent' 
        } 
       } 
      } 
     } 
    }, 
    series: 
     [ 
      { 
       name: 'over', 
       color: 'none', 
       data: overData 
      }, 
      { 
       id: 's1', 
       name: 'Series 1', 
       data: data, 
       showInLegend: true, 
       zoneAxis: 'x', 
       zones: zones 
      }, 
      { 
       name: 'under', 
       color: 'none', 
       data: underData 
      } 
     ], 
    xAxis: { 
     plotLines: plotLines, 
     gridLineColor: 'transparent', 
     lineColor: 'transparent', 
     labels: { 
      enabled: false 
     } 
    }, 
    yAxis: { 
     title: { 
      text: '' 
     }, 
     gridLineColor: 'transparent', 
     lineColor: 'transparent', 
     labels: { 
      enabled: false 
     } 
     //,min: -25 
    }, 
    legend: { 
     enabled: false 
    }, 
    title: { 
     text: '' 
    }, 
    credits: { 
     enabled: false 
    }, 
    tooltip: { 
     enabled: false 
    }},function(chart){ 
     dataForChart.forEach(function(entry) { 
      chart.renderer.path(['M', ((entry.score*475)/100), 45, 'V',475]) 
       .attr({ 
        'id' :'line_'+entry.id, 
        'stroke-width': 2, 
        stroke: 'white', 
        zIndex:1000 
       }) 
       .add(); 
     }); 
}); 

Кусок кода в вопросе заключается в следующем:

chart.renderer.path(['M', ((entry.score*475)/100), 45, 'V',475]) 
    .attr({ 
     'id' :'line_'+entry.id, 
     'stroke-width': 2, 
     stroke: 'white', 
     zIndex:1000 
    }) 
    .add(); 

Теперь все, что я хочу сделать, это изменить цвет этого пути на парении. Как вы можете видеть, я назначаю идентификатор каждой строке.

У меня есть столбец на лицевой стороне, когда пользователь наводится над именем точки (в данном случае это имя-донор, например USAID), и когда это происходит, я хочу вызвать состояние зависания (предпочтительно предварительно определенное во втором блоке кода, который я вставил) и изменить цвет линии.

Как я могу это достичь?

1) Как добавить стиль наведения на этот путь? 2) Как я могу вызвать состояние зависания для конкретной строки, когда я наводил его на имя в списке доноров?

Answer 1

Вы можете добавить событие .on() на изображение объекта.

chart.renderer.path(['M', 0, 0, 'L', 100, 100]) 
    .attr({ 
     'stroke-width': 10, 
     stroke: 'red' 
    }) 
    .on('mouseover',function(){ 
     $(this).attr({ 
     'stroke': 'yellow' 
     }) 
    }) 
    .on('mouseout',function(){ 
     $(this).attr({ 
     'stroke': 'red' 
     }) 
    }) 
    .add(); 

Пример: http://jsfiddle.net/6g5hfycw/