2022年1月14日Chart.jsjavascript引き続きChart.jsさんを元に学習していきたいと思います。これまでチェックした箇所は省略して進みます。Chart.js」などのサンプルグラフを元に引用させていただく形で実際にグラフを作っています。下記理由でデータの値や色などを変更している箇所があります。グラフの該当箇所が分かりやすいようにデータや色を調整しているグラフが表示されないため、ソースを改修しグラフを表示している上記を前提に、実際に設定してみて、私的に理解を深める&気づいた点・理解できた点などのメモのために記事に残しています。Chart」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/charts/area.html」のソースをご覧ください。25}など様々な値を指定できる。塗りつぶしの範囲を指定しているようだが分かりやすいように、1つずつ色を表示させた状態でチェックしてみる下記、fillの値がそれぞれの値になっているデータのみ背景色(薄い赤)にした。これで、それぞれどういった塗りつぶし方をしているかよく分かる。originoriginは自身のデータから0までの部分をすべて塗りつぶす。+2(文字列)+2(文字列)は自身のデータから2つ先のデータまでの間を塗りつぶす。11は自身のデータから2番目のデータ(配列は0番から始まるので「1」は2番目になる)までの間を塗りつぶす。false塗りつぶさない。-2(文字列)ー2(文字列)は自身のデータから2つ前のデータまでの間を塗りつぶす。25}は、自身のデータと値25の基準線で囲まれる場所を塗りつぶす。colors」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/charts/area.html」のソースをご覧ください。1つ目(data1)と最後(data6)のデータを使いました。0)、赤を指定している。データの上を塗りつぶす場合の塗りつぶす色を指定できる(上とは書いたが、実質このデータの下側を塗りつぶす際の色。255)、青を指定している。データの下を塗りつぶす場合の塗りつぶす色を指定できる(下とは書いたが、実質このデータの上側を塗りつぶす際の色。「このデータ以降を」というような意味合い...)確認のため、データの上側を塗りつぶす場合のサンプルを下記に描く。データの上側を塗りつぶすタイプのグラフ1つ目のグラフの1つ目のデータのfill>targetが「origin」で、2つ目のグラフは「+1」に変更したもの。「origin※0まで」がabobeの色(赤)で塗りつぶされ、「+1※上側」がbelowの色(青)で塗りつぶされていることが分かる。※反対のような気がするが、結果は上記のとおり。Chart」>「propagate」から分かること※グラフ上の「data3」をクリックすると、塗りつぶしが「data1」より下に変わる。fillがoriginの状態に変わるが、塗りつぶしは無くならないソース本家サイト「https://www.chartjs.org/docs/3.7.0/charts/area.html」のソースをご覧ください。奇数番のデータ(data1,data3,data5)を使いました。見やすくするために、data1のみ背景色を見えるようにしました。fillerpropagate・・・trueの場合、塗りつぶしに必要なデータが非表示にされた場合も、「origin」として塗りつぶされる。上のグラフだと、data1に「+1」を指定しているため、塗りつぶすためにdata1はdata3を参照している。よって、data3を非表示にするとdata1の塗りつぶしは「origin」の塗りつぶし方になる。falseの場合は塗りつぶさなくなる※下記にfalseにしたグラフも載せておくpropagateがfalseのグラフグラフ上の「data3」をクリックすると、非表示にでき、非表示にすると、塗りつぶしが無くなる。Types」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/charts/mixed.html」のソースをご覧ください。dataの値を少し編集しています。datasetstype・・・datasets内の各データに対してtypeを指定することができる。order」から分かることソース本家サイト「https://www.chartjs.org/docs/3.7.0/charts/mixed.html」のソースをご覧ください。※3つ目のソース部分(背景黒)※棒グラフ、折れ線グラフともに重なりが分かりやすいように色を付けました。datasetsorder・・・データの並び順を指定できる。それぞれorderは「黒=2」「赤=1」「青=3」で指定している。指定できたことになる※ちなみに検証したところ、orderの初期値は0だと思われるorderを指定しない場合、つまり標準ではどういう重なりかチェックしておく。Axes」の例を使って勝手に分析!まとめ今回は塗りつぶしの方法や、異なる種類のグラフの表示やその重なりに関して確認できました。異なる種類のグラフを合わせるなど使い勝手が良さそうです。以上、再度長くなってきたので、続きは別記事にしたいと思います。自分の中で思ったことを書いただけですので、読みにくいかもしれませんが、参考になれば幸いです。今後、全体的に把握できて、うまくまとめられそうであれば、別途まとめて記事にしたいと思います。