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：即使数据没有改变，也要重新渲染图表

1 个答案: