2022年1月7日Chart.jsjavascriptChart.jsさんを元に学習していきたいと思います。何度か実際に利用していますが、少し整理できればと思います。実際にグラフを表示させてみての分析なので、実際に正しいかは微妙なラインです。Chart.js」などのサンプルグラフを元に引用させていただく形で実際にグラフを作っています。下記理由でデータの値や色などを変更している箇所があります。グラフの該当箇所が分かりやすいようにデータや色を調整しているグラフが表示されないため、ソースを改修しグラフを表示している上記を前提に、実際に設定してみて、私的に理解を深める&気づいた点・理解できた点などのメモのために記事に残しています。Started」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/getting-started/」のソースをご覧ください。config)」で作成できる。このnewで戻ってくる値はチャート本体が戻ってくるので代入しておく。Chart」の2つ目の引数configはいろいろ※下記へconfigtype・・・グラフの種類(line:折れ線グラフが指定されていた)data・・・グラフに必要な(縦軸と横軸)データが入っている※下記へoptions・・・オプションを指定するようだが、今はまだ何もしていないdatalabels・・・横軸のデータ(ラベル)datasets・・・縦軸のデータ※下記へdatasetslabel・・・グラフのタイトルのような位置づけbackgroundColor・・・グラフが縦軸と交わる箇所が●になっているが、その中の色を指定している(labelの左に表示される長方形アイコンの背景色にも反映される)borderColor・・・折れ線の色を指定している(labelの左に表示される長方形アイコンの罫線の色にも反映される)data・・・縦軸のデータ(数値)2.「Usage」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/getting-started/usage.html」のソースをご覧ください。dataは「1.~」と同様backgroundColor・・・棒グラフの背景色が指定されている。配列にすることで、各棒の背景色を指定している(labelの左に表示される長方形アイコンには配列1つ目の背景色が反映される)borderColor・・・棒グラフの外周(罫線)の色が指定されている。structures」>「Primitive[]」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/data-structures.html」のソースをご覧ください。labels」の各要素は連動している。labels」は横軸(X軸)のラベル。それぞれ配列の1つ目の要素であれば、グラフの「一番左側」の数値とラベルを指定している。labels」が優先される。labels」が少ない場合は、あふれた数値のデータは無視される(表示されない)。structures」>「Object[]」から分かること1つ目2つ目3つ目ソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/data-structures.html」のソースをご覧ください。datasets1つ目のグラフは横軸(X軸)が認識されていないようです。X軸の方に数値を入れる方法は別途見つかれば、調べてみる。data」だけで指定出来ることが分かる管理しやすい方を採用できる。ちなみに、パッと見だと、下記の印象。properties」から分かること1つ目2つ目ソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/data-structures.html」のソースをご覧ください。500}}]が指定されている。x、y以外のキーでも指定できる。parsingxAxisKey・・・「id」が指定されている。X軸で使用するデータのキーを指定しているyAxisKey・・・「nested.value」が指定されている。Y軸で使用するデータのキーを指定している(連想配列も可)key・・・「nested.value」が指定されている。円グラフはXY軸がないので、キーは1つになる。structures」>「Object」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/data-structures.html」のソースをご覧ください。20}」と指定されていた。オプション等を指定しないとうまく表示できないのかもしれない。ちなみに、「5.~」のドーナツグラフのデータを使えば円グラフは表示されたので、dataの設定の問題ということは分かっている。structures」>「parsing」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/data-structures.html」のソースをご覧ください。datadatasets・・・元々配列でデータが入っていたが、1つしか入っていなかった。上のグラフは3つ入れた場合の例である。labels」の各ラベルに対して、指定したデータ数のグラフが表示される。Axes」の例を使って勝手に分析!まとめいくつかグラフのサンプルを見てきただけですが、基本的な部分の雰囲気はつかめました。ここだけでもシンプルなグラフであれば、簡単に作成できそうです。長くなってきたので、続きは別記事にしたいと思います。続きはこちら>自分の中で思ったことを書いただけですので、読みにくいかもしれませんが、参考になれば幸いです。今後、全体的に把握できて、うまくまとめられそうであれば、別途まとめて記事にしたいと思います。