„Nicht erfasster (in Promise) RangeError: Maximale Aufrufstapelgröße überschritten' beim Aktualisieren des Diagramms mit Chart.js in Vue

Question

Ich habe in Mounted() ein Diagrammobjekt erstellt und es der in data() deklarierten Variablen „myChart“ zugewiesen, weil ich dieses Diagrammobjekt in anderen Bereichen des Codes verwenden wollte, da ich gehört habe, dass es keine Methode gibt, die übergibt Variablen, die in der Methode „Mounted“ deklariert wurden.

Wenn ich this.myChart.update() aufrufe, erhalte ich die Fehlermeldung „Uncaught (in versprochen) RangeError: Maximale Aufrufstapelgröße überschritten“.

Weiß jemand, warum ich diesen Fehler erhalte und wie ich ihn beheben kann, oder ob es eine andere Möglichkeit gibt, über die Überwachung oder Methode auf gemountete Variablen zuzugreifen?

<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 兼容的反应式图表。