0

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

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

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

这是呈现图表数据的缺席Chart.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;
      });
  }

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

4

1 回答 1

1

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

希望这可以帮助某人。
干杯:)

于 2018-01-19T15:29:25.990 回答