如何将小时和分钟数据输入到chartJS
问题描述:
我正在尝试使用Chart.js制作折线图。我的数据的形式如下:如何将小时和分钟数据输入到chartJS
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
属性期望一个数字数组。因此,在将它们用于图表之前,您需要解析标签(使用moment.js)和result
数组中的数据。
下面是如何标签和数据应该从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(e.x, 'HH:mm'));
var data = result.map(e => +e.y);
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>
非常感谢,这工作 – Saikiran
是不是有一种方法,使这只有一行?而不是图表占据的区域? – Saikiran
是的,为您的数据集设置'fill:false' –