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

#node.js #chart.js #react-chartjs #react-chartjs-2

#node.js #chart.js #реагировать-chartjs #реагировать-chartjs-2

Вопрос:

У меня есть данные временных рядов в базе данных, которая выглядит следующим образом:

 [
  {
    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 — ограничение?

1. Будет ли это похоже на эту двухстрочную диаграмму , но с дополнительной линией? Если нет, не могли бы вы опубликовать образец изображения Google, как оно должно выглядеть?

2. Да @adelriosantiago точно так же, но с использованием одного набора данных с несколькими значениями ключа.

Ответ №1:

Вы не можете использовать несколько ключевых значений с диаграммой.JS, поскольку он не предназначен для принятия этого формата данных, однако вы можете форматировать входящие данные для создания диаграммы на основе двухстрочного образца.

Вот рабочая демонстрация: https://jsfiddle.net/adelriosantiago/esn2wjxv/27 /

Вот как подготавливаются данные:

Вызываются необработанные данные в неправильном формате rawData .
Функция getSingleProp преобразует data (второй аргумент) так, что извлекается только свойство prop (первый аргумент). Это происходит на линии:

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

При вызове диаграммы.JS мы просто используем getSingleProp("[the property we want]", rawData) как data результат в диаграмме, которую вы ищете.

1. Спасибо. Я знаю, что могу сделать это таким образом. То, что я искал, это посмотреть, поддерживается ли оно изначально, поскольку данные, которые я отображаю, находятся в диапазоне от тысяч до миллионов. Но я думаю, что это единственный путь.

2. Я вижу, имейте в виду, что данные от тысяч до миллионов могут плохо работать на графике. JS, даже если данные могут быть загружены, как вы упомянули. Возможно, вам стоит взглянуть на три. JS или WebGL в целом. Оба предназначены для 3D-графики, но вы можете игнорировать одну ось. Графика в любом из этих 2 фреймворков использует графический процессор. Это позволит вам отображать миллионы объектов .