在Vue中使用Chart.js更新圖表時出現"未捕獲的（在Promise中）RangeError：超出最大呼叫堆疊大小"

Question

我在Mounted() 中創建了一個圖表對象，並將其分配給在data() 中聲明的“myChart”變量，因為我希望能夠在代碼的其他範圍中使用此圖表對象，因為我聽說沒有將Mounted 中宣告的變數傳遞給方法的方法。

當我呼叫 this.myChart.update() 時，收到錯誤「未捕獲（承諾中）RangeError：超出最大呼叫堆疊大小」。

有誰知道我為什麼會收到此錯誤以及如何修正它，或者是否有其他方法可以從手錶或方法中存取已安裝的變數？

<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 與 Vue 並非 100% 完全相容。因為 Chart.js 直接操作 DOM（對於普通 js 應用程式來說非常好），這會擾亂 Vue 對 DOM 的追蹤和管理，而 Vue 和 Chart.js 之間操作 DOM 的拉鋸戰才是最重要的。可能會導致您看到有關超出最大呼叫堆疊大小的錯誤。我能想到的解決方法有兩種：

1. 讓你的圖表不回應，這樣 Vue 就不會追蹤它的變化。這是透過在資料函數的 return 語句之外建立 myChart 變數來完成的：

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

與上述無關，但無論您需要修復還是錯誤：您需要先設定數據，然後才能呼叫圖表 update() 函數

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

現在您的圖表應該可以工作並更新，儘管它不會做出反應。如果這對您很重要，為什麼不嘗試一下

2. vue-chartjs，chart.js 的 Vue 包裝器實作。我不確定它是否具有 Chart.js 的所有功能，但會給您一個與 Vue 相容的反應式圖表。