0

我正在尝试将从 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_pricechartdata.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)从我的主要组件输出我的图表数据对象，并且数据在那里，因此数据被正确传递给图表，但图表上没有呈现任何内容。

文档是这样说的：

<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作为道具传递给图表的内容。你能帮助我吗？

4

1 回答 1

1

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

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

于 2018-12-17T09:02:05.980 回答