我正在绘制带有每月数据点的折线图。但是,我希望比例尺仅显示年份字符串。 到目前为止,一切都很简单。然而,据我所知,Highcharts 将始终绘制相对于刻度线的 xAxis 标签...并且我需要将它们显示在刻度线之间的中心。 请问我缺少一些简单的方法吗?
根据我的理解,您想要的行为是:
http://jsfiddle.net/msjaiswal/U45Sr/2/
让我分解一下解决方案:
1.每月数据点
一个数据点对应一个月:
var data = [
[Date.UTC(2003,1),0.872],
[Date.UTC(2003,2),0.8714],
[Date.UTC(2003,3),0.8638],
[Date.UTC(2003,4),0.8567],
[Date.UTC(2003,5),0.8536],
[Date.UTC(2003,6),0.8564],
..
]
2。缩放以仅显示每年的刻度线
使用这样的图表选项:
xAxis: {
minRange: 30 * 24 * 3600 * 1000,
minTickInterval: 12* 30 * 24 * 3600 * 1000 // a year
},
没有简单、开箱即用的解决方案。您必须使用事件并相应地重新定位标签。这是一个示例解决方案,即使在刻度数发生变化时,也可以在调整浏览器窗口大小(或以其他方式强制重新绘制图表)时使用:http://jsfiddle.net/McNetic/eyyom2qg/3/
它的工作原理是将相同的事件处理程序附加到
load
和 redraw
事件:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
处理程序本身如下所示:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
基本上,它的工作原理如下:
可以通过回调(在加载和重绘时调用)手动调整标签位置来解决此问题。请参阅我对这篇文章的评论中链接的小提琴:Highcharts - 如何在日期时间 x 轴上居中标签?
有几个 xAxis 选项可以帮助您完成您想要的操作。
http://api.highcharts.com/highcharts#xAxis.labels
看一下“align”,它指定标签是在刻度线的左侧还是右侧,还有“x”,它允许您指定标签相对于刻度线的 x 偏移量。