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

我正在使用Highcharts，并且我有一个带日期时间轴的图表。大部分时间标签沿着轴正确分布，没有重叠。Highcharts - 与日期时间轴标签重叠

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

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

2012-04-23 sabrina

我看到固定您的问题的方法有两种：

变更刻度间隔
变更标签显示

我申请都在下面的代码（x-轴节）：

$(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] 
     ] 
    }] 
});

来源

2012-04-23 14:30:22 Kirualex

对不起，但我不能使用这些解决方案。 – sabrina 2012-04-24 06:48:11

图表数据是动态加载的;设置tickInterval会导致图表中的标签与长时间段重叠。动态设置tickInterval（取决于时间间隔）不是解决方案，因为图表是可缩放的，而缩放导致标签重叠。我也不能旋转标签，因为我必须复制我们的设计师的设计（我链接的jsfiddle只是一个简单的例子，让我们理解这个问题）。我试过使用tickPixelInterval，但是当时间周期很短时，像例子一样，像素不被尊重，标签重叠。这是为什么发生？真的没有解决方案吗？ – sabrina 2012-04-24 06:59:52

也许staggerLines是你的解决方案：

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

我更新了此设置您的jsfiddle：http://jsfiddle.net/benebun/4ghhf/134/

从API Ref：

staggerLines：数（自2.1）仅

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

（经由this comment在github找到）

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

来源

2012-11-30 17:15:48 benebun

另一种解决方案是使用tickPixelInterval，它定义了蜱之间的像素间隔。数字越大，滴答数越少。

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

来源

2013-02-14 21:22:56 Nick

找到我的答案在这里：Highcharts overlapping category labels 我使用的是类阵列X轴的标签，而不是让HighCharts解析UTC日期代码。

来源

2014-10-10 16:30:15

它也可以取决于您使用的字体。对我而言，这发生在Arial上，但对于Helvetica或Times New Roman可以正常工作。

来源

2014-12-09 10:53:20 Michiel

有相同的问题，并修复了autoRotation configuration。如果标签不合适，Highcharts会自动旋转标签。如果旋转次数过多，Highcharts会自动为您自动移除标签。

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

只要确保你不指定一步，因为它会覆盖自转。

来源

2017-06-01 05:55:49 velval

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

回答

相关问题