Vue.js: 图表的数据被重新定义

Question

我用vue-chart.js画了一个简单的图表。

import { Line } from 'vue-chartjs';

export default {
 extends: Line,
 mounted() {
   this.renderChart({
   labels: [this.getChartLabels],
   datasets: [
     {
       label: 'Active users',
       backgroundColor: '#f87979',
       data: [this.getChartData],
     },
   ],
 },
 { responsive: true,
   maintainAspectRatio: false,
 });
},
 computed: {
  ...mapGetters(['getFullReport', 'getChartLabels', 'getChartData']),
 },
 methods: {
  ...mapActions(['loadFullReport']),
 },
};

当我在 mounted 中控制我的 getter 时，我可以看到我收到了一个包含两个项目的数组，但是当我重新加载页面时，该数组似乎是空的。图表本身在页面重新加载之前和之后都不显示任何信息。请帮忙！

Answer 1

你应该添加一个 watcher 来监视你的 getters 的变化。然后在 this.$data._chart.update()

上更新图表

Chart.js 不是被动的。如果您的数据更改或 "comes to late" 在您的图表实例呈现后，您将什么也看不到。

我猜你用 API 填满了你的商店？然后它更加重要，因为您的 API 调用是异步的。

Vue.js: 图表的数据被重新定义

Vue.js: Data for a chart is redefined

javascript

vue.js

vue-chartjs