Vue で Chart.js を使用してチャートを更新すると、「Uncaught (in Promise) RangeError: 最大コールスタックサイズを超えました」というメッセージが表示される

Question

Mounted() でチャート オブジェクトを作成し、data() で宣言された "myChart" 変数に割り当てました。これは、このチャート オブジェクトをコードの他のスコープで使用できるようにしたかったためです。マウントされたものはメソッドに渡されます。 this.myChart.update() を呼び出すと、「Uncaught (in Promise) RangeError: 最大呼び出しスタック サイズを超えました」というエラーが発生します。このエラーが発生する理由とその修正方法、または別の方法があるかどうかを知っている人はいますか

P粉465675962 · Answer

chart.js は Vue と 100% 完全な互換性はありません。 Chart.js は DOM を直接操作するため (これは通常の JS アプリケーションに最適です)、これにより Vue による DOM の追跡と管理が中断されます。DOM の操作をめぐる Vue と Chart.js の間の綱引きが最も重要です。。これにより、最大呼び出しスタックサイズの超過に関するエラーが表示される場合があります。私が考える解決策は 2 つあります:

Vue が変更を追跡しないように、チャートを応答不能にします。これは、データ関数の return ステートメントの外側に myChart 変数を作成することで実行されます:

リーリー

上記とは関係ありませんが、修正が必要かバグが必要か: チャート update() 関数

を呼び出す前にデータを設定する必要があります。リーリー

これで、チャートは機能し、更新されるはずですが、反応はしません。これがあなたにとって重要であれば、ぜひ試してみてはいかがでしょうか

vue-chartjs、chart.js の Vue ラッパー実装。 Chart.js のすべての機能を備えているかどうかはわかりませんが、Vue と互換性のあるリアクティブチャートが提供されます。