"Uncaught (in Promise) RangeError: Saiz tindanan panggilan maksimum melebihi" apabila mengemas kini carta menggunakan Chart.js dalam Vue

Question

Saya mencipta objek carta dalam Mounted() dan memberikannya kepada pembolehubah "myChart" yang diisytiharkan dalam data() kerana saya mahu dapat menggunakan objek carta ini dalam skop kod lain kerana saya mendengar tiada Kaedah yang lulus pembolehubah yang diisytiharkan dalam Mounted to the method.

Apabila saya memanggil ini.myChart.update() saya mendapat ralat "Uncaught (in promise) RangeError: Saiz tindanan panggilan maksimum melebihi".

Adakah sesiapa tahu mengapa saya mendapat ralat ini dan cara membetulkannya, atau jika terdapat cara lain untuk mengakses pembolehubah yang dipasang daripada jam tangan atau kaedah?

<script>
    import Chart from 'chart.js/auto';
    export default {
        name: 'ChartTest',
        props: {
            data: Object,
            title: String,
    },
    data() {
        return {
            myChart:'' //variable declared
        }
    },
    watch: {
        data:function() {
            this.myChart.update()  //error here
        }
    },       
        mounted() {
           const progressChart=new Chart(document.getElementById("progress-chart"), {
                type: 'line',
                data: this.data,
                options: {
                    plugins: {
                        title: {
                            display: true,
                            text: this.title
                        }
                    },
                    scales: {

                        y: {
                            display: true,
                            stacked: true,
                            max: 0,
                            min: 100,
                            title: {
                                display: true,
                                text: 'Your Score (%)'
                            }
                        }
                    }
                }
           });
            this.myChart=progressChart //assigning myChart variable to chartjs object
    }     
}
</script>

Answer 1

chart.js tidak 100% serasi sepenuhnya dengan Vue. Oleh kerana Chart.js memanipulasi DOM secara langsung (yang bagus untuk aplikasi js biasa), ini akan mengganggu penjejakan dan pengurusan DOM Vue, dan tarik tali antara Vue dan Chart.js mengenai memanipulasi DOM adalah perkara yang paling penting. . Ini mungkin menyebabkan anda melihat ralat tentang melebihi saiz tindanan panggilan maksimum. Terdapat dua penyelesaian yang saya boleh fikirkan:

1. Jadikan carta anda tidak responsif supaya Vue tidak menjejaki perubahannya. Ini dilakukan dengan mencipta pembolehubah myChart di luar penyataan pemulangan fungsi data:

data() {
    this.myChart = null;
    return {
      // myChart: '' //variable declared
    };
  },

Tidak berkaitan dengan perkara di atas, tetapi sama ada anda memerlukan pembetulan atau pepijat: anda perlu menyediakan data sebelum anda boleh memanggil carta update() fungsi

watch: {
    data: function () {
      this.myChart.data = this.data;
      this.myChart.update();
    }
  },

Kini carta anda sepatutnya berfungsi dan dikemas kini, walaupun ia tidak akan bertindak balas. Jika ini penting untuk anda, mengapa tidak mencubanya

2. vue-chartjs, pelaksanaan pembalut Vue chart.js. Saya tidak pasti sama ada ia mempunyai semua ciri Chart.js, tetapi akan memberikan anda carta reaktif yang serasi dengan Vue.