0

我正在尝试重新定位 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.

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

4

2 回答 2

2

我不知道这是否是最好的解决方案。我推迟了定位，然后它有点工作。

见小提琴

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


编辑

更新小提琴

于 2013-04-04T08:10:20.117 回答
1

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

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

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

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

于 2013-04-04T08:29:01.903 回答