如何定位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路径？

回答

相关问题