【Chart.js 3.7.0】「Line Chart」～「Scatter Chart」の例を使って勝手に分析！～ドキュメントから学ぶ～

引き続きChart.jsさんを元に学習していきたいと思います。これまでチェックした箇所は省略して進みます。

グラフについて

本記事で表示しているグラフに関しては「Chart.js」「Information | Chart.js」などのサンプルグラフを元に引用させていただく形で実際にグラフを作っています。

また、下記理由でデータの値や色などを変更している箇所があります。

  • グラフの該当箇所が分かりやすいようにデータや色を調整している
  • グラフが表示されないため、ソースを改修しグラフを表示している

上記を前提に、実際に設定してみて、私的に理解を深める＆気づいた点・理解できた点などのメモのために記事に残しています。検証を優先しているため、読みにくい箇所も多いかと思いますが、ご了承くださいm(__)m

スポンサーリンク

索引（その他の分析）

  1. 「Getting Started」～「General > Data structures」の例を使って勝手に分析！
  2. 「General > Colors」～「Configuration > Configuration」の例を使って勝手に分析！
  3. 「Interactions」～「Subtitle」の例を使って勝手に分析！
  4. 「Tooltip」の例を使って勝手に分析！
  5. 「Line Chart」～「Scatter Chart」の例を使って勝手に分析！
  6. 「Area Chart」～「Mixed Chart Types」の例を使って勝手に分析！
  7. 「Axes」～「Category Axis」の例を使って勝手に分析！
  8. 「Linear Axis」～「Labeling Axes」の例を使って勝手に分析！
  9. よく見るグラフを実際に作ってみた（棒グラフ・折れ線グラフ・円グラフ・帯グラフ）

２８．「Line Chart」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/charts/line.html」のソースをご覧ください。
※1つ目のソース部分（背景黒）

2つ目の引数 > data > datasets

  • tension・・・折れ線グラフのポイントとポイントの間の直線の「張り」を指定できる。数字が大きくなるほどたわむ

２９．「Line Chart」>「Stacked Area Chart」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/charts/line.html」のソースをご覧ください。
※3つ目のソース部分（背景黒）
※データは「２８．～」のデータのdatasetsの中身を2つにしたものを使用（同じデータを2つ入れました）

2つ目の引数 > data > datasets

  • axis・・・x、y軸どちらに対してのデータかを指定できる（現時点であまり効果というか変化は感じられないが、いったんスルー）

2つ目の引数 > options > scales > y

  • stacked・・・y軸方向にデータを積み重ねることができる（※後から出てくる棒グラフの方が見た目は分かりやすいので、そちらを参照）

３０．「Line Chart」>「Vertical Line Chart」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/charts/line.html」のソースをご覧ください。
※4つ目のソース部分（背景黒）

2つ目の引数 > data > datasets

  • axis・・・x、y軸どちらに対してのデータかを指定できる（現時点であまり効果というか変化は感じられないが、いったんスルー）

2つ目の引数 > options

  • indexAxis・・・主軸になる軸を指定できる

３１．「Bar Chart」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/charts/bar.html」のソースをご覧ください。
※1つ目のソース部分（背景黒）

備考

これまでにチェックした普通の棒グラフ。新しい点はなし

３２．「Bar Chart」>「Stacked Bar Chart」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/charts/bar.html」のソースをご覧ください。
※5つ目のソース部分（背景黒）
※データは「３１．～」のデータのdatasetsの中身を2つにしたものを使用（同じデータを2つ入れました）

2つ目の引数 > options > scales > x

  • stacked・・・x軸方向にデータを積み重ねることができる

※x、yともにstackedを設定すると、真上に重ねることができる。xだけだと、境目の線が出ず、yだけだと、横にずれる。

３３．「Bar Chart」>「Horizontal Bar Chart」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/charts/bar.html」のソースをご覧ください。
※6つ目のソース部分（背景黒）

