用Highcharts画曲线图的时间轴问题
来源:互联网 发布:linux清空显存 编辑:程序博客网 时间:2024/06/06 07:46
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,默认是linearmaxPadding : 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时间戳乘上1000series:[{ data:[[1274457600000, 1200], [1274544000000, 1300], [1274630400000, 1250],[1274803200000,1350]]}]};$(document).ready(function() { //真正的画图是这句chart1= new Highcharts.Chart(chart1option);});
这个帖子也给了2个例子,似乎时间格式不一定使用时间戳也行?画出来是这样的:
这个帖子也给了2个例子,似乎时间格式不一定使用时间戳也行?
有时间再整理一下其他hightcharts画图的例子,有点把它那个Options Reference翻译一下的冲动。。。
转载地址:http://blog.yidijimao.net/?p=388
0 0
- 用Highcharts画曲线图的时间轴问题
- 用Highcharts画曲线图的时间轴问题
- 用Highcharts画曲线图的时间轴问题
- highcharts 带上下限的曲线图
- highcharts曲线图
- 关于highcharts时间轴与数据绑定的问题
- Highcharts 统计报表的使用(曲线图)
- highcharts 时间问题
- highcharts 时间问题
- 图表,曲线图制作 Highcharts.com,建议用这个网站的js
- highcharts曲线图(二)
- Highcharts 生成曲线图。
- highcharts缩放曲线图
- Highcharts基本曲线图
- Highcharts 调整曲线图的粗细、点大小、点形状
- 使用Highcharts实现曲线图和饼型图的展示
- Highcharts 调整曲线图的粗细、点大小、点形状
- 对highcharts的总结(饼图、柱状图、折线图、曲线图)
- MYSQL管理----数据库删除恢复
- python解决ImportError: No module named google.protobuf
- 分享界面
- ORACLE 关于一些日期处理的sql
- splay POJ 3580SuperMemo
- 用Highcharts画曲线图的时间轴问题
- ruby on rails学习第5篇:rake的用法(转载)
- php获取提交参数
- Android 系统字体规范与应用探索
- Android之模拟信号示波器
- Android 图片下载本地内存的缓存方式
- Java Annotation手册
- 推导坐标旋转公式
- Android之AudioRecord实现"助听器"