Заставьте Chartkick дождаться заполнения данных из Firebase перед рендерингом диаграммы - PullRequest
Новая
       9

Заставьте Chartkick дождаться заполнения данных из Firebase перед рендерингом диаграммы

0 голосов
/ 03 мая 2018

Я использую Chartkick в своем проекте Vue. Прямо сейчас данные загружаются из Firebase после того, как диаграмма отрисована, поэтому диаграмма пуста. Когда я изменяю код в моем редакторе, диаграмма отображается так, как ожидалось, поскольку она уже была получена из Firebase. Есть ли способ заставить диаграмму ждать загрузки данных, прежде чем пытаться отобразить диаграмму? Спасибо!

Компонент линейной диаграммы: 

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

1 Ответ

0 голосов
/ 04 мая 2018

измените ваш код компонента 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
  }
}
...