node.js - 如何在chartjs v2中为相同的x轴在y轴上绘制多条线？

Question

我在数据库中有时间序列数据，如下所示：

[
  {
    min: 100,
    max: 200,
    avg: 150,
    time: 12345678.. (unix timestamp)
  },
  {
    min: ..
    ...
  }, ...
]

我可以通过将平均值从数据库中提取为数据点来使用平均值绘制折线图，​​例如：

[
  {
    t: 12345678... (unix timestamp)
    y: 150 (avg value)
  },...
]

我想要实现的是分别使用相同的数据集为 min、max 和 avg 绘制三条线：

[
  {
    t: 12345678... (unix timestamp),
    y1: 150 (avg value),
    y2: 100 (min value),
    y3: 200 (max value)
  },...
]

我试过在这里查看文档和许多问题，但没有找到线索。我可以分离数据集，但通常我在后端处理大量数据，并想看看是否可以在没有任何进一步处理的情况下完成。想知道这是可以实现的还是 chart.js 的限制？

Answer 1

您不能在 Chart.JS 中使用多个键值，因为它并不意味着接受该数据格式，但是您可以格式化传入数据以基于两行示例创建图表。

这是工作演示：https ://jsfiddle.net/adelriosantiago/esn2wjxv/27/

这是准备数据的方式：

1. 格式错误的原始数据称为rawData.
2. 该函数getSingleProp转换data（第二个参数），以便只prop提取属性（第一个参数）。这发生在以下行：

data.map((i) => {
    return { y: i[prop], x: i.time }
})

3. 调用 Chart.JS 时，我们只需使用getSingleProp("[the property we want]", rawData)as 来data生成您要查找的图表。