Как нарисовать несколько линий по оси y для той же оси x в chartjs v2?

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) в виде data в результате появится диаграмма, которую вы ищете.