Question

所以我不熟悉在应用程序中使用数据可视化，而是尝试将来自api的数据设置为甜甜圈图用于显示的数据，但是我不知道如何正确访问数据

我已经安装了vue-chartjs作为简化组件使用的一种方式

这是图表组件

<script>
import { Doughnut } from 'vue-chartjs'
import {mapGetters} from 'vuex'

export default {
    name: 'FirmChart',
    extends: Doughnut,
    computed: {
        ...mapGetters(['chartEngagements']),
    },
    mounted () {
        this.renderChart({
        labels: ['Scanned', 'Recieved', 'Preparation', 'Review', '2nd Review', 'Complete'],
        datasets: [
                {
                label: 'Data One',
                borderColor: 'black',
                pointBackgroundColor: 'white',
                borderWidth: 1,
                pointBorderColor: 'white',
                backgroundColor: [
                    '#0077ff', 
                    '#0022ff',
                    '#1133bb',
                    '#0088aa',
                    '#11ffdd',
                    '#aabbcc',
                    '#22aabb',
                    ],
                data: [
                    10,
                    10,
                    10,
                    10,
                    10,
                    10,
                    ]
                },
            ]
        }, {responsive: true, maintainAspectRatio: false});
    },
    created() {
        this.$store.dispatch('retrieveEngagementsChartData')
    }
}
</script>

现在我的数据来自chartEngagements吸气剂，这是该数据在控制台中的显示

{Complete: Array(1), Review: Array(3), 2nd Review: Array(1), Recieved: Array(7), Preparation: Array(1), …}

我的问题是如何在我的Complete: Array(1)方法中将data[]等设置为this.renderChart()属性？

我尝试做类似的事情，但不会显示任何东西

mounted () {
        this.renderChart({
        labels: ['Scanned', 'Recieved', 'Preparation', 'Review', '2nd Review' 'Complete'],
        datasets: [
                {
                label: 'Data One',
                borderColor: 'black',
                pointBackgroundColor: 'white',
                borderWidth: 1,
                pointBorderColor: 'white',
                backgroundColor: [
                    '#0077ff', 
                    '#0022ff',
                    '#1133bb',
                    '#0088aa',
                    '#11ffdd',
                    '#aabbcc',
                    '#22aabb',
                    ],
                data: [
                    this.chartEngagements.complete,
                    this.chartEngagements.review,
                    this.chartEngagements.2ndreview,
                    this.chartEngagements.preparation,
                    this.chartEngagements.recieved,
                    this.chartEngagements.scanned,
                    ]
                },
            ]
        }, {responsive: true, maintainAspectRatio: false});

但是它什么也不会显示..任何帮助将不胜感激，或者指出正确的方向！

Answer 1

您是否签出了文档中的示例？ https://vue-chartjs.org/guide/#chart-with-api-data

您的问题是，您的数据api调用是异步的。因此，即使您的数据没有完全加载，您的图表也会呈现出来。

还有一个vuex的示例，它有点过时了https://github.com/apertureless/vue-chartjs-vuex

在呈现图表之前，您必须确保数据已完全加载。

如何通过Vue Chart.js使用Api数据

1 个答案: