HighCharts學習筆記

目錄

• xAxis自定義時間刻度的顯示

 

xAxis自定義時間刻度

咱們先來看下HighCharts圖表的xAxis對象有哪些屬性（紅色標記重要屬性）：

allowDecimals: Boolean
categories: Array
dateTimeLabelFormats: Object
minTickInterval: Number
offset: Number
showFirstLabel: Boolean
showLastLabel: Boolean
tickColor: Color
title
type: String

//軸線的類型。可選項："linear"," logarithmic", "datetime"  or  "category"

tickInterval: Number

//在軸線上單位刻度的間距
labels
startOnTick: Boolean

endOnTick: Boolean
events

 

詳細參考：

xAxis

 

1）在X軸顯示例01-01的時間刻度

$('#container').highcharts({
	xAxis: {
		type: 'datetime',
		labels: {
			formatter: function () {
				return Highcharts.dateFormat('%m-%d ', this.value);
			}
		},
		startOnTick: true,
		endOnTick: true,
	},
	series: [{
		pointStart: Date.UTC(2014, 1, 1), //JS時間戳 1388534400000
		data: [29.9, 19.9, 42.9, 20.9]
	}]
});