2022年1月15日Chart.jsjavascript引き続きChart.jsさんを元に学習していきたいと思います。これまでチェックした箇所は省略して進みます。Chart.js」などのサンプルグラフを元に引用させていただく形で実際にグラフを作っています。下記理由でデータの値や色などを変更している箇所があります。グラフの該当箇所が分かりやすいようにデータや色を調整しているグラフが表示されないため、ソースを改修しグラフを表示している上記を前提に、実際に設定してみて、私的に理解を深める&気づいた点・理解できた点などのメモのために記事に残しています。Axes」の例を使って勝手に分析!よく見るグラフを実際に作ってみた(棒グラフ・折れ線グラフ・円グラフ・帯グラフ)46.「Axes」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/axes/」のソースをご覧ください。myScaletype・・・「logarithmic」が指定されている。軸の種類を指定できる。Axes」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/」のソースをご覧ください。lines」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/」のソースをご覧ください。gridcolor・・・緑を指定した。縦軸(Y軸)の線の色を指定できるtickColor・・・赤を指定した。Marks」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/」のソースをご覧ください。tickColor・・・赤が指定されている。color・・・青が指定されている。Axes」>「Title」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/」のソースをご覧ください。titlecolor・・・赤が指定されている。指定なしソース本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/」のソースをご覧ください。optionsindexAxis・・・yが指定されている。tickscrossAlign・・・farが指定されている。目盛りラベルが左寄せになる。目盛りラベルの配置位置を指定できる※参考グラフを2つ並べて、2つ目のグラフにはcrossAlignを指定していない。Axes」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/」のソースをご覧ください。各Y軸のIDposition・・・2つのデータそれぞれ、left、rightが指定されている。1つ目のデータの目盛りは左側。‘June’]を指定ソース本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/category.html」のソースをご覧ください。datalabels・・・これまでも確認した通常のラベル設定。xtype・・・categoryが指定されている。labelsに指定したのと同じ。Configuration」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/axes/cartesian/category.html」のソースをご覧ください。xmin・・・ラベルの一つ「March」を指定している。このラベルを最小として指定できる。Axes」の例を使って勝手に分析!まとめ今回はグラフの中の軸に関連する設定が多かったように思います。目立つ部分はグラフ本体になりますが、軸の数値は重要ですし、軸線も色分けした方が見やすい場合もありそうです。そのあたりの基本的な設定方法が分かれば、応用もそれなりには出来そうですし、設定できる値などを調べていけばできることも増えそうです。再度、長くなってきたので、続きは別記事にしたいと思います。自分の中で思ったことを書いただけですので、読みにくいかもしれませんが、参考になれば幸いです。今後、全体的に把握できて、うまくまとめられそうであれば、別途まとめて記事にしたいと思います。