1. 程式人生 > >Highcharts中x軸為時間時的設定

Highcharts中x軸為時間時的設定

最近專案需要使用Highcharts畫圖,就學習了一下,怕以後忘記了,記錄一下。

$(function () {
        $('#container').highcharts({
            global:{
                useUTC:false
            },
            chart: {
                type: 'spline'

            },
            credits:{
                enabled:false
            },
            title: {
                text: '請求次數'
            },
            xAxis: {
                type: 'datetime',
                // maxZoom:24 * 3600 * 1000, // x軸總共顯示的時間
                //min:<?=strtotime(date('Y-m-d'))?>,
                dateTimeLabelFormats: {
//                  minute: '%H:%M'
                    day: '%H:%M'

                }
            },
            yAxis: {
                title: {
                    text: '次數'
                },
                min:0
            },
            tooltip: {
                valueSuffix: '次數'
            },
            plotOptions: {
                spline: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 3
                        }
                    },
                    marker: {
                        enabled: false
                    },
                    // pointInterval: 300 * 1000, // 曲線每個點的間隔
                    // pointStart: Date.UTC(2014, 6, 10)
                }
            },
            series: [{
                name:'測試一下',
                data:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,214,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,22,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,99,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
                ],
                pointInterval: 306000,
                pointStart: Date.UTC(2014, 6, 10,0,0,0),
                pointEnd:Date.UTC(2014,6,10,23,59,59),
                // pointEnd:Date.UTC(<?php date('Y , m, d',strtotime('-1 month'))?>, 0, 0, 0;?>)
            }],
 
        });
    });

一下是執行結果:


時間格式的設定:

--------------------------------------------------------

second: '%Y-%m-%d<br/>%H:%M:%S',  
minute: '%Y-%m-%d<br/>%H:%M',  
hour: '%Y-%m-%d<br/>%H:%M',  
day: '%Y<br/>%m-%d',  
week: '%Y<br/>%m-%d',  
month: '%Y-%m',  
year: '%Y'  
--------------------------------------------------------
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'