Javascript Highchart列范围(含小时)
我试图创建一个图表,以显示每天的小时范围。换句话说,我想做这样的事情: ,但用小时信息代替温度。 我已经编写了这段代码(),但是系统没有画出条线 有人能解释一下怎么做吗?谢谢你抽出时间Javascript Highchart列范围(含小时),javascript,highcharts,Javascript,Highcharts,我试图创建一个图表,以显示每天的小时范围。换句话说,我想做这样的事情: ,但用小时信息代替温度。 我已经编写了这段代码(),但是系统没有画出条线 有人能解释一下怎么做吗?谢谢你抽出时间 $('#container').highcharts({ chart: { type: 'columnrange', inverted: true }, xAxis: { catego
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
xAxis: {
categories: ['01/01/2000', '02/01/2000', '03/01/2000', '04/01/2000', '05/01/2000', '06/01/2000', '07/01/2000']
},
yAxis: {
type: 'datetime',
title: {
text: 'Heure'
}
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return (this.y.getHours()+1) + ':' + (this.y.getMinutes());
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Working hours',
data: [
[Date(0,0,0, 12,00,00), new Date(0,0,0, 15,00,00)],
[Date(0,0,0, 13,00,00), new Date(0,0,0, 16,00,00)],
[Date(0,0,0, 14,00,00), new Date(0,0,0, 17,00,00)],
[Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)],
[Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)],
[Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)],
[Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)]
]
}]
});
首先,使用而不仅仅是Date
——它将返回一个数字(我相信在列范围内可以使用这个数字);其次,要正确显示,请更改格式化程序,以从现在的数据毫秒创建日期对象:
formatter: function () {
var d = new Date(this.y);
return return d.getHours() + ':' + (d.getMinutes());
}
检查JSFIDLE