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

Я использую chartkick в своем проекте Vue. Прямо сейчас данные загружаются из 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()
  }
}

vue.js chartkick
person h.and.h    schedule 03.05.2018    source источник
comment
покажите мне код вашего компонента линейной диаграммы   -  person jacky    schedule 03.05.2018
comment
@jacky - конечно, дочерний компонент (теперь переименованный в линейную диаграмму) - это компонент линейной диаграммы. Спасибо за внимание!   -  person h.and.h    schedule 03.05.2018

Ответы (1)


arrow_upward
1
arrow_downward

измените свой код компонента 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
  }
}
person jacky    schedule 04.05.2018
comment
В вашем коде дочерних компонентов получает данные от родительского компонента через свойство chartData, но получение данных только при создании, нет связи привязки, поэтому, когда данные из асинхронного запроса, значение дочерних компонентов chartData не изменится, если вы не используйте часы, чтобы следить за изменениями - person jacky; 04.05.2018