highchart 时间轴 固定起始和结束值

来源:互联网 发布:我的世界编程网站 编辑:程序博客网 时间:2024/05/01 14:16

最近有这么一个需求,比较不同年份之间的折线图,一开始是根据数据来生成的数据,但是客户方看了之后,发现对比之间的折线图的横坐标不对应,原因就是在于,并不是每一年的数据都是从1月1日到12月31号,这就造成了折线图的起始和结束都不是在同一个日期上,因此,对比图也就失去了作用。

因此,需要修改一下,固定横坐标的起始和结束点。但是我看api之后,都是用categories属性来设置,而后,data根据categories来设置相应的值。但是我的横坐标是的type是datetime型,时间是跟着数据绑在一起的传回来的,因此放弃了这个办法。然后又看了一下api,发现有max和min这两个属性,但是值类型是int型的,也跟时间不符合。

万般无奈,只能求救万能的谷歌,一个偶然的小例子给我了启发,将年月日转成时间戳格式,正好可以跟我返回的数据对应。

上一下图,看一下效果:



这样的话,就可以在同一时间点进行比较了。


主要代码:

var minDate = year + '-01-01';minDate = minDate.substring(0,10);    minDate = minDate.replace(/-/g,'/'); var min = new Date(minDate).getTime();var maxDate = year + '-12-31';maxDate = maxDate.substring(0,10);    maxDate = maxDate.replace(/-/g,'/'); var max = new Date(maxDate).getTime();

        xAxis: {// 时间轴            type: 'datetime',            dateTimeLabelFormats: {        day: '%m/%d',        month: '%m/%d',        year: '%m/%d',        week: '%m/%d'            },        gridLineWidth: 1,        min: min,    max: max        },

相信大家一定能看懂。


0 0