LoginSignup
0
0

More than 3 years have passed since last update.

react-chartjs-2でreduxのデータを表示する際、詰まった話

Posted at

react-chartjs-2で2つのグラフを反映する際、useSelectorで各データの情報を取得できているのに何故か2個のデータがくっついて前週のデータのみグラフに表示された。

Javascript
//...
const week_info = useSelector((state) => state.oneWeekDots); //今週の勉強時間 
//[3, 0, 0, 3, 0, 5, 0]
const lastweek_info = useSelector((state) => state.lastWeekDots); //前週の勉強時間
//[0, 0, 6, 0, 0, 0, 2.5]

return (
   //省略
        <Line
          data={{
          //...
            datasets: [
              {
                label: " # 今週の学習状況 ",
                data: week_info,
                //...
        },
              {
                label: " # 前週の学習状況",
                data: lastweek_info,
              },
              //...

react-chartjs-2.png

そこで変数week_info/lastweek_infoを空配列にスプレッド構文で展開して、変数
week_info_array/lastweek_info_arrayをグラフに与えたら反映された

Javascript
//...
const week_info_array = [...week_info]
const lastweek_info_array = [...lastweek_info_array]

  return (
   //...
        <Line
          data={{
          //...
            datasets: [
              {
                label: " # 今週の学習状況 ",
                data: week_info_array,
                //...
        },
              {
                label: " # 前週の学習状況",
                data: lastweek_info_array,
              },
              //...

react-chartjs-2-B.png

react-chartjs-2のライブラリは、配列型の数値だと読み取ってくれるが、なぜスプレッド構文で展開した状態だと読み取ってくれるかは解決しなかった。まだまだ精進しないといけない。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0