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

Answer 2

系列动画似乎干扰了标签定位。如果你设置：

 chart: { renderTo: 'container', type: 'line', animation:false,

然后一切正常。我猜你在定位标签后动画正在运行，并且正在为你重新定位它们。

看起来你要么必须关闭动画，要么使用@anpsmn发布的setTimeout方法。

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

问题

2 个答案:

修改