Обновление данных, но диаграмма не

Question

Я вижу, как мой объект данных меняется в инструментах Vue dev, но диаграмма не обновляется. Это не проблема, когда я рисую одну вещь на графике, но теперь я накладываю два набора данных, и диаграмма теряет свою реактивность.

<line-chart :library="chartOptions" v-if="photon.sortedBatch.sorted" :data="photon.sortedBatch.rbChannelOverlay"></line-chart>

Вот как выглядит photon.sortedBatch.rbChannelOverlay

photon.sortedBatch.rbChannelOverlay =   [{name:'R/B Channel Previous Batch Overlay',data:value.sortedBatch.rbChannel},{name:'R/B Channel',data:value.data.rbChannel}]

Как мне обновлять график? Могу ли я ссылаться на диаграмму и вызывать функцию обновления всякий раз, когда добавляю новую точку данных?

Answer 1

Мое решение для обновления диаграммы состояло в том, чтобы сохранить данные во временной переменной и очистить мою переменную данных, а затем установить ее равной моей временной переменной.

Answer 2

Вы можете использовать функцию Vue mount , чтобы изначально загрузить график с любыми имеющимися у вас данными. Затем, используя метод, вы можете ссылаться на график и вносить свои обновления. Пример:

  this.chart.data.labels.push(this.count);
  this.chart.data.datasets.forEach((dataset) => {
    dataset.data.push(Math.floor(Math.random() * (75 - 5 + 1)) + 5);
  });

  this.count = this.count + 1;
  this.chart.update();

Пример скрипта: https://jsfiddle.net/rogerwes/95ovr71u/39/

В противном случае я бы посоветовал изучить https://vue -chartjs.org / , и примеры, которые они предоставляют, должны дать вам хороший способ обновить диаграмму.