javascript - HighCharts - 单击图例后如何重新定位标签

Question

我正在尝试重新定位 HighCharts 折线图中的数据标签，以便它们不会重叠。

您最初可以通过将重新定位函数附加到 load 事件来完成此操作:

var repositionLabels = function(series) {
    var s1 = series[0].data;
    var s2 = series[1].data;
    var i=0, l=s1.length, higher;

    for(; i<l; i++) {
        higher = s1[i].y > s2[i].y;
        s1[i].dataLabel.attr('y', higher ?  s1[i].dataLabel.y-10 :  s1[i].dataLabel.y+30 );
        s2[i].dataLabel.attr('y', !higher ?  s2[i].dataLabel.y-10 :  s2[i].dataLabel.y+30 );
    }
}

对于上一行，数据标签位于该行上方；对于下一行，数据标签位于下方。所以它们不会重叠。

问题

问题是，如果您单击图例项来显示/隐藏一行，数据标签将恢复到其默认(错误、重叠)位置。 这是一个演示: http://jsfiddle.net/supertrue/QbGPV/984/

我希望将相同的函数附加到 redraw 事件将使新标签位置保持不变，但事实并非如此。将其附加到 plotOptions.line.events.legendItemClick 也不会。

单击图例项后如何保持良好的标签位置不变？

Answer 1

我不知道这是否是最好的解决方案。我延迟了定位，然后它就起作用了。

参见fiddle

setTimeout(function () {
   positionLabels(chart.series);
}, 500);

编辑

已更新Fiddle