Highcharts中x軸為時間時的設定
阿新 • • 發佈:2019-02-05
最近專案需要使用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'