我正在尝试重新定位 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
也不会。
单击图例项后如何保持良好的标签位置不变?
最佳答案
我不知道这是否是最好的解决方案。我延迟了定位,然后它就起作用了。
参见fiddle
setTimeout(function () {
positionLabels(chart.series);
}, 500);
编辑
已更新Fiddle
关于javascript - HighCharts - 单击图例后如何重新定位标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15804866/