vue-chartjs と Pinia を使用して保存されたリアクティブ データ
P粉946437474
P粉946437474 2023-08-31 00:26:42
0
1
419

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 ストアの状態に適用し、ストアが変更されたときに更新することに取り組んでいます。

P粉946437474
P粉946437474

全員に返信 (1)
P粉338969567

応答にデータを設定していません。を使用して計算してください

このコードで問題を解決できます:

リーリー
いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!