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

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

各グラフに指定しているデータの値は多少いじっている場合があります。理由はグラフの見た目が顕著に変わるように指定することで、どこに反映されているか分かるようにするためです。

スポンサーリンク

索引（その他の分析）

  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. よく見るグラフを実際に作ってみた（棒グラフ・折れ線グラフ・円グラフ・帯グラフ）

    ５５．「Linear Axis」>「Step Size」から分かること

    ソース

    本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/linear.html」のソースをご覧ください。
    ※1つ目のソース部分（背景黒）
    ※dataはグラフにのる範囲で適当に指定しました

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

    • max・・・縦軸（Y軸）の最大の目盛りを指定できる
    • min・・・縦軸（Y軸）の最小の目盛りを指定できる
    • tick > stepSize・・・グラフに表示する目盛りをいくつずつにするか指定できる（例えば、0.5としていすれば、0⇒0.5⇒1.0⇒1.5・・・という感じ。

    ５６．「Time Cartesian Axis」>「Grace」から分かること

    ソース

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

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

    • grace・・・数値やパーセントで指定できる。指定された数値分目盛りの最大、最小に追加する（余白ができる）。グラフのpositive側を例に挙げると、0%にすれば、目盛りは100が最大になる。50%にすれば、150が最大に、100％にすれば、200が最大となる。

    ５７．「Time Cartesian Axis」>「Time Units」から分かること

    ソース

    本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/time.html」のソースをご覧ください。
    ※1つ目のソース部分（背景黒）
    ※データは「５９．～」のデータを元にして、月の部分を10月、11月、12月と変更しました（横軸（X軸）を月で指定しているため）
    ※データは日付の形である必要があるように思います

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

    • type・・・「time」を指定している。目盛りの種類を指定できる。ここでは時間。
    • time > unit・・・「month」が指定されている。目盛りを月別にする。グラフを見ると年＆月になっている

    ５８．「Time Cartesian Axis」>「Display Formats」から分かること

    ソース

    本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/time.html」のソースをご覧ください。
    ※1つ目のソース部分（背景黒）
    ※データは「５７．～」のデータを元にして、10月の部分を2021年10月から2020年10月に変更した（横軸（X軸）を年＆月で指定しているため）
    ※データは日付の形である必要があるように思います

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

    • quarter・・・初期値が「[Q]Q – YYYY」というフォーマットだが、「MMM YYYY」が指定されている。月＆年である。ただし、データの日付の範囲によっては違う表記になるみたい。付与したい目盛りにするには調整が必要かもしれない
      ※quarterの初期フォーマットを使いたい場合は、５７を見る限り、time > unitに指定すれば良い（検証済み）

    ５９．「Time Cartesian Axis」>「Min Max Configuration」から分かること

    ソース

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

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

    • min・・・横軸（X軸）の最小値を指定できる。グラフの目盛りを見ると、最小値に指定した日付が追加されている

    ６０．「Radial Axes」>「Angle Lines」から分かること

    ソース

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

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

    • color・・・中心を囲うような線（グリッドライン）の色を指定できる※グラフの赤線になっている線のこと

    ６１．「Radial Axes」>「Grid Lines」から分かること

    ソース

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

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

    • color・・・中心から外に向けて伸びる線（アングルライン）の色を指定できる

    ６２．「Radial Axes」>「Point Labels」から分かること

    ソース

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

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

    • color・・・真ん中のアングルラインの上にある目盛りのラベルの色を指定できる

    ６３．「Linear Radial Axis」>「Axis Range Settings」から分かること

    ソース

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

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

    • suggestedMin・・・目盛りの最小値を指定できる。ただし、効いていないみたい。⇒検証したところ、データの最小値がsuggestedMinより小さい場合無視されて、データの最小値が優先される
    • suggestedMax・・・目盛りの最大値を指定できる。

    ６４．「Linear Radial Axis」>「Step Size」から分かること

    ソース

    本家サイト「https://www.chartjs.org/docs/3.7.0/axes/radial/linear.html」のソースをご覧ください。
    ※3つ目のソース部分（背景黒）
    ※データは「６３．～」のデータを10分の1にしたものを使用

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

    • max・・・目盛りの最小値を指定できる
    • min・・・目盛りの最大値を指定できる
    • ticks > stepSize・・・目盛りの値をいくつずつ増やすか指定できる

    ６５．「Labeling Axes」から分かること

    ソース

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

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

    • callback・・・縦軸（Y軸）のラベルを読み込む前に、指定した関数の処理を行うことができる。ここでの処理内容では数値の前に「＄」マークを付けている。グラフを見ると実際についている
    スポンサーリンク

    索引（その他の分析）

    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」の例を使って勝手に分析！

    まとめ

    今回もグラフの中の軸や目盛りに関連する設定が多かったように思います。前回同様、目立つ部分はグラフ本体になりますが、軸の数値は重要ですしドルや円など単位を付けれるとより分かりやすくなりそうです。そのあたりの基本的な設定方法が分かれば、応用もそれなりには出来そうですし、設定できる値などを調べていけばできることも増えそうです。

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

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

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

    スポンサーリンク