Vue chartjs 默认禁用数据集答案

【问题标题】：Vue chartjs disables datasets by defaultVue chartjs 默认禁用数据集
【发布时间】：2018-07-21 05:19:37
【问题描述】：

在我的部落项目中，Supercell 游戏中的战争之王。我正在尝试使用 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：当我点击图例时，数据显示正常

【问题讨论】：

标签： javascript charts vue.js vue-chartjs

【解决方案1】：

好吧，我猜你正在使用 API 来获取数据？

然后你需要检查数据是否可用。 Axios / Ajax 请求是异步的。所以大多数时候，您的图表将在没有数据的情况下呈现。

只需在您的图表组件和您的

中添加一个 v-if="loaded"

axios.get().then() 方法，设置loaded = true 应该没问题。

【讨论】：