[英]Highchart tick interval
I cannot seem to figure out how to set my tick interval correctly. 我似乎无法弄清楚如何正确设置我的刻度间隔。
Need to have an hourly tick on the X axis. 需要在X轴上按小时计时。
The data is minute based. 数据是基于分钟的。
Javascript: 使用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'
}
}
});
});
});
Data arrays: 数据数组:
temp = [-4.39,-4.39,-4.33,-4.33,-4.33,-4.33,-4.33]
time = [1359910725000,1359910786000,1359910848000,1359910908000,1359910968000,1359911028000,1359911089000,1359911150000]
First of all, remove the 'categories' property on xAxis, this has no meaning on a datetime axis. 首先,删除xAxis上的“categories”属性,这在日期时间轴上没有意义。 Note that datetime axes are based on milliseconds, so an interval of one hour is expressed as 3600 * 1000. See API highcharts, tickInterval
请注意,日期时间轴基于毫秒,因此一小时的间隔表示为3600 * 1000.请参阅API highcharts,tickInterval
use this config for the xAxis. 将此配置用于xAxis。
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%H'
},
tickInterval: 3600 * 1000
},
See here for a working demo on JS Bin . 有关JS Bin的工作演示,请参见此处。
您应该使用tickInterval,其值为:3600 * 1000
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.