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。

我在前端有一个列，当用户将鼠标悬停在该点的名称上时（在这种情况下，它是一个捐赠者名称，如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/

如何定位Highcharts路径？

1 个答案: