VueJS - vue-charts.js答案

【问题标题】：VueJS - vue-charts.jsVueJS - vue-charts.js
【发布时间】：2019-04-21 23:28:36
【问题描述】：

我正在尝试将从 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)
  }
}

文档是这样说的：

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

我发现this documentation 有点含糊，因为它没有解释我需要将chartdata 作为道具传递到图表中的内容。你能帮帮我吗？

【问题讨论】：

您是否使用v-if 仅在从 api 获取数据后才加载组件？
就是这样:))))) 谢谢！

标签： vue.js vue-chartjs

【解决方案1】：

您的问题是 API 请求是异步的。因此，在您的 API 请求完成之前，您的图表将被呈现。一个常见的模式是使用加载状态和v-if。

文档中有一个例子：https://vue-chartjs.org/guide/#chart-with-api-data

【讨论】：