为什么我的 Highcharts 图形中的 xAxis 标签位置如此奇怪?
Why are the xAxis labels in my Highcharts graphic so strangely positioned?
我无法正确显示 xAxis 标签。它们看起来像这样:
我试图重现这个in a fiddle,但是在那里,它工作正常。
我的代码如下所示:
$(function () {
$.get('graph_sea_ice_extent.csv', function(data)
{
var chart = new Highcharts.Chart({
chart: {
renderTo: "div_graph",
type: "line",
marginLeft: 40
},
title: {
text: "Arctic Sea Ice Extent",
align: "center"
},
xAxis: {
labels: {
step: 31
},
tickWidth: 0
},
yAxis: {
title: {
text: "Million sq. km",
align: "high",
rotation: 0,
x: 90,
y: -20
}
},
legend: {
enabled: false
},
data: {
csv: data
},
plotOptions: {
series: {
connectNulls: true,
shadow: false,
lineWidth: 1,
color: 'rgba(100, 100, 100, 0.2)',
marker: {
enabled: false
}
}
}
});
});
});
我记得读过一些关于 Highcharts 的内容,在过程的太晚阶段读取标签,所以它不知道 where/how 放置它们。但是我不知道可以做些什么来解决这个问题。
感谢任何提示。
maxStaggerLines: 数量
When staggerLines is not set, maxStaggerLines
defines how many lines the axis is allowed to add to automatically
avoid overlapping X labels. Set to 1 to disable overlap detection.
Defaults to 5.(docs link)
我无法正确显示 xAxis 标签。它们看起来像这样:
我试图重现这个in a fiddle,但是在那里,它工作正常。
我的代码如下所示:
$(function () {
$.get('graph_sea_ice_extent.csv', function(data)
{
var chart = new Highcharts.Chart({
chart: {
renderTo: "div_graph",
type: "line",
marginLeft: 40
},
title: {
text: "Arctic Sea Ice Extent",
align: "center"
},
xAxis: {
labels: {
step: 31
},
tickWidth: 0
},
yAxis: {
title: {
text: "Million sq. km",
align: "high",
rotation: 0,
x: 90,
y: -20
}
},
legend: {
enabled: false
},
data: {
csv: data
},
plotOptions: {
series: {
connectNulls: true,
shadow: false,
lineWidth: 1,
color: 'rgba(100, 100, 100, 0.2)',
marker: {
enabled: false
}
}
}
});
});
});
我记得读过一些关于 Highcharts 的内容,在过程的太晚阶段读取标签,所以它不知道 where/how 放置它们。但是我不知道可以做些什么来解决这个问题。
感谢任何提示。
maxStaggerLines: 数量
When staggerLines is not set, maxStaggerLines defines how many lines the axis is allowed to add to automatically avoid overlapping X labels. Set to 1 to disable overlap detection. Defaults to 5.(docs link)