vue-chartjs と Pinia を使用して保存されたリアクティブ データ

Question

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
}



</スクリプト>

<テンプレート>

  <Line :data="data" :options="options" />

</template>

ストア変数を ref() でラップしようとしましたが、チャートを再レンダリングする必要があると思いますか?上記の例を Pinia ストアの状態に適用し、ストアが変更されたときに更新することに取り組んでいます。

Answer 1

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

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

リーリー