[英]Highchart tick interval
我似乎無法弄清楚如何正確設置我的刻度間隔。
需要在X軸上按小時計時。
數據是基於分鍾的。
使用Javascript:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Temperature Today'
},
xAxis: {
type: "datetime",
categories: time,
dateTimeLabelFormats: {
day: '%h'
},
minTickInterval: 24 * 36000000 * 1000,
},
yAxis: {
title: {
text: 'Temperature'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y;
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
}
},
series: [{
name: 'Asen',
data: temp
}]
,
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});
數據數組:
temp = [-4.39,-4.39,-4.33,-4.33,-4.33,-4.33,-4.33]
time = [1359910725000,1359910786000,1359910848000,1359910908000,1359910968000,1359911028000,1359911089000,1359911150000]
首先,刪除xAxis上的“categories”屬性,這在日期時間軸上沒有意義。 請注意,日期時間軸基於毫秒,因此一小時的間隔表示為3600 * 1000.請參閱API highcharts,tickInterval
將此配置用於xAxis。
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%H'
},
tickInterval: 3600 * 1000
},
有關JS Bin的工作演示,請參見此處。
您應該使用tickInterval,其值為:3600 * 1000
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.