Hyp*_*vil 5 javascript highcharts pchart
我似乎无法弄清楚如何正确设置我的刻度间隔.
需要在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'
}
}
});
});
});
Run Code Online (Sandbox Code Playgroud)
数据数组:
temp = [-4.39,-4.39,-4.33,-4.33,-4.33,-4.33,-4.33]
time = [1359910725000,1359910786000,1359910848000,1359910908000,1359910968000,1359911028000,1359911089000,1359911150000]
Run Code Online (Sandbox Code Playgroud)
小智 15
首先,删除xAxis上的"categories"属性,这在日期时间轴上没有意义.请注意,日期时间轴基于毫秒,因此一小时的间隔表示为3600*1000.请参阅API highcharts,tickInterval
将此配置用于xAxis.
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%H'
},
tickInterval: 3600 * 1000
},
Run Code Online (Sandbox Code Playgroud)
有关JS Bin的工作演示,请参见此处.
| 归档时间: |
|
| 查看次数: |
30281 次 |
| 最近记录: |