Question

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

但有时会发生标签重叠。您可以在此处查看示例：http://jsfiddle.net/4ghhf/ 使用tickInterval和tickPixelInterval无法解决问题。

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

Answer 1

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

更改节拍间隔
更改标签显示

我在以下代码中都应用了两个代码（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]
         ]
    }]
});

Answer 2

也许staggerLines是您的解决方案：

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

我使用以下设置更新了您的jsfiddle：http://jsfiddle.net/benebun/4ghhf/134/

来自API Ref：

staggerLines：数字（自2.1起）

仅水平轴。将标签分散以形成空间或更紧密标签的行数。

（通过github上的this comment找到）

我使用以下设置更新了您的jsfiddle：http://jsfiddle.net/benebun/4ghhf/134/

Answer 3

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

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

Answer 4

在这里找到我的答案：Highcharts overlapping category labels 我正在为xAxis标签使用类别数组，而不是让HighCharts解析UTC日期代码。

Answer 5

它还可以取决于您使用的字体。对我而言，这适用于Arial，但与Helvetica或Times New Roman一起使用。

Answer 6

有同样的问题，并修复了autoRotation configuration。如果标签不合适，Highcharts会自动旋转标签。如果旋转的图表太多，Highcharts会尝试自动删除标签。

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

请确保您没有指定步骤，因为它会覆盖autoRotation。

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

6 个答案: