Highcharts - 日期时间轴标签重叠

Posted 2023-03-14

【中文标题】Highcharts - 日期时间轴标签重叠

【英文标题】：Highcharts - with datetime axis labels overlap

【发布时间】：2012-04-23 14:13:47

【问题描述】：

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

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

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

【参考方案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]
         ]
    ]
);

【讨论】：

很抱歉，我无法使用这些解决方案。

图表数据是动态加载的；设置tickInterval会导致图表中标签重叠较长时间段。另外动态设置tickInterval，取决于时间间隔，不是解决方案，因为图表是可缩放和缩放的导致标签重叠。我也不能旋转标签，因为我必须复制我们设计师的设计（我链接的 jsfiddle 只是一个简单的例子，让我们理解问题）。我尝试使用 tickPixelInterval 但是当时间段很短时，例如示例，不尊重像素并且标签重叠。为什么会这样？真的没有办法吗？

【参考方案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/

【参考方案3】：

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

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

【参考方案4】：

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

【参考方案5】：

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

【参考方案6】：

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

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

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