更改 Highcharts 中的突出显示行为

Question

我正在尝试制作一个在图表中显示一些数据的网页。为此，我使用了 JavaScript 库 Highcharts。

它工作得很好，但我想改变图表的突出显示行为，我不能让它坚持这么说。我在这里找到了一个代码 sn-p：

https://highcharts.uservoice.com/forums/55896-general/suggestions/3166396-improve-series-highlight-on-legend-hover-event-by

我可以让它工作，但是当我用新数据重新绘制图表时，这种行为就消失了。 一些示例代码：

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'One',
            data: [[1,2.3],[2,6.7],[3,10],[4,2.5]]
        }, {
            name: 'Two',
            data: [[1,20],[2,10],[3,11],[4,12]]
        }, {
            name: 'Three',
            data: [[1,21],[2,23],[3,10],[4,4]]
        }, {
            name: 'Four',
            data: [[1,12],[2,2],[3,4],[4,6]]
        }]
    },
    function(chart){
        $(chart.series).each(function(i, serie){
            $(serie.legendItem.element).hover(function(){
                highlight(chart.series, serie.index, true);
            }, function(){
                highlight(chart.series, serie.index, false);
            });
        });

        function highlight(series, index, hide) {
            $(series).each(function (i, serie) {
                if(i != index) {
                    $.each(serie.data, function (k, data) {
                        if(data.series) {
                            data.series.graph && data.series.graph.attr("stroke", (hide ? "#D4D4D4": serie.color));
                            data.series.markerGroup && data.series.markerGroup.attr("visibility", (hide ? "hidden": "visible"));
                        }
                    });

                } else {
                    serie.group.toFront();
                    $.each(serie.data, function (k, data) {
                        if(data.series) {
                            data.series.graph && data.series.graph.attr("stroke", serie.color);
                        }
                    });
                }
            });
        }
    });
});

var new_series = [{
            name: 'One_2',
            data: [[1,3.3],[2,4.7],[3,20],[4,6]]
        }, {
            name: 'Two_2',
            data: [[1,20],[2,0],[3,10],[4,5]]
        }, {
            name: 'Three_2',
            data: [[1,21],[2,5],[3,10],[4,12]]
        }, {
            name: 'Four_2',
            data: [[1,12],[2,15],[3,20],[4,12]]
        }]

$('#redraw').click(function() {
    while(chart.series.length > 0)
        chart.series[0].remove(true);

    for (var i = 0; i < new_series.length; i++){
        chart.addSeries(new_series[i],false);
    }

    chart.redraw();
});

});

这是一个显示我的问题的小提琴：http://jsfiddle.net/qpByN/34/

单击重绘时，突出显示行为恢复正常。如何让它粘住？

我是一个 javascript 新手，所以我知道我在工作方面缺少很多东西，但使用它是最好的学习方式。这个特殊的问题我一直没能解决，很可能是因为我不知道要搜索的术语，所以我在这里问怎么做。

Answer 1

这是由于没有为图例中的新项目添加突出显示造成的。在插件中，每次重绘图例时它都会起作用，但在您的情况下只有一次 - 加载图表时。升级代码：http://jsfiddle.net/qpByN/35/

一个注意事项：当你删除系列时，分离事件，不要做死引用。

代码：

var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'One',
            data: [
                [1, 2.3],
                [2, 6.7],
                [3, 10],
                [4, 2.5]
            ]
        }, {
            name: 'Two',
            data: [
                [1, 20],
                [2, 10],
                [3, 11],
                [4, 12]
            ]
        }, {
            name: 'Three',
            data: [
                [1, 21],
                [2, 23],
                [3, 10],
                [4, 4]
            ]
        }, {
            name: 'Four',
            data: [
                [1, 12],
                [2, 2],
                [3, 4],
                [4, 6]
            ]
        }]
    }, addEvents);
});

var new_series = [{
    name: 'One_2',
    data: [
        [1, 3.3],
        [2, 4.7],
        [3, 20],
        [4, 6]
    ]
}, {
    name: 'Two_2',
    data: [
        [1, 20],
        [2, 0],
        [3, 10],
        [4, 5]
    ]
}, {
    name: 'Three_2',
    data: [
        [1, 21],
        [2, 5],
        [3, 10],
        [4, 12]
    ]
}, {
    name: 'Four_2',
    data: [
        [1, 12],
        [2, 15],
        [3, 20],
        [4, 12]
    ]
}]

$('#redraw').click(function () {
    while (chart.series.length > 0)
    chart.series[0].remove(true);

    for (var i = 0; i < new_series.length; i++) {
        chart.addSeries(new_series[i], false);
    }

    chart.redraw();
    addEvents(chart);
});

function addEvents(chart) {

    $(chart.series).each(function (i, serie) {
        $(serie.legendItem.element).hover(function () {
            highlight(chart.series, serie.index, true);
        }, function () {
            highlight(chart.series, serie.index, false);
        });
    });
}

function highlight(series, index, hide) {
    $(series).each(function (i, serie) {
        if (i != index) {
            $.each(serie.data, function (k, data) {
                if (data.series) {
                    data.series.graph && data.series.graph.attr("stroke", (hide ? "#D4D4D4" : serie.color));
                    data.series.markerGroup && data.series.markerGroup.attr("visibility", (hide ? "hidden" : "visible"));
                }
            });

        } else {
            serie.group.toFront();
            $.each(serie.data, function (k, data) {
                if (data.series) {
                    data.series.graph && data.series.graph.attr("stroke", serie.color);
                }
            });
        }
}