Chart.js不同的时间数据集

Question

我想用Chart.js绘制我的DIY恒温器的温度读数和加热器状态。加热器状态是0或1，但我把它保存在一个最小的表示中：当它打开/关闭时，我只有值。加热时间从不等于测量时间，而是介于两者之间。

我想在同一时间x轴上绘制时间数据。从至少20个例子、这里的问题和其他资源中，我收集了这个Fiddle，这是我最好的猜测。然而，我不能合理地绘制时间轴和它们的数据。在一个非常简化的例子中，如果我将其简化为x轴上的数值数据，我会得到绘制在后一个x值的前几个x值上的较小数据集。

js代码是：

var options = {
type: 'line',
data: {
labels: ["2018-12-07 08:45:17", 
"2018-12-07 09:30:17", "2018-12-07 10:15:16", 
"2018-12-07 11:00:17", "2018-12-07 14:45:16"],
datasets: [
{
label: '1st line',
data: [12, 19, 7, 9, 10, 8],
},  
{
steppedLine: 'before',
xAxisID: 'x-axis-2',
label: '2nd line',
data: [                       
{
x: "2018-12-07 09:15:47",
y: 3
}, {
x: "2018-12-07 10:55:25",
y: 5
}, {
x: "2018-12-07 13:05:00",
y: 3
}],
}
]
},
options: {
scales: {
xAxes: [{}, {
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
//display: false,
}],
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

Answer 1

首先，可以使用唯一的xAxis并将其定义为时间笛卡尔轴。

xAxes: [{
type: 'time',
time: {
unit: 'second'
}
}]

此外，您不应该提供data.labels，而应该使用包含x和y属性的对象来定义每个数据点。

var options = {
type: 'line',
data: {
datasets: [{
label: '1st line',
data: [{
x: "2018-12-07 08:45:17",
y: 12
},
{
x: "2018-12-07 09:30:17",
y: 19
},
{
x: "2018-12-07 10:15:16",
y: 7
},
{
x: "2018-12-07 11:00:17",
y: 9
},
{
x: "2018-12-07 14:45:16",
y: 10
}
]
},
{
label: '2nd line',
steppedLine: 'before',
data: [{
x: "2018-12-07 09:15:47",
y: 3
},
{
x: "2018-12-07 10:55:25",
y: 5
},
{
x: "2018-12-07 13:05:00",
y: 3
}
],
backgroundColor: 'lightgreen'
}
]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second'
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chartJSContainer" height="90"></canvas>

Answer 2

我终于能够解决javaScript对象的数据结构问题。它需要这种结构[{ "x": 1, "y":1}, {"x":2, "y":3} ]，其中x和y是每个条目的对象属性x和y，而不是一劳永逸(这对我来说总是更有意义(。但我可以在没有这些额外标签的情况下发送数据，并使用类似这样的javascript进行转换：

datasets: [
{
label: 'Temperature',
data: response.temperature.x.map((x, i) => ({ x, y: response.temperature.y[i] })),
},
{
label: 'Room 2 Temperature',
data: response.temp2.x.map((x, i) => ({ x, y: response.temp2.y[i] })),
},
] // datasets