在我的部落项目中,Supercell 游戏上的《 war 之王》。我正在尝试使用 Chart.js 制作当前捐赠的图表。我使用 Vue 作为前端,使用 vue-chartjs 作为图表。只有 1 个问题。当我打开页面时,数据集不可见。那么我该如何解决这个问题呢?
这是图表数据对象:
donation_chart_data: {
labels: [],
datasets: [
{
label: 'Donated',
hidden: false,
backgroundColor: '#1D93D3',
data: []
},
{
label: 'Received',
hidden: false,
backgroundColor: '#C7031F',
data: []
}
]
}
这是 DonationChart 组件:
import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins;
export default {
extends: Bar,
name: 'ClashRoyaleDonationChart',
mixins: [reactiveProp],
mounted () {
// Overwriting base render method with actual data.
this.renderChart(this.chartData,
{
responsive: true,
maintainAspectRatio: false
})
}
}
PS:当我点击图例时,数据正确显示
最佳答案
好吧,我猜您正在使用 API 来获取数据?
然后您需要检查数据是否可用。 Axios/Ajax 请求是异步的。因此,大多数时候,您的图表将在没有数据的情况下呈现。
只需在图表组件和您的图表组件中添加 v-if="loaded"
axios.get().then()方法,设置loaded = true就可以了。
关于javascript - Vue ChartJS 默认禁用数据集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48722739/