Как динамически обновить график с помощью vue-chartjs?

Question

Я использую vue.js и vue-chartjs в первый раз. В примере с упрощенным кодом я хочу добавить метку к диаграмме, нажав кнопку add Label, но диаграмма не обновляется. Мой код основан на этом учебнике.

Я пытался вызвать метод render из дочернего компонента, но это не работает.

Я ожидал, что когда я нажму кнопку add Label, метка 13 будет добавлена ​​на график.

Answer 1

В вашем коде есть несколько ошибок.Во-первых, если вы хотите вызвать метод из дочернего компонента, вы должны использовать специальный атрибут ref.Пожалуйста, смотрите больше о ref .

Так что в вашем коде это должно быть:

<template>
  ...
  <chart ref='chart' :chart-data="datacollection"></chart>
  ...
</template>

<script>
  ...
  this.$refs.chart.render() // Not Chart.render()
  ...
</script>

Во-вторых, у вас есть опечатка в Chart.js:

this.chartData // Not this.chartdata

Так что это означает, что ваш render метод в mounted не работает и не нужен.Ваш график уже нарисован на reactiveProp после того, как вы установили chartData prop.

Но, к сожалению, это:

this.datacollection.labels.push(13);

все еще не работает.Если вы посмотрите на исходный код здесь , вы увидите, что библиотека использует watcher только на chartData.Это означает, что если вы измените все chartData, это будет работать нормально (как это работает при первом рисовании).Пожалуйста, смотрите больше о watcher .

Так что, если вы хотите положиться на reactiveProp, тогда, когда вы хотите обновить labels, вы должны установить:

this.datacollection = {
  ...this.datacollection,
  labels: this.datacollection.labels.concat(13) // avoid to mutate data
}

Answer 2

Мне помогло добавление v-if="loaded", которое вы установите на false до изменения.Затем, после вашего изменения, установите его на false.