備考

    先ほどチェックした折れ線グラフの「３０．～」と同様。グラフの種類が異なるだけで後は同じ。よって、新しい点はなし

    ３４．「Radar Chart」から分かること

    ソース

    本家サイト「https://www.chartjs.org/docs/3.7.0/charts/radar.html」のソースをご覧ください。
    ※1つ目のソース部分（背景黒）

    2つ目の引数 > data > datasets

    • pointBackgroundColor・・・レーダーチャートのポイント（数値）部分の背景色を指定できる
    • pointBorderColor・・・レーダーチャートのポイント（数値）部分の罫線の色を指定できる
    • pointHoverBackgroundColor・・・マウスオーバー時のレーダーチャートのポイント（数値）部分の背景色を指定できる
    • pointHoverBorderColor・・・マウスオーバー時のレーダーチャートのポイント（数値）部分の罫線の色を指定できる

    2つ目の引数 > options > elements > line

    • borderWidth・・・レーダーチャートの罫線の太さを指定できる

    ３５．「Radar Chart」>「Scale Options」から分かること

    ソース

    本家サイト「https://www.chartjs.org/docs/3.7.0/charts/radar.html」のソースをご覧ください。
    ※1つ目のソース部分（背景黒）
    ※options以外のデータは「３４．～」を使用

    2つ目の引数 > options > scales > r

    • angleLines > display・・・アングルライン（中心から外側に表示される線）の表示/非表示を指定できる（「３４．～」と比較すると分かる）
    • suggestedMin・・・グラフの始端を指定した値まで拡張させることができる
    • suggestedMax・・・グラフの終端を指定した値まで拡張させることができる

    ３６．「Doughnut and Pie Charts」から分かること

    ソース

    本家サイト「https://www.chartjs.org/docs/3.7.0/charts/doughnut.html」のソースをご覧ください。
    ※1つ目のソース部分（背景黒）

    2つ目の引数 > data > datasets

    • hoverOffset・・・マウスオーバー時、グラフがどれくらい動くか指定できる

    ３７．「Doughnut and Pie Charts」から分かること

    ソース

    本家サイト「https://www.chartjs.org/docs/3.7.0/charts/doughnut.html」のソースをご覧ください。
    ※1つ目のソース部分（背景黒）
    ※「３６．～」のtypeを「pie」に変えた

    備考

    「３６．～」のグラフの種類をパイグラフに変更しただけ。よって、新しい点はなし

      ３８．「Polar Area Chart」から分かること

      ソース

      本家サイト「https://www.chartjs.org/docs/3.7.0/charts/polar.html」のソースをご覧ください。
      ※1つ目のソース部分（背景黒）

      2つ目の引数

      • type・・・「polarArea」が指定されている。鶏頭図と呼ばれるレーダーチャート。円グラフとレーダーチャートが合わさったようなグラフ。数値によって半径が異なる円グラフ。あまり使用したことがないが、直感的で見やすい気もする

      ３９．「Bubble Chart」から分かること

      ソース

      本家サイト「https://www.chartjs.org/docs/3.7.0/charts/bubble.html」のソースをご覧ください。
      ※1つ目のソース部分（背景黒）

      2つ目の引数

      • type・・・「bubble」が指定されている。バブル図は、字のごとく大きさが異なる泡のようなグラフ。指定できるのは横軸（Ｘ軸）、縦軸（Ｙ軸）、円の半径の３つが指定できる。円の半径を大きくすることでバブル（泡）は大きくなる
      • datasets > data > x・・・x座標の値を指定できる
      • datasets > data > y・・・y座標の値を指定できる
      • datasets > data > r・・・円の半径が指定できる（グラフを見ると円の大きさが違うのが分かる）

      ４０．「Scatter Chart」から分かること

      ソース

      本家サイト「https://www.chartjs.org/docs/3.7.0/charts/scatter.html」のソースをご覧ください。
      ※1つ目のソース部分（背景黒）

      2つ目の引数

      • type・・・「scatter」が指定されている。散布図は、各値が散布した図。指定できるのは横軸（Ｘ軸）、縦軸（Ｙ軸）の２つが指定できる
      • datasets > data > x・・・x座標の値を指定できる
      • datasets > data > y・・・y座標の値を指定できる
      • options > scales > x > type ・・・「linear」線形タイプなので、標準のもの
      • options > scales > x > position・・・x軸の基準値を下か上かを指定できる。bottomだと標準なので分かりにくいため、topを指定してみた（グラフを見るとx軸の基準が上にあることが分かる）
      スポンサーリンク

      索引（その他の分析）

      1. 「Getting Started」～「General > Data structures」の例を使って勝手に分析！
      2. 「General > Colors」～「Configuration > Configuration」の例を使って勝手に分析！
      3. 「Interactions」～「Subtitle」の例を使って勝手に分析！
      4. 「Tooltip」の例を使って勝手に分析！
      5. 「Line Chart」～「Scatter Chart」の例を使って勝手に分析！
      6. 「Area Chart」～「Mixed Chart Types」の例を使って勝手に分析！
      7. 「Axes」～「Category Axis」の例を使って勝手に分析！
      8. 「Linear Axis」～「Labeling Axes」の例を使って勝手に分析！

      まとめ

      今回は色々な種類のグラフをチェックしました。これまでに見たものも多かったですが、重ねたり、縦と横の軸を入れ替えたり、少し細かい設定もありました。

      以上、再度長くなってきたので、続きは別記事にしたいと思います。

      自分の中で思ったことを書いただけですので、読みにくいかもしれませんが、参考になれば幸いです。今後、全体的に把握できて、うまくまとめられそうであれば、別途まとめて記事にしたいと思います。

      それでは、最後までお読みいただきありがとうございました！

      スポンサーリンク