Question

我在Vue项目中使用了chartkick。现在，数据在图表渲染后从Firebase加载，因此图表为空白。当我在编辑器中更改代码时，图表会按预期呈现，因为它已经从Firebase中检索到了。在尝试渲染图表之前，有没有办法让chartkick等待数据加载？谢谢！

折线图组件：

<template>
  <div v-if="loaded">
    <line-chart :data="chartData"></line-chart>
  </div>
</template>

<script>
export default {
  name: 'VueChartKick',
  props: ['avgStats'],
  data () {
    return {
      loaded: false,
      chartData: this.avgStats
    }
  },
  mounted () {
    this.loaded = true
  }
}
</script>

家长：

<template>
  ...
  <stats-chart v-if="avgStatsLoaded" v-bind:avgStats="avgStats" class="stat-chart"></stats-chart>
  <div v-if="!avgStatsLoaded">Loading...</div>
  ...
</template>

<script>
import StatsChart from './StatsChart'

export default {
  name: 'BBall',
  props: ['stats'],
  components: {
    statsChart: StatsChart
  },
  data () {
    return {
      avgStatsLoaded: false,
      avgStats: []
    }
  },
  computed: {
    sortedStats: function () {
      return this.stats.slice().sort((a, b) => new Date(b.date) - new Date(a.date))
    }
  },
  methods: {
    getAvgStats: function () {
      this.avgStats = this.stats.map(stat => [stat.date, stat.of10])
      this.avgStatsLoaded = true
    }
  },
  mounted () {
    this.getAvgStats()
  }
}

Answer 1

修改StatsChart组件的代码：你可以直接使用道具

<template>
  <div v-if="loaded">
    <line-chart :data="avgStats"></line-chart>
  </div>
</template>

export default {
  name: 'VueChartKick',
  props: ['avgStats'],
  data () {
    return {
      loaded: false,
    }
  },
  mounted () {
    this.loaded = true
  }
}

在渲染图表之前，让Chartkick等待从Firebase填充数据

1 个答案: