【Chart.js 3.7.0】「Getting Started」～「General > Data structures」の例を使って勝手に分析！～ドキュメントから学ぶ～

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

１．「Getting Started」から分かること

ソース

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

new Chart

  • チャートを作るためには「new Chart(ctx, config)」で作成できる。
  • このnewで戻ってくる値はチャート本体が戻ってくるので代入しておく。「var myChart1 = new Chart(ctx, config)」
  • 「new Chart」の1つ目の引数ctxは要素を指定すれば良い「$(‘#myChart1’)」など
  • 「new Chart」の2つ目の引数configはいろいろ※下記へ

config

  • type・・・グラフの種類（line：折れ線グラフが指定されていた）
  • data・・・グラフに必要な（縦軸と横軸）データが入っている※下記へ
  • options・・・オプションを指定するようだが、今はまだ何もしていない
data
  • labels・・・横軸のデータ（ラベル）
  • datasets・・・縦軸のデータ※下記へ
datasets
  • label・・・グラフのタイトルのような位置づけ
  • backgroundColor・・・グラフが縦軸と交わる箇所が●になっているが、その中の色を指定している（labelの左に表示される長方形アイコンの背景色にも反映される）
  • borderColor・・・折れ線の色を指定している（labelの左に表示される長方形アイコンの罫線の色にも反映される）
  • data・・・縦軸のデータ（数値）

２．「Usage」から分かること

ソース

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

2つ目の引数

※1つ目の引数は「１．～」と同様

  • type・・・グラフの種類（bar：棒グラフが指定されていた）
  • data・・・グラフに必要な（縦軸と横軸）データが入っている※下記へ
  • options・・・表示用のオプションが指定されている※下記へ

data > datasets

※data > labels は「１．～」と同様
※data > datasets > labelは「１．～」と同様
※data > datasets > dataは「１．～」と同様

  • backgroundColor・・・棒グラフの背景色が指定されている。配列にすることで、各棒の背景色を指定している（labelの左に表示される長方形アイコンには配列1つ目の背景色が反映される）
  • borderColor・・・棒グラフの外周（罫線）の色が指定されている。配列にすることで、各棒の線の色を指定している（labelの左に表示される長方形アイコンには配列1つ目の罫線の色が反映される）
  • borderWidth・・・罫線の幅を指定している（labelの左に表示される長方形アイコンの罫線の幅にも反映される）

options > scales ＞ y

  • beginAtZero・・・trueを指定することで、縦軸（Y軸）の開始を「0」にできる

３．「Data structures」>「Primitive[]」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/data-structures.html」のソースをご覧ください。
※Primitive[]下のソース部分（背景黒）

2つ目の引数

「data > datasets > data」と「data > labels」の各要素は連動している。「data > datasets > data」は縦軸（Y軸）の数値、「data > labels」は横軸（X軸）のラベル。

例えばそれぞれ配列の1つ目の要素であれば、グラフの「一番左側」の数値とラベルを指定している。

また、「１．」のソースを見ると分かるが、配列の要素数が異なる場合、「data > labels」が優先される。そのため、「data > labels」の方が多い場合は、足りない部分はグラフが表示されず、「data > labels」が少ない場合は、あふれた数値のデータは無視される（表示されない）。

４．「Data structures」>「Object[]」から分かること

1つ目

2つ目

3つ目

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/data-structures.html」のソースをご覧ください。
※Object[]下のソース部分3つ（背景黒）

2つ目の引数 > data > datasets

1つ目のグラフは横軸（Ｘ軸）が認識されていないようです。X軸の方に数値を入れる方法は別途見つかれば、調べてみる。現時点ではスルー。

  • data・・・2つ目、3つ目のグラフから、「data: [{x:’2016-12-25′, y:20}, {x:’2016-12-26′, y:10}]」や「data: [{x:’Sales’, y:20}, {x:’Revenue’, y:10}]」と設定することで「data > labels」の設定を省略し「data > datasets > data」だけで指定出来ることが分かる

管理しやすい方を採用できる。

ちなみに、パッと見だと、下記の印象。

  • 「data > labels」と「data > datasets > data」に分けた場合、ラベルと対応するデータを間違えたり、データ数自体間違える可能性があるが、見た目は見やすい
  • 「data > datasets > data」にまとめる場合は、対応するデータやデータ数を間違えることは無いが、少し見難い

５．「Data structures」>「Object[] using custom properties」から分かること

1つ目

2つ目

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/data-structures.html」のソースをご覧ください。
※Object[] using custom properties下のソース部分3つ（背景黒）

2つ目の引数

  • type・・・グラフの種類（doughnut：ドーナツグラフが指定されていた）
  • data・・・グラフに必要な（縦軸と横軸）データが入っている※下記へ
  • options・・・表示用のオプションが指定されている※下記へ

data > datasets

  • data・・・1つ目、2つ目のグラフともに同じ [{id: ‘Sales’, nested: {value: 1500}}, {id: ‘Purchases’, nested: {value: 500}}]が指定されている。x、y以外のキーでも指定できる。また、nestedの値に連想配列の指定も可能

options > parsing

  • xAxisKey・・・「id」が指定されている。X軸で使用するデータのキーを指定している
  • yAxisKey・・・「nested.value」が指定されている。Y軸で使用するデータのキーを指定している（連想配列も可）
  • key・・・「nested.value」が指定されている。おそらく円グラフはXY軸がないので、キーは1つになる。よって、そのキーを指定している（連想配列も可）

６．「Data structures」>「Object」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/data-structures.html」のソースをご覧ください。
※Object下のソース部分（背景黒）

2つ目の引数

  • type・・・グラフの種類（pie：円グラフが指定されていた）
  • data > datasets・・・「data: {January: 10, February: 20}」と指定されていた。オプション等を指定しないとうまく表示できないのかもしれない。ちなみに、「５．～」のドーナツグラフのデータを使えば円グラフは表示されたので、dataの設定の問題ということは分かっている。
    ただ、現時点ではスルー。

７．「Data structures」>「parsing」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/data-structures.html」のソースをご覧ください。
※parsing下のソース部分（背景黒）

2つ目の引数 > data

  • datasets・・・元々配列でデータが入っていたが、１つしか入っていなかった。上のグラフは3つ入れた場合の例である。
    「data > labels」の各ラベルに対して、指定したデータ数のグラフが表示される。この場合は、１つのラベルに対して3つの棒が表示される
    ※datasetsの中身は上記１～６で確認したものと変わらない
スポンサーリンク

索引（その他の分析）

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

まとめ

いくつかグラフのサンプルを見てきただけですが、基本的な部分の雰囲気はつかめました。

ここだけでもシンプルなグラフであれば、簡単に作成できそうです。

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

続きはこちら＞

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

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

スポンサーリンク