如何使用vue-chartjs动态更新图表？

Question

我第一次使用vue.js和vue-chartjs。 在简化的代码示例中，我想通过按add Label按钮向图表添加标签，但是图表未更新。我的代码基于this教程。

我尝试从子组件中调用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已经绘制了图表。

但不幸的是，

this.datacollection.labels.push(13);

仍然无法正常工作。如果您查看源代码here，则只会在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。