用Highcharts画曲线图的时间轴问题

【转载】 用Highcharts画曲线图的时间轴问题

 转载至：http://blog.yidijimao.net/?p=388

 

 Highcharts 官网：http://www.highcharts.com

 Highcharts 官网示例：http://www.highcharts.com/demo/

 Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use

 Highcharts 官网参考手册：http://www.highcharts.com/ref/#credits--enabled

 

 

有个问题一直困扰我，在画曲线图的时候，横轴想让它显示成时间格式，怎么搞都不行。如果直接用字符串方式显示，一条线上数据点很多的时候，就都挤到一起去了。
这玩意中文资料很少，去它官网论坛逛了逛，后来发现，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);
    });

 

画出来是这样的：

 

 

---

 

另附广告：女朋友的淘宝网店，为她做宣传，希望大家别介意，http://iyseek.taobao.com  欢迎大家逛逛，嘿嘿！

如有需要帮助，请联系MSN：[email protected]（上班时在线）   QQ：331773812

欢迎大家共同交流！

---