如何使用图表绘制每小时检测到的活动图表.js

Question

>我有一个每 10 分钟运行一次的进程来检查来自另一个进程的活动，如果它检测到任何活动，它会将日期、时间和"A"添加到数据库中表示处于活动状态。
在接下来的 10 分钟内，当它再次运行时，如果活动消失，它将在数据库中添加另一条记录，其中包含日期、时间和"N"表示正常。如果活动在下次检查时仍然存在，则除非有其他情况，否则不会在数据库中添加另一条记录。
然后我在数据库中有一条记录显示昨天在"2017-03-21 22：30：05"它检测到活动，添加了"A"，此活动一直持续到"2017-03-22 01：15：10"，当时在检查过程中未检测到任何活动，添加了另一条带有"2017-03-22 01：15：10"日期，时间和字母"N"的记录。

我正在尝试制作一个显示正常活动的折线图，并可能向下显示它检测到任何活动的时间。

如果有人使用 Chart 做了类似的事情.js将非常感谢您的帮助，我看不出如何将这些数据映射到图表上以在检测到任何活动时显示。

谢谢！

Answer 1

如果我正确解释了您的问题，这里有一个您可以使用的选项。 在直接跳到示例之前，让我解释一下这种方法。

首先，您的要求有点挑战性，因为这需要在 y 轴上使用"类别"刻度，在 x 轴上使用"时间"刻度。 这是一个挑战，因为折线图通常在 y 轴上具有"类别"、"线性"或"时间"x 轴和基于数值的刻度(例如线性、对数等)。

因此，为了克服这个问题，我不得不在 y 轴上使用"线性"刻度，但使用一些回调来使其看起来好像它实际上是一个"类别"刻度。 顺便说一句，我尝试在 y 轴上添加"类别"比例，但永远无法呈现图表(所以我认为这是不可能的)。

由于您没有提供有关如何存储数据的确切示例，因此我不得不对我的模拟数据做出一些假设。 无论实际存储方式如何，方法都是处理数据以将其转换为图表.js可以理解的格式。 在我的示例中，我使用一个名为prepareDataForChart的函数完成此操作。

这是最终的图表配置。

var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "Object 1",
fill: false,
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.white,
pointRadius: 0,
steppedLine: true,
data: prepareDataForChart(mockedActivityData),
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Object Activity State Over Time'
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
// since we mapped the eventState to a numerical value,
// let's convert that back to a text value when the tooltip
// is displayed
label: function(tooltipItem, data) {
if (tooltipItem.yLabel === 1) {
return 'Normal';
} else if (tooltipItem.yLabel === 2) {
return 'Active';
}
}
}
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
minute: 'lll',
},
tooltipFormat: 'lll',
},
scaleLabel: {
display: true,
labelString: 'Time',
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Activity State',
},
ticks: {
min: 0,
max: 3,
stepSize: 1,
// since we mapped the eventState to a numerical value,
// let's convert that back to a text value to display 
// on the y-axis (and also hide all other tick labels)
callback: function(value, index, values) {
if (value === 2) {
return 'Active';
} if (value === 1) {
return 'Normal';
} else {
return ' ';
}
},
},
}]
}
}
});

因为能够真正看到一些东西总是很高兴的，所以这里有一个代码笔示例。