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

Question

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

我尝试从子组件调用render方法，但这不起作用。

我希望当我单击add Label按钮时，标签13将被添加到图表中。

Answer 1

对我有帮助的是添加了一个v-if="loaded" ，您将在更改之前将其设置为false 。 然后，在您进行更改后，将其设置为false 。

Answer 2

您的代码中有一些错误。 首先，如果要从子组件调用方法，则必须使用特殊属性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

因此，这意味着您在mounted中的render方法不起作用且不必要。 设置chartData后，您的图表已由reactiveProp绘制。

但不幸的是：

this.datacollection.labels.push(13);

还是不行。 如果您查看此处的源代码，您将看到该库仅在chartData上使用观察器。 这意味着如果您更改整个chartData这将正常工作（因为它在第一次绘制时工作）。 请参阅有关watcher的更多信息。

所以如果你想依赖reactiveProp那么当你想要更新labels时，你应该设置：

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