页面重新加载后 Vuejs 图表不显示

Question

我使用 vue-chartjs 创建了一个图表，它从 JSON 端点呈现一些数据。

问题是页面重新加载后图表没有呈现。
这是调用图表组件的HTML。

<absentee-chart v-if="isLoaded==true" :chart-data="this.chartData"></absentee-chart>

这是呈现图表数据的absenteeChart.js文件。

import { Bar, mixins } from 'vue-chartjs'

export default {
  extends: Bar,
  mixins: [mixins.reactiveProp],
  data: () => ({
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  }),
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

最后是我的 .vue 文件。

created () {
    axios
      .get(constants.baseURL + "absentee-reports/graph", auth.getAuthHeader())
      .then(response => {
        this.graph = response.data;
       
        var males = {
          data: []
        };

        var females = {
          data: []
        };

        var len = this.graph.length;

        for (var i = 0; i < len; i++) {
          if (this.graph[i].year == "2009") {
            this.labels.push(this.graph[i].month);  
            //push to males
            this.datasets[0].data.push(this.graph[i].males);
            //push to females
            this.datasets[1].data.push(this.graph[i].females);

          }
        }
        this.isLoaded = true;
        this.chartData.labels = this.labels;
        this.chartData.datasets = this.datasets;
      });
  }

更新： 图表在我调整浏览器页面大小后出现。

Answer 1

解决方案是将我所有的图表逻辑与我的 .vue 文件分开，并省略使用 mixins 和 reactiveProp。据我所知，这个问题是 chart.js

的核心问题

希望这对某人有所帮助。
干杯:)

页面重新加载后 Vuejs 图表不显示

Vuejs chart not displaying after page reload

javascript

charts

vuejs2

vue-chartjs