http://www.highcharts.com是一个很强大的js画图工具,这几天把它用在项目里。
有个问题一直困扰我,在画曲线图的时候,横轴想让它显示成时间格式,怎么搞都不行。如果直接用字符串方式显示,一条线上数据点很多的时候,就都挤到一起去了。
这玩意中文资料很少,去它官网论坛逛了逛,后来发现,xAxis如果想设置成datetime,时间数据是不能放到categories里的,要放到series里去。
下面是个例子:
var chart1option = {
chart: {
renderTo: 'sysThreadChart'//画到id为sysThreadChart的div容器里
},
credits : {
enabled:false
},
title: {
text: 'Date Time Axis Test',
style: {
margin: '10px 100px 0 0' // center it
}
},
xAxis: {
type:"datetime",//时间轴要加上这个type,默认是linear
maxPadding : 0.05,
minPadding : 0.05,
//tickInterval : 24 * 3600 * 1000 * 2,//两天画一个x刻度
//或者150px画一个x刻度,如果跟上面那个一起设置了,则以最大的间隔为准
tickPixelInterval : 150,
tickWidth:5,//刻度的宽度
lineColor : '#990000',//自定义刻度颜色
lineWidth :3,//自定义x轴宽度
gridLineWidth :1,//默认是0,即在图上没有纵轴间隔线
//自定义x刻度上显示的时间格式,根据间隔大小,以下面预设的小时/分钟/日的格式来显示
dateTimeLabelFormats:
{
second: '%H:%M:%S',
minute: '%e. %b %H:%M',
hour: '%b/%e %H:%M',
day: '%e日/%b',
week: '%e. %b',
month: '%b %y',
year: '%Y'
}
},
//经测试,不能把时间值放到categories里,必须放到series的data里面去
//这样是不行的:categories:[1274457600000,1274544000000,1274630400000]
//时间单位是毫秒,Unix时间戳乘上1000
series:[{
data:
[
[1274457600000, 1200],
[1274544000000, 1300],
[1274630400000, 1250],
[1274803200000,1350]
]
}]
};
$(document).ready(function() {
//真正的画图是这句
chart1= new Highcharts.Chart(chart1option);
});
这个 帖子也给了2个例子,似乎时间格式不一定使用时间戳也行?画出来是这样的:
这个帖子也给了2个例子,似乎时间格式不一定使用时间戳也行?
有时间再整理一下其他hightcharts画图的例子,有点把它那个Options Reference翻译一下的冲动。。。