Как использовать данные API с помощью Vue Chart.js

Question

Итак, я новичок в использовании визуализации данных в приложении, и я пытаюсь установить свои данные, поступающие из моего API, в качестве данных, которые использует диаграмма пончика, однако я не могу понять, как правильно получить доступ к данным

Я установил vue-chartjs, чтобы упростить его для использования компонента

Вот компонент Chart

<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

Вы должны убедиться, что ваши данныеполностью загружен до того, как вы отобразите свой график.