highcharts 响应式数据标签显示答案

【问题标题】：highcharts responsive datalabels displayhighcharts 响应式数据标签显示
【发布时间】：2023-03-05 01:07:02
【问题描述】：

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

我有一张 similar to this one 的图表，但我想要实现的是：

交替 Y 值（数据标签：15、40 等。）
避免文本重叠，而不是我的数字：“长文本”在 iPhone 尺寸下重叠

在不指定dataLabels的x和y位置的情况下还有其他选项吗？

{
  "x": 1400457600000,
  "y": 15,
  "dataLabels": {
      "x": 25,
      "y": -5,
      "style": {
         "color": "#000000"
      }
   }
}

【问题讨论】：

标签： javascript jquery css highcharts responsive-design

【解决方案1】：

您可以将它们与客户格式化程序交替使用。这个函数跟踪它被调用了多少次，并且只返回偶数调用的标签：

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。

【讨论】：

+1 的答案！但是当我说交替时，我的意思是一个值在水平线之上，下一个值在水平线之下。旋转对我来说不是一个选项，我需要以某种方式找到数据标签不重叠。

【解决方案2】：

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

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

【讨论】：

@SebastianBochan：感谢您的回答，您的示例似乎有多个系列，但我只有一个。这意味着来自同一系列的点的数据标签是重叠的。