高图表 - 日期时间轴标签重叠

Highcharts - with datetime axis labels overlap

本文关键字：标签 重叠 时间 日期 高图表      更新时间：2023-09-26

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

但有时标签会重叠。在这里你可以看到一个例子：http://jsfiddle.net/4ghhf/使用 tickInterval 和 tickPixelInterval 并不能解决问题。

我应该怎么做才能避免这个问题？

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

  • 更改刻度间隔
  • 更改标签显示

我在以下代码（xAxis 部分）中应用了两者：

$(function () {
 var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    xAxis: {
        type: 'datetime',
        tickInterval : 7*24 * 3600 * 1000,
        labels : { y : 20, rotation: -45, align: 'right' }
    },
    series: [{
        data: [
            [Date.UTC(2010, 3, 11), 29.9],
            [Date.UTC(2010, 4, 8), 71.5]
         ]
    }]
});

也许 staggerLines 是适合您的解决方案：

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

我用这个设置更新了你的jsfiddle：http://jsfiddle.net/benebun/4ghhf/134/

从 API 参考：

交错线：数字（自 2.1 起）

仅限水平轴。将标签展开以形成空间或更紧密标签的行数。.

（通过Github上的此评论找到）

我用这个设置更新了你的jsfiddle：http://jsfiddle.net/benebun/4ghhf/134/

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

http://api.highcharts.com/highcharts#xAxis.tickPixelInterval

在这里找到我的答案： 高图表重叠类别标签我使用 xAxis 标签的类别数组，而不是让 HighCharts 解析 UTC 日期代码。

它还取决于您使用的字体。对我来说，这发生在Arial身上，但适用于Helvetica或Times New Roman。

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

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

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

相关文章：