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

Question

Mounted() でチャート オブジェクトを作成し、data() で宣言された "myChart" 変数に割り当てました。これは、このチャート オブジェクトをコードの他のスコープで使用できるようにしたかったためです。 Mounted で宣言されたものはメソッドには渡されません。

this.myChart.update() を呼び出すと、「Uncaught (in Promise) RangeError: 最大呼び出しスタック サイズを超えました」というエラーが発生します。

このエラーが発生する理由とその修正方法、またはウォッチまたはメソッド内からマウントされた変数にアクセスする別の方法があるかどうかを知っている人はいますか?

リーリー

Answer 1

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

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

リーリー

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

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

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

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