highcharts响应数据标签显示

Question

有没有办法将highcharts的dataLabels设置为不与较小尺寸重叠？

我的图表是similar to this one，但我想要达到的是：

• 交替使用Y值（数据标签：15,40等）。
• 避免文字重叠，而不是数字I：“长文字”与iPhone尺寸重叠

如果没有指定x的{​​{1}}和y位置，还有其他选项吗？

dataLabels

Answer 1

您可以使用检测到碰撞的this示例。

 events: {
                load: function() {
                    StaggerDataLabels(this.series);
                },
                redraw: function() {
                    var series = this.series;
                    setTimeout(function() {
                        StaggerDataLabels(series);
                    }, 1000);
                }
            },

Answer 2

您可以将它们与客户格式化程序交替使用。此函数跟踪它被调用的次数，并仅返回偶数调用的标签：

plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function(){
                    if (this.series.chart.dlFCalls == null){
                        this.series.chart.dlFCalls = -1;
                    }
                    this.series.chart.dlFCalls++;
                    if (this.series.chart.dlFCalls % 2 == 0){
                        return this.y;   
                    }
                }
            }
        }
    }

就拟合长文本而言，我会使用rotation的组合并稍微偏移y值。

这是一个小提琴example。