Vue-chartjs：即使数据没有改变也重新渲染图表

Question

我有一个包含两个图表的组件，我在单击按钮时显示它们。我使用图表的相同组件，但我通过两个不同的 getter 给它不同的 chartData。图表如下所示：

<script>
import { Bar, mixins } from 'vue-chartjs';

export default {
extends: Bar,
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
mounted() {
   this.renderChart(this.chartData, this.options);
  },
};
</script>

我知道 reactiveProp 如果数据已更改（并初始化漂亮的动画），则会呈现一个新图表。但目前两个 getter 为 this.chartData 提供相同的数据，所以当我尝试切换图表时，它保持不变。有什么方法可以更新或销毁数据以便重新呈现图表，即使它从另一个 getter 获取相同的数据？由于某些原因，update()、destroy()、clear() 等方法没有成功，但也许我用错了地方。

这是我的图表页面：

<template>
 <div>
  <button @click="showAll = false">
          Show old users
  </button>
  <button @click="showAll = true">
          Show all users
  </button>
  <chart v-if="isChartData === true && showAll === false" :options="options" :chart-data="setDataOld" />
  <chart v-if="isChartData === true && showAll === true" :options="options" :chart-data="setData" />
 <div>
<template>

Answer 1

这应该有效。注意 keys.

<chart :key="1" v-if="isChartData === true && showAll === false" :options="options" :chart-data="setDataOld" />
<chart :key="2" v-if="isChartData === true && showAll === true" :options="options" :chart-data="setData" />

本质上，您希望能够为 Vue 提供关于两个图表的区别的提示，以便它明确知道要呈现哪个图表，而不是使用其默认的组件重用策略。

Vue-chartjs：即使数据没有改变也重新渲染图表

Vue-chartjs: Re-render a chart even if data hasn't changed

javascript

vue.js

chart.js

vue-chartjs