Javascript Highchart 刻度间隔
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14677589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highchart tick interval
提问by HyperDevil
I cannot seem to figure out how to set my tick interval correctly.
Need to have an hourly tick on the X axis.
The data is minute based.
我似乎无法弄清楚如何正确设置我的滴答间隔。
需要在 X 轴上每小时打一个勾。
数据是基于分钟的。
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]
回答by gert vaartjes
First of all, remove the 'categories' property on xAxis, this has no meaning on a datetime axis. Note that datetime axes are based on milliseconds, so an interval of one hour is expressed as 3600 * 1000. See API highcharts, tickInterval
首先，删除 xAxis 上的 'categories' 属性，这在日期时间轴上没有意义。请注意，日期时间轴以毫秒为单位，因此一小时的间隔表示为 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的工作演示，请参见此处。
回答by Sebastian Bochan
You should use tickInterval with value: 3600 * 1000
您应该使用带有值的 tickInterval：3600 * 1000
