Javascript Highcharts-日期时间轴标签重叠

我使用的是Highcharts，我有一个带有日期时间轴的图表。 大多数情况下，标签沿轴正确分布，没有重叠

但有时标签会重叠。 这里您可以看到一个示例： 使用tickInterval和tickPixelInterval并不能解决问题

---

我应该怎么做来避免问题？

我看到了两种解决问题的方法：

• 更改滴答声间隔
• 更改标签显示

我在以下代码（xAxis部分）中应用了这两种方法：

---

也许交错线是您的解决方案：

xAxis: {
    type: 'datetime',
    labels: {
        staggerLines: 2
    }
},

我用以下设置更新了您的JSFIDLE：

从：

交错行：编号（从2.1开始）

仅限水平轴。将标签展开以腾出空间或使标签更紧的行数

（通过github上的找到）

---

我用这个设置更新了JSFIDLE:

另一个解决方案是使用tickPixelInterval，它定义了刻度之间的像素间距。数字越大，记号越少

在这里找到了我的答案：

---

我使用xAxis标签的类别数组，而不是让HighCharts解析UTC日期代码

这也取决于您使用的字体。对我来说，这在Arial中发生，但在Helvetica或Times New Roman中效果很好。

也有同样的问题，并已修复。如果标签不合适，Highcharts将自动旋转标签。如果有太多的标签，即使是旋转的Highcharts也会尝试为您自动删除标签

xAxis = {
    "type": 'datetime',
    "tickInterval": 30 * 24 * 3600 * 1000,
    "labels": {
        autoRotation: [45]
    }
}

---

只需确保您没有指定步骤，因为它将覆盖自动旋转。

很抱歉，我无法使用这些解决方案。图表数据是动态加载的；设置tickInterval将导致标签在长时间段的图表中重叠。同时，根据时间间隔动态设置tickInterval也不是解决方案，因为图表是可缩放的，缩放会导致标签重叠。我也不能旋转标签，因为我必须复制设计器的设计（我链接的JSFIDLE只是一个简单的例子，让大家理解这个问题）。我尝试使用tickPixelInterval，但当时间段很短时，如示例所示，像素不受重视，标签重叠。为什么会发生这种情况？真的没有解决办法吗？

xAxis = {
    "type": 'datetime',
    "tickInterval": 30 * 24 * 3600 * 1000,
    "labels": {
        autoRotation: [45]
    }
}