2022年1月9日Chart.jsjavascript引き続きChart.jsさんを元に学習していきたいと思います。これまでチェックした箇所は省略して進みます。Chart.js」などのサンプルグラフを元に引用させていただく形で実際にグラフを作っています。下記理由でデータの値や色などを変更している箇所があります。グラフの該当箇所が分かりやすいようにデータや色を調整しているグラフが表示されないため、ソースを改修しグラフを表示している上記を前提に、実際に設定してみて、私的に理解を深める&気づいた点・理解できた点などのメモのために記事に残しています。Axes」の例を使って勝手に分析!よく見るグラフを実際に作ってみた(棒グラフ・折れ線グラフ・円グラフ・帯グラフ)8.「Colors」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/colors.html」のソースをご覧ください。‘bar’,」を追記しないとグラフは表示されませんでした。typeの初期値がないため?2つ目のソース部分(背景黒)は3年前のライブラリを使うようなので、いったんスルー。画像オブジェクトを用意して、画像のパスを設定しておく。それをパターン画像としてグラフに使うことができる。datasetsbackgroundColor・・・上記「画像の準備」の2で取得した「fillPattern」を指定するとグラフの背景が画像になる9.「Fonts」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/fonts.html」のソースをご覧ください。14;」このように指定するとグラフに関わる文字サイズが一括で変更できる。fontsize・・・文字サイズを指定できる(グラフ上のラベルには反映された)family・・・フォントを指定できる(グラフ上のラベルには反映された)weight・・・文字の太さを指定できる(グラフ上のラベルには反映された)style・・・文字のスタイル(斜字など)を指定できる(グラフ上のラベルには反映された)10.「Padding」>「Number」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/padding.html」のソースをご覧ください。layoutpadding・・・グラフの周り上下左右にpadding(余白)ができる。object」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/padding.html」のソースをご覧ください。paddingtop・・・グラフの上にpadding(余白)ができる。left・・・グラフの左にpadding(余白)ができる。「9.~」のグラフと比較するとよく分かるbottom・・・グラフの下にpadding(余白)ができる。right・・・グラフの右にpadding(余白)ができる。object」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/padding.html」のソースをご覧ください。Animations」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/performance.html」のソースをご覧ください。optionsanimation・・・falseにするとグラフのアニメーションが無くなる。scales」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/general/performance.html」のソースをご覧ください。scalesx・・・labelsを日付に変更したりと試してみたが、うまく動作しなかった、何か分かれば追記したい。⇒「chartjs-adapter-date-fns」を読み込む必要があった※下記へy・・・縦軸(Y軸)のグラフの最大・最小を設定している※下記へxdisplay・・・横軸の目盛りを表示するかどうか指定できるtype・・・「time」が設定されている。日付、時間に関する目盛りが使える。「chartjs-adapter-date-fns」を読み込む必要があるmin・・・グラフの最小値(グラフの一番左の数値)。Date(‘2019-01-01’).valueOf()が指定されているので、2019年1月からmax・・・グラフの最大値(グラフの一番右の数値)。Date(‘2019-12-31’).valueOf()が指定されているので、2019年12月まで日付など使える場所が多そうytype・・・「linear」が設定されている。同ページ内に他のパフォーマンスをあげるための方法も書いてあるが、設定すればOKというもの。必要になった際にチェックすれば良さそう。Configuration」から分かること1つ目のchart2つ目のchartソース本家サイト「https://www.chartjs.org/docs/3.7.0/configuration/」のソースをご覧ください。※2つ目のソース部分(背景黒)※データは前回の「1.~」のものを使いました2つの違い見た目は同じに見えるが、ここで示したいことは、「9.~」にあるデフォルトと個別で上書きできるという点である。‘nearest’;」という形で行う。これは、それ以降のすべてのグラフに影響する。mode」で設定すれば、個別のグラフでは上書きすることが可能。ここでは違いが見てとれなかったので、「9.~」で確認した方が分かりやすい。interactionmode・・・indexの設定があるが、詳細は不明。Configuration」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/configuration/」のソースをご覧ください。※3つ目のソース部分(背景黒)設定に関して、下記を調整した。false;」で折れ線グラフの線を消すことができる。2]は線がないことが見て取れる。true」を設定しているため線が表示されている。‘scatter’」が設定されているためである。‘scatter’とは散布図グラフのことであり、そのため線の表示がなく点のみとなる。Axes」の例を使って勝手に分析!まとめ引き続きいくつかグラフのサンプルを見てきましたが、今回チェックしたものは比較的細かい部分の設定が多く感じました。再度、長くなってきたので、続きは別記事にしたいと思います。自分の中で思ったことを書いただけですので、読みにくいかもしれませんが、参考になれば幸いです。今後、全体的に把握できて、うまくまとめられそうであれば、別途まとめて記事にしたいと思います。