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

【问题标题】：Vuejs chart not displaying after page reload页面重新加载后Vuejs图表不显示
【发布时间】：2018-01-18 01:44:51
【问题描述】：

我使用 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;
      });
  }

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

【问题讨论】：

先试试这个。不要 axios 在创建。相反，在componentDidMount
@JacobGoh 如果我理解正确，我应该为我的 api 调用创建一个方法？
这不是必需的。这只是构建代码的好习惯。您遇到任何控制台错误吗？
@JacobGoh 没有帮助，但谢谢
没有控制台错误

标签： javascript charts vuejs2 vue-chartjs

【解决方案1】：

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

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

【讨论】：