使用新数据更新图表 vue3-chart

Question

我使用 vue3-chart-v2 在 Vue 组件中有 Chart.js 图表。 一切正常，直到我想更新数据。

现在，我正在使用观察者来检查数据是否发生变化。 这可行，但更新图表则不行。 我的想法是当数据发生变化时销毁图表并使用新数据重新渲染它

我在堆栈上看到了一些使用 mixinsreactiveData/reactiveProp 的问题，但不知何故我无法使用 vue3-chart-v2 访问它们，我只得到一个错误。

有人可以帮我吗？ 这是我在堆栈上的第一个问题

我的代码：

<script>
import { defineComponent } from 'vue';
import { Doughnut } from 'vue3-chart-v2';

export default defineComponent({
name: 'PieChart',
extends: Doughnut,
props: {
    carbonData: Object
},
data() {
return {
    chartData: {
        labels: ['Slabs', 'Columns', 'Foundation', 'Core'],
        datasets: [
            {
                data: [ this.carbonData.slabs, this.carbonData.columns, this.carbonData.foundation, this.carbonData.core ],
                backgroundColor: ['#8FBC8F', '#87CEFA', '#CD853F', '#e64e3e'],
                borderWidth: 1,
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            position: 'right',
        }
    }
}
},
mounted () {
    this.renderPieChart();
},
methods: {
    renderPieChart() {
        this.renderChart(this.chartData, this.options);
    }
},
watch: {
    carbonData : {
        deep: true, 
        handler() {
            this.state.chartObj.destroy();
            this.renderChart(this.chartData, this.chartOptions);
        },
   }
},

})
</script>

Answer 1

我们用一个简单的方法：

1. 在图表中添加 v-if，例如

   v-if="renderChart"

2. 一开始是

   false

   ，但加载数据后将其更改为

   true

3. 每当您预计数据发生变化时，请再次将其更改为

   false

   ，并在数据更改后再次将其更新为

   true

   。

它已经为我们工作了很长时间了。

Answer 2

虽然已经过去了几年，但我带来了一个解决方案，我在Vue3和ChartJS（Pie）中通过api渲染时遇到问题，其中我使用Compulated和Watch如下：

const normalizeValueChart = (data) => {
  let labels = [];
  let datasets = [];

  for (const element of data) {
    labels.push(element.label);
    datasets.push(element.value);
  }

  return {
    labels: [...labels],
    datasets: [
      {
        data: [...datasets]
      }
    ]
  };
} 

watch(() => vulnerabilityStore.vulnerabilityInfoChart, async (newValue) => {
  computedChartDirectlyRelated.value = normalizeValueChart(newValue.directlyRelated);
});


const computedChartDirectlyRelated = computed({
  get() {
    return chartDirectlyRelated.value ?? { ...defaultValueChart };
  },
  set(newValue) {
    chartDirectlyRelated.value = newValue;
  }
});

希望对某人有帮助