Pinia を使用して vue-chartjs でデータを保存し、リアクティブ チャートを作成するのは苦手です。この例をガイドとして使用していますが、ストアの変化にグラフを反応させるのに苦労しています。
リアクティブ フォームを使用して別のコンポーネントで Pinia ストア データを変更したところ、ストア データが変化することは確認できましたが、グラフは更新されませんでした。
次のコンポーネントを使用してグラフをレンダリングしています:
<スクリプトのセットアップ> 'pinia' から {storeToRefs } をインポートします import { useStore} から '@/store/pinia-store-file'; 輸入 { ChartJSとしてのチャート、 カテゴリスケール、 リニアスケール、 ポイント要素、 線要素、 タイトル、 ツールチップ、 伝説 「chart.js」から; 'vue-chartjs' から { 行 } をインポートします。 ChartJS.register( カテゴリスケール、 リニアスケール、 ポイント要素、 線要素、 タイトル、 ツールチップ、 伝説 ); const ストア = useStore(); conststoreData=storeToRefs(ストア); const ラベル = [...Array(storeData.arr.value.length).keys()]; 定数データ = { ラベル: ラベル、 データセット: [ { ラベル: 「データワン」、 背景色: '#f87979', データ:storeData.arr.value } 】 } const オプション = { 応答性: true、 mainAspectRatio: false } スクリプト> <テンプレート>
ストア変数を ref()
でラップしようとしましたが、チャートを再レンダリングする必要があると思いますか?上記の例を Pinia ストアの状態に適用し、ストアが変更されたときに更新することに取り組んでいます。
応答にデータを設定していません。を使用して計算してください
このコードで問題を解決できます:
リーリー