我正尝试将从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)
}
}
从我的主要组件输出我的chartdata对象，并且数据在那里，因此数据可以正确地传递到图表，但是在图表上没有呈现任何内容。
文档说：
console.log(this.chartdata)我发现this documentation有点含糊，因为它没有解释我需要将<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>
传递给图表作为支撑。你能帮我吗？
答案 0 :(得分：1)
您的问题是API请求是异步的。因此，很可能在您的API请求完成之前将图表呈现出来。一种常见的模式是使用加载状态和v-if。