如何在 chartjs v2 中为同一 x 轴在 y 轴上绘制多条线？
How to draw multiple line on y axis for same x axis in chartjs v2?
我在数据库中有时间序列数据，如下所示：
[
{
min: 100,
max: 200,
avg: 150,
time: 12345678.. (unix timestamp)
},
{
min: ..
...
}, ...
]
我可以通过从数据库中提取平均值作为数据点来绘制折线图，例如：
[
{
t: 12345678... (unix timestamp)
y: 150 (avg value)
},...
]
我想要实现的是使用与以下相同的数据集分别为最小值、最大值和平均值绘制三条线：
[
{
t: 12345678... (unix timestamp),
y1: 150 (avg value),
y2: 100 (min value),
y3: 200 (max value)
},...
]
我曾尝试查看文档和此处的许多问题，但没有找到线索。
我可以分离数据集，但通常我在后端处理大量数据，想看看这是否可以在没有任何进一步处理的情况下完成。
想知道这是否可以实现还是有 chart.js 的限制？
您不能将多个键值与 Chart.JS 一起使用，因为它不接受该数据格式，但是您可以格式化传入数据以创建基于 two-line sample 的图表。
这是工作演示：https://jsfiddle.net/adelriosantiago/esn2wjxv/27/
这是准备数据的方式：
- 错误格式的原始数据被调用
rawData。
- 函数
getSingleProp转换data（第二个参数），以便只提取属性 prop（第一个参数）。这发生在行：
data.map((i) => {
return { y: i[prop], x: i.time }
})
- 调用 Chart.JS 时，我们只需将
getSingleProp("[the property we want]", rawData) 用作 data 即可生成您要查找的图表。
我在数据库中有时间序列数据，如下所示：
[
{
min: 100,
max: 200,
avg: 150,
time: 12345678.. (unix timestamp)
},
{
min: ..
...
}, ...
]
我可以通过从数据库中提取平均值作为数据点来绘制折线图，例如：
[
{
t: 12345678... (unix timestamp)
y: 150 (avg value)
},...
]
我想要实现的是使用与以下相同的数据集分别为最小值、最大值和平均值绘制三条线：
[
{
t: 12345678... (unix timestamp),
y1: 150 (avg value),
y2: 100 (min value),
y3: 200 (max value)
},...
]
我曾尝试查看文档和此处的许多问题，但没有找到线索。 我可以分离数据集，但通常我在后端处理大量数据，想看看这是否可以在没有任何进一步处理的情况下完成。 想知道这是否可以实现还是有 chart.js 的限制？
您不能将多个键值与 Chart.JS 一起使用，因为它不接受该数据格式，但是您可以格式化传入数据以创建基于 two-line sample 的图表。
这是工作演示：https://jsfiddle.net/adelriosantiago/esn2wjxv/27/
这是准备数据的方式：
- 错误格式的原始数据被调用
rawData。 - 函数
getSingleProp转换data（第二个参数），以便只提取属性prop（第一个参数）。这发生在行：
data.map((i) => {
return { y: i[prop], x: i.time }
})
- 调用 Chart.JS 时，我们只需将
getSingleProp("[the property we want]", rawData)用作data即可生成您要查找的图表。