默认情况下，Vue chartjs禁用数据集
默认情况下，Vue chartjs禁用数据集
提问于 2018-02-10 16:05:47
在我为我的家族做的项目中，超级细胞游戏中的战争之王。我正在尝试用chart.js制作一张当前捐款情况的图表。我使用Vue作为前端，vue-chartjs作为图表。只有一个问题。当我打开页面时，数据集不可见。那么我该如何解决这个问题呢？
这是图表数据对象：
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:当我单击图例时，数据会正确显示
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-12 17:17:43
好吧，我猜你是在使用API来获取数据吧？
然后，您需要检查数据是否可用。Axios / Ajax请求是异步的。因此，在大多数情况下，您的图表将呈现为没有数据。
只需在您的图表组件和您的
axios.get().then()方法，设置loaded = true就可以了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48722739
复制相关文章
相似问题
腾讯云开发者
