VueJS - vue-charts.js

Question

Я пытаюсь передать данные, которые я получаю из API, в vue-chartjs как реквизиты, я делаю как в документации, но это не работает.

Основной компонент

<monthly-price-chart :chartdata="chartdata"/>

import MonthlyPriceChart from './charts/MonthlyPriceChart'

  export default {
    data(){
      return {
        chartdata: {
          labels: [],
          datasets: [
            {
              label: 'Total price',
              data: []
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      }
    },
    components: {
      MonthlyPriceChart
    },
    created() {
      axios.get('/api/stats/monthly')
        .then(response => {
          let rides = response.data
          forEach(rides, (ride) => {
            this.chartdata.labels.push(ride.month)
            this.chartdata.datasets[0].data.push(ride.total_price)
          })
        })
        .catch(error => {
          console.log(error)
      })
    }
  }

В ответ у меня есть массив объектов, каждый из которых выглядит следующим образом:

{
  month: "2018-10",
  total_distance: 40,
  total_price: 119.95
}

Затем я хочу как-то отправить данные на график, поэтому я нажимаю месяцы на chartdata.labels и total_price наchartdata.datasets[0].data.

компонент диаграммы

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  props: {
    chartdata: {
      type: Array | Object,
      required: false
    }
  },
  mounted () {
    console.log(this.chartdata)

    this.renderChart(this.chartdata, this.options)
  }
}

console.log(this.chartdata) выводит мой объект chartsdata из моего основного компонента, и данные там, поэтому данные правильно передаются в диаграмму, но ничего не отображается надиаграмма.

Документация гласит:

<script>
import LineChart from './LineChart.vue'

export default {
  name: 'LineChartContainer',
  components: { LineChart },
  data: () => ({
    loaded: false,
    chartdata: null
  }),
  async mounted () {
    this.loaded = false
      try {
        const { userlist } = await fetch('/api/userlist')
        this.chartData = userlist
        this.loaded = true
      } catch (e) {
        console.error(e)
      }
  }
}
</script>

Я считаю эту документацию немного расплывчатой, потому что она не объясняет, что мне нужно передать в chartdataна график в качестве реквизита.Вы можете мне помочь?

Answer 1

Ваша проблема в том, что запросы API являются асинхронными.Так получается, что ваша диаграмма будет обработана до того, как ваш запрос API завершится.Распространенным шаблоном является использование состояния загрузки и v-if.

. В документации приведен пример: https://vue -chartjs.org / guide / # chart-with-api-data