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

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

４６．「Axes」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/axes/」のソースをご覧ください。
※2つ目のソース部分（背景黒）
※data > datasets > fillの値はそのまま使い、表示させるために適当な数値を入れました

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

  • type・・・「logarithmic」が指定されている。軸の種類を指定できる。ここでは対数軸が指定されている（一般的なグラフではあまり見かけない）
  • position・・・目盛りの位置を指定できる

４７．「Cartesian Axes」から分かること

ソース

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

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

  • borderColor・・・横軸（X軸）の一番下の線の色を指定できる

４８．「Cartesian Axes」>「Grid lines」から分かること

ソース

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

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

  • color・・・緑を指定した。縦軸（Y軸）の線の色を指定できる
  • tickColor・・・赤を指定した。縦軸（Y軸）の下にはみ出している部分の色を指定できる

４９．「Cartesian Axes」>「Ticks and Tick Marks」から分かること

ソース

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

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

  • grid > tickColor・・・赤が指定されている。先ほどと同じ。縦軸（Y軸）の下にはみ出している部分の色を指定できる
  • ticks > color・・・青が指定されている。縦軸（Y軸）の下にあるラベルの色を指定できる（※グラフの枠線から飛び出ている部分、つまり目盛りあたりをtickと呼ぶみたい）

５０．「Cartesian Axes」>「Title」から分かること

ソース

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

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

  • color・・・赤が指定されている。横軸（X軸）の目盛り下のタイトルの文字色を指定できる
  • display・・・横軸（X軸）の目盛り下のタイトルの表示/非表示を指定できる
  • text・・・横軸（X軸）の目盛り下のタイトルの文言を指定できる

５１．「Cartesian Axes」>「Tick Alignment」から分かること

crossAlign: far

（参考）crossAlign: 指定なし

ソース

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

2つ目の引数 > options

  • indexAxis・・・ｙが指定されている。ベースがy軸になるので、横軸がＹ軸、縦軸がＸ軸と反転する

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

  • crossAlign・・・farが指定されている。目盛りラベルが左寄せになる。目盛りラベルの配置位置を指定できる
    ※参考グラフを２つ並べて、2つ目のグラフにはcrossAlignを指定していない。グラフ左側の目盛りの位置を比較するとよく分かる

５２．「Cartesian Axes」>「Creating Multiple Axes」から分かること

ソース

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

2つ目の引数 > data > datasets

  • yAxisID・・・縦軸（Y軸）のIDを指定できる※下記ptionsで使用できる

2つ目の引数 > options > scales > 各Y軸のID

  • position・・・2つのデータそれぞれ、left、rightが指定されている。1つ目のデータの目盛りは左側。2つ目のデータの目盛りは右側に付与されている

これは、使えそう

５３．「Category Axis」>「Category Axis Definition」から分かること

2つ目の引数 > data > labelsに[‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’]を指定

2つ目の引数 > options > scales > x > labelsに[‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’]を指定

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/category.html」のソースをご覧ください。
※1つ目と2つ目のソース部分（背景黒）
※typeはline、dataの値は最初の回の「１．～」を使用しました

2つ目の引数 > data

  • labels・・・これまでも確認した通常のラベル設定。上記1つ目のグラフにはこちらで設定している

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

  • type・・・categoryが指定されている。上記2つ目のグラフにはこちらで設定している
  • labels・・・このlabelsに指定してもdata > labelsに指定したのと同じ。上記2つ目のグラフにはこちらで設定している

通常のラベルか、軸のラベルとして指定するかの違いはあるものの、見た目は同じになる

５４．「Category Axis」>「Min Max Configuration」から分かること

ソース

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

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

  • min・・・ラベルの一つ「March」を指定している。このラベルを最小として指定できる。結果として、Marchより小さい（左側）、January、Februaryはグラフに表示されなくなる
スポンサーリンク

索引（その他の分析）

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

まとめ

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

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

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

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

    スポンサーリンク