我想在区域图表中输出以下数据(时间,电池电量):
data: [
[08.15, 14.8],
[08.20, 13.9],
[08.25, 12.8],
[08.30, 11.8],
[08.35, 13.9],
[08.40, 14.1],
[08.45, 13.9],
[08.50, 14],
[08.55, 14],
[09.00, 14.1],
[09.05, 14.4]
]
x轴应该从上午00.00 AM 00.00 PM开始,一整天。
不幸的是,当我查看API时,我不明白使用哪些选项。 我现在得到的是x轴,从8.00到8.55,8.60,8.65~9.00。所以它使用十进制系统而不是分钟系统。
如何配置该线路应包含24小时60分钟?
根据当前数据,该图表将是空的,仅在早上8点到9点之间有点。
我希望有人可以帮助我。
谢谢,
Mattijs
答案 0 :(得分:31)
您可以尝试使用此代码以12小时的时间格式制作x轴
xAxis: {
title: {
enabled: true,
text: 'Hours of the Day'
},
type: 'datetime',
dateTimeLabelFormats : {
hour: '%I %p',
minute: '%I:%M %p'
}
},
同样对于“工具提示”,请尝试以下方法:
tooltip: {
formatter: function() {
return ''+
"" +
'Time: '+ Highcharts.dateFormat('%I:%M %p', this.x);
}
},
当然系列会是:
series: [{
data: [
[Date.UTC(2013, 3, 22, 1, 15), 12.7],
[Date.UTC(2012, 3, 24, 3, 20), 13.5],
[Date.UTC(2012, 2, 22, 2, 25), 18.8]
]
}]
希望它能解决你的问题。感谢。
答案 1 :(得分:8)
Highcharts有一种内置的方式来绘制时间或日期作为xaxis。通常,在这种情况下,您的数据将使用以毫秒为单位的时间值,而highcharts将相应地绘制它(see this example)。
如果您希望每天24小时都包含数据,则可能如下所示:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime' //ensures that xAxis is treated as datetime values
},
series: [{
data: [
[Date.UTC(2012, 5, 22, 8, 15), 14.8],
[Date.UTC(2012, 5, 22, 8, 20), 13.9],
[Date.UTC(2012, 5, 22, 8, 25), 12.8]
//and so on...
]
}]
});
然后,您可以执行类似使用自定义xAxis formatter或date formatter的操作,以显示您想要的标签。