[英]How to feed hour and minute data into chartJS
我正在尝试使用Chart.js制作折线图。 我的数据具有以下形式:
var result = [{x:"18:00",y:"230"},{x:"19:00",y:"232"},{x:"20:00",y:"236"},{x:"22:00",y:"228"}];
其中,x表示时间,以小时和分钟为单位。 我这样输入数据
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00","24:00"],
datasets: [{
label: 'Voltage Fluctuation',
data: result,
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
position: 'bottom',
unit: 'minute',
time: {
displayFormats: {
hour: 'HH:mm'
}
}
}],
},
}
});
我得到一个空图表。 我要去哪里错了? 我觉得我的标签做错了,因为它们没有出现在图表上,但我不知道怎么做。 有什么方法可以使用momentjs填充数据标签吗?
您不能仅将result
数组传递给data
,因为它的格式不正确。 data
属性需要一个数字数组。 因此,您需要先解析result
数组中的标签(使用moment.js)和数据,然后再将它们用于图表。
这是应如何从result
数组中解析标签和数据并将其馈送到图表的方法:
var result = [{ x: "18:00", y: "230" }, { x: "19:00", y: "232" }, { x: "20:00", y: "236" }, { x: "22:00", y: "228" }]; // parse labels and data var labels = result.map(e => moment(ex, 'HH:mm')); var data = result.map(e => +ey); var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'Voltage Fluctuation', data: data, borderWidth: 1 }] }, options: { scales: { xAxes: [{ type: 'time', time: { unit: 'hour', displayFormats: { hour: 'HH:mm' } } }] }, } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="myChart"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.