ゔJS-ゔ``=10=''

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>

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

Answer 1

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

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

ゔJS-ゔ``=10=''

VueJS - vue-charts.js

vue.js

vue-chartjs

主要成分

图表组件