vue-chart.js /vuex: vuex 상태가 변경될 때 차트가 업데이트되지 않음

vue-chart.js /vuex: vuex 상태가 변경될 때 차트가 업데이트되지 않음

나는 vue-chart.js, Chart.js를 사용하고 vuex 상태 내의 값을 사용하여 도넛 차트를 만들었다.차트는 vuex 상태가 업데이트될 때 차트가 업데이트되지 않을 때와 별도로 작동한다.

나는 차트를 최신 상태로 유지하기 위해 계산된 속성을 사용하려고 노력해왔다.하지만 그 때 다음과 같은 오류가 발생한다.

Error in callback for watcher "chartData": "TypeError: Cannot set property 'data' of undefined"

TypeError: Cannot set property 'data' of undefined

도넛차트.vue:

<script>
    import { Doughnut, mixins } from 'vue-chartjs';
    const { reactiveProp } = mixins;

    export default {
        extends: Doughnut,
        mixins: [reactiveProp],
        props: ['chartData', 'options'],
        mounted () {
            this.renderChart(this.chartdata, this.options)
        }
    }
</script>

앱차트.vue:

<template>
    <div id="chart_section">
        <h2 class="section_heading">Charts</h2>

        <div id="charts">
            <DoughnutChart :chart-data="datacollection" :options="chartOptions" class="chart"></DoughnutChart>

        </div>
    </div>
</template>


<script>
import DoughnutChart from './DoughnutChart';
import { mapGetters } from 'vuex';

export default {
    components: {
        DoughnutChart
    },
    computed: {
        ...mapGetters(['boardColumnData']),
        datacollection() {
            return {
                datasets: [{
                    data: [this.boardColumnData[0].total.$numberDecimal, this.boardColumnData[1].total.$numberDecimal, this.boardColumnData[2].total.$numberDecimal, this.boardColumnData[3].total.$numberDecimal],
                    backgroundColor: [
                        '#83dd1a', 
                        '#d5d814',
                        '#fdab2f',
                        '#1ad4dd'
                    ],
                    borderColor: [
                        '#83dd1a', 
                        '#d5d814',
                        '#fdab2f',
                        '#1ad4dd'
                    ],
                }]
            }
        },
    },
    data() {
        return {
            chartOptions: null
        }
    },
    mounted () {
        this.fillData();
    },
    methods: {
        fillData() {
            this.chartOptions = {
                responsive: true,
                maintainAspectRatio: false
            }
        }
    }
}
</script>

상태 확인 후 boardColumnData의 모양:

[
    {
        "name":"Opportunities",
        "percentage":{
            "$numberDecimal":"0"
        },
        "total":{
            "$numberDecimal":70269
        }
    },
    {
        "name":"Prospects",
        "percentage":{
            "$numberDecimal":"0.25"
        },
        "total":{
            "$numberDecimal":0
        }
    },
    {
        "name":"Proposals",
        "percentage":{
            "$numberDecimal":"0.5"
        },
        "total":{
            "$numberDecimal":5376
        }
    },
    {
        "name":"Presentations",
        "percentage":{
            "$numberDecimal":"0.75"
        },
        "total":{
            "$numberDecimal":21480
        }
    },
]

$numDecimal 값은 다른 구성 요소에서 이벤트가 발생할 때 vuex 내에서 업데이트되는 값이다.이러한 값이 변경되면 차트를 새 값으로 업데이트하십시오.

소포 안의 자료를 넘겨야 한다.즉, 가장 빠른 해결책은fillData()답례하다datacollection올바른 형식으로

예시

fillData(){
    return {
      datasets: [
        {
          data: [
            this.boardColumnData[0].total.$numberDecimal,
            this.boardColumnData[1].total.$numberDecimal,
            this.boardColumnData[2].total.$numberDecimal,
            this.boardColumnData[3].total.$numberDecimal,
          ],
          backgroundColor: ["#83dd1a", "#d5d814", "#fdab2f", "#1ad4dd"],
          borderColor: ["#83dd1a", "#d5d814", "#fdab2f", "#1ad4dd"],
        },
      ];
    }
}

옵션에 대해서도 같은 작업을 수행해야 하지만 새 옵션으로 전달하십시오.options=yourOptions()받침대

이것은 나를 완전히 바보로 만들었다.나는 이것이 여전히 당신(또는 다른 누군가)

참조URL: https://stackoverflow.com/questions/61345505/vue-chart-js-vuex-chart-not-updating-when-vuex-state-changes