Question

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

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

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

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

＆＃13;

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)
  }
}

＆＃13;

最后是 .vue 文件。

＆＃13;

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;
      });
  }

＆＃13;

更新：我调整浏览器页面大小后会显示图表。

Answer 1

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

希望这有助于某人。
干杯：）

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

1 个答案: