javascript - 如何定位 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();

现在我想做的就是在悬停时更改该路径的颜色。如您所见，我确实为每一行分配了一个 id。

我在前端有一列，当用户将鼠标悬停在点的名称上时(在本例中它是捐助者名称，例如美国国际开发署)，当发生这种情况时，我想触发悬停状态(最好是之前在我粘贴的第二个代码块)并更改线条颜色。

我怎样才能做到这一点？

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/