引き続きChart.jsさんを元に学習していきたいと思います。これまでチェックした箇所は省略して進みます。
本記事で表示しているグラフに関しては「Chart.js」「Information | Chart.js」などのサンプルグラフを元に引用させていただく形で実際にグラフを作っています。
また、下記理由でデータの値や色などを変更している箇所があります。
- グラフの該当箇所が分かりやすいようにデータや色を調整している
- グラフが表示されないため、ソースを改修しグラフを表示している
上記を前提に、実際に設定してみて、私的に理解を深める＆気づいた点・理解できた点などのメモのために記事に残しています。検証を優先しているため、読みにくい箇所も多いかと思いますが、ご了承くださいm(__)m
索引（その他の分析）
- 「Getting Started」～「General > Data structures」の例を使って勝手に分析！
- 「General > Colors」～「Configuration > Configuration」の例を使って勝手に分析！
- 「Interactions」～「Subtitle」の例を使って勝手に分析！
- 「Tooltip」の例を使って勝手に分析！
- 「Line Chart」～「Scatter Chart」の例を使って勝手に分析！
- 「Area Chart」～「Mixed Chart Types」の例を使って勝手に分析！
- 「Axes」～「Category Axis」の例を使って勝手に分析！
- 「Linear Axis」～「Labeling Axes」の例を使って勝手に分析！
- よく見るグラフを実際に作ってみた（棒グラフ・折れ線グラフ・円グラフ・帯グラフ）
４１．「Area Chart」から分かること
ソース
本家サイト「https://www.chartjs.org/docs/3.7.0/charts/area.html」のソースをご覧ください。
※1つ目のソース部分（背景黒）
※data > datasets > fillの値はそのまま使い、表示させるために適当な数値を入れました
2つ目の引数 > data > datasets
- fill・・・origin、+2（文字列）、1、false、-2（文字列）、{value: 25}など様々な値を指定できる。塗りつぶしの範囲を指定しているようだが分かりやすいように、1つずつ色を表示させた状態でチェックしてみる
下記、fillの値がそれぞれの値になっているデータのみ背景色（薄い赤）にした。これで、それぞれどういった塗りつぶし方をしているかよく分かる。
origin
originは自身のデータから0までの部分をすべて塗りつぶす。
+2（文字列）
＋２（文字列）は自身のデータから２つ先のデータまでの間を塗りつぶす。
1
１は自身のデータから2番目のデータ（配列は0番から始まるので「1」は2番目になる）までの間を塗りつぶす。
false
塗りつぶさない。
-2（文字列）
ー２（文字列）は自身のデータから２つ前のデータまでの間を塗りつぶす。
{value: 25}
{value: 25}は、自身のデータと値25の基準線で囲まれる場所を塗りつぶす。
４２．「Area Chart」>「Example with multiple colors」から分かること
ソース
本家サイト「https://www.chartjs.org/docs/3.7.0/charts/area.html」のソースをご覧ください。
※2つ目のソース部分（背景黒）
※データは「４１．～」のデータのdata > datasets の1つ目（data1）と最後（data6）のデータを使いました。また見やすくするために、最後のデータのfillは削除しました
2つ目の引数 > data > datasets > fill
- target・・・どの範囲を塗りつぶすか指定できる
- above・・・rgb(255, 0, 0)、赤を指定している。データの上を塗りつぶす場合の塗りつぶす色を指定できる（上とは書いたが、実質このデータの下側を塗りつぶす際の色。おそらく、「このデータまでを」というような意味合い…）
- below・・・rgb(0, 0, 255)、青を指定している。データの下を塗りつぶす場合の塗りつぶす色を指定できる（下とは書いたが、実質このデータの上側を塗りつぶす際の色。おそらく、「このデータ以降を」というような意味合い…）
確認のため、データの上側を塗りつぶす場合のサンプルを下記に描く。
データの上側を塗りつぶすタイプのグラフ
1つ目のグラフの1つ目のデータのfill>targetが「origin」で、2つ目のグラフは「+1」に変更したもの。「origin※０まで」がabobeの色（赤）で塗りつぶされ、「＋１※上側」がbelowの色（青）で塗りつぶされていることが分かる。
※反対のような気がするが、結果は上記のとおり。
４３．「Area Chart」>「propagate」から分かること
※グラフ上の「data3」をクリックすると、塗りつぶしが「data1」より下に変わる。つまり、fillがoriginの状態に変わるが、塗りつぶしは無くならない
ソース
本家サイト「https://www.chartjs.org/docs/3.7.0/charts/area.html」のソースをご覧ください。
※3つ目のソース部分（背景黒）
※データは「４１．～」のデータのdata > datasets の奇数番のデータ（data1,data3,data5）を使いました。また見やすくするために、data1のみ背景色を見えるようにしました。fillはdata1が+1、その他はtrueにしました
2つ目の引数 > options > plugins > filler
- propagate・・・trueの場合、塗りつぶしに必要なデータが非表示にされた場合も、「origin」として塗りつぶされる。例えば、上のグラフだと、data1に「+1」を指定しているため、塗りつぶすためにdata1はdata3を参照している。よって、data3を非表示にするとdata1の塗りつぶしは「origin」の塗りつぶし方になる。
falseの場合は塗りつぶさなくなる
※下記にfalseにしたグラフも載せておく
propagateがfalseのグラフ
グラフ上の「data3」をクリックすると、非表示にでき、非表示にすると、塗りつぶしが無くなる。
４４．「Mixed Chart Types」から分かること
ソース
本家サイト「https://www.chartjs.org/docs/3.7.0/charts/mixed.html」のソースをご覧ください。
※2つ目のソース部分（背景黒）
※折れ線グラフのdata > datasets > dataの値を少し編集しています。折れ線グラフと分かりやすいようにしました
2つ目の引数 > data > datasets
- type・・・datasets内の各データに対してtypeを指定することができる。すべてtypeが指定されている場合、2つ目の引数直下のtypeの値（ここでは「scatter」）は無視される
４５．「Mixed Chart Types」>「Drawing order」から分かること
ソース
本家サイト「https://www.chartjs.org/docs/3.7.0/charts/mixed.html」のソースをご覧ください。
※3つ目のソース部分（背景黒）
※棒グラフ、折れ線グラフともに重なりが分かりやすいように色を付けました。
※検証用にデータを少し追加・変更しました
※ソース上のデータの並び順は「黒」⇒「赤」⇒「青」です。
2つ目の引数 > data > datasets
- order・・・データの並び順を指定できる。上のグラフの場合、実際の並び順は「黒」⇒「赤」⇒「青」である。ただし、それぞれorderは「黒＝２」「赤＝１」「青＝３」で指定している。グラフを見ると分かる通り重なり順は上から「赤」⇒「黒」⇒「青」となっている。これはデータの並び順を「赤」⇒「黒」⇒「青」と指定できたことになる※ちなみに検証したところ、orderの初期値は0だと思われる
orderを指定しない場合、つまり標準ではどういう重なりかチェックしておく。
order指定なしのグラフ
予想通り、上からデータの並び順通り「黒」⇒「赤」⇒「青」と重なっている。
スポンサーリンク索引（その他の分析）
- 「Getting Started」～「General > Data structures」の例を使って勝手に分析！
- 「General > Colors」～「Configuration > Configuration」の例を使って勝手に分析！
- 「Interactions」～「Subtitle」の例を使って勝手に分析！
- 「Tooltip」の例を使って勝手に分析！
- 「Line Chart」～「Scatter Chart」の例を使って勝手に分析！
- 「Area Chart」～「Mixed Chart Types」の例を使って勝手に分析！
- 「Axes」～「Category Axis」の例を使って勝手に分析！
- 「Linear Axis」～「Labeling Axes」の例を使って勝手に分析！
まとめ
今回は塗りつぶしの方法や、異なる種類のグラフの表示やその重なりに関して確認できました。異なる種類のグラフを合わせるなど使い勝手が良さそうです。
以上、再度長くなってきたので、続きは別記事にしたいと思います。
自分の中で思ったことを書いただけですので、読みにくいかもしれませんが、参考になれば幸いです。今後、全体的に把握できて、うまくまとめられそうであれば、別途まとめて記事にしたいと思います。
それでは、最後までお読みいただきありがとうございました！
スポンサーリンク
