如何定位Highcharts路徑？

我正在通過圖形繪製路徑，並且需要將鼠標懸停在頁面上的另一個元素上時更改其顏色 - 我的頁面右側的div上的數據點列表。如何定位Highcharts路徑？

這裏是我的代碼：

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();

現在我想做的事，就是改變懸停這條道路的顏色。正如你所看到的，我確實爲每一行分配了一個id。

我有一個前端的列，當用戶懸停在該點的名稱（在這種情況下，它是捐助者的名稱，如USAID），當發生這種情況時，我想要觸發懸停狀態（最好先前定義在我粘貼的第二塊代碼中）並更改線條顏色。

我該如何做到這一點？

1）如何將懸停樣式添加到該路徑？ 2）當我將鼠標懸停在捐助者名單上時，如何觸發特定線的懸停狀態？

來源

2016-02-13 Jacques

您可以在呈現的對象上添加.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/

來源

2016-02-15 09:29:49

如何定位Highcharts路徑？

回答

相關問題