javascript Highcharts - 日期时间轴标签重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10282283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts - with datetime axis labels overlap
提问by sabrina
I'm using Highcharts and I have a chart with a datetime axis. Most times the labels are correctly distributed along the axis with no overlap.
我正在使用 Highcharts 并且我有一个带有日期时间轴的图表。大多数情况下，标签沿轴正确分布，没有重叠。
But sometimes it happens that labels overlap. Here you can see an example: http://jsfiddle.net/4ghhf/Using tickInterval and tickPixelInterval doesn't solve the problem.
但有时会发生标签重叠。在这里您可以看到一个示例：http: //jsfiddle.net/4ghhf/使用 tickInterval 和 tickPixelInterval 并不能解决问题。
What should I do to avoid the problem?
我应该怎么做才能避免这个问题？
回答by Kirualex
I see two ways of fixing your problem :
我看到有两种方法可以解决您的问题：
- Change the tick interval
- Change the label display
- 更改滴答间隔
- 更改标签显示
I applied both in the following code (xAxis section) :
我在以下代码（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]
]
}]
});
回答by benebun
Maybe staggerLines is a solution for you:
也许 staggerLines 是您的解决方案：
xAxis: {
type: 'datetime',
labels: {
staggerLines: 2
}
},
I updated your jsfiddle with this setting: http://jsfiddle.net/benebun/4ghhf/134/
我用这个设置更新了你的 jsfiddle：http: //jsfiddle.net/benebun/4ghhf/134/
From the API Ref:
从API 参考：
staggerLines:Number (Since 2.1)
Horizontal axes only. The number of lines to spread the labels over to make room or tighter labels. .
staggerLines：数字（自 2.1 起）
仅水平轴。将标签展开以腾出空间或更紧标签的行数。.
(found via this commenton github)
（通过github上的这个评论找到）
I updated your jsfiddle with this setting: http://jsfiddle.net/benebun/4ghhf/134/
我用这个设置更新了你的 jsfiddle：http: //jsfiddle.net/benebun/4ghhf/134/
回答by Nick
Another solution is to use tickPixelInterval, which defines the pixel spacing between the ticks. A higher number will result in fewer ticks.
另一种解决方案是使用tickPixelInterval，它定义了刻度之间的像素间距。更高的数字将导致更少的滴答声。
http://api.highcharts.com/highcharts#xAxis.tickPixelInterval
http://api.highcharts.com/highcharts#xAxis.tickPixelInterval
回答by Joseph Juhnke
Found my answer here: Highcharts overlapping category labelsI was using a category array for xAxis labels instead of letting HighCharts parse a UTC date code.
在这里找到我的答案：Highcharts 重叠类别标签我使用的是 xAxis 标签的类别数组，而不是让 HighCharts 解析 UTC 日期代码。
回答by Michiel
It can also depend on the Font you are using. With me this happens for Arial, but works fine with Helvetica or Times New Roman.
它也可能取决于您使用的字体。对我来说，Arial 会发生这种情况，但在 Helvetica 或 Times New Roman 上效果很好。
回答by velval
Had the same issue and fixed with the autoRotationconfiguration. Highcharts will automatically rotate your labels if they don't fit. If there are too many even when rotated Highcharts will try remove labels automatically for you.
有同样的问题并通过autoRotation配置修复。如果标签不合适，Highcharts 将自动旋转您的标签。如果即使旋转时有太多标签，Highcharts 也会尝试自动为您删除标签。
xAxis = {
"type": 'datetime',
"tickInterval": 30 * 24 * 3600 * 1000,
"labels": {
autoRotation: [45]
}
}
Just make sure you don't specify stepas it will override autoRotation.
只要确保您没有指定step因为它会覆盖 autoRotation。
