如何在chartjs v2中在同一x轴的y轴上绘制多条线？

问题描述

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

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

通过将avg值作为数据点从数据库中拉出，我可以使用avg值绘制折线图：

[
  {
    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/

这是准备数据的方式：

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

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

1. 调用Chart.JS时，我们只需将getSingleProp("[the property we want]",rawData)用作data即可得到您要查找的图表。