【Chart.js 3.7.0】「General > Colors」～「Configuration > Configuration」の例を使って勝手に分析！～ドキュメントから学ぶ～

引き続きChart.jsさんを元に学習していきたいと思います。これまでチェックした箇所は省略して進みます。

グラフについて

本記事で表示しているグラフに関しては「Chart.js」「Information | Chart.js」などのサンプルグラフを元に引用させていただく形で実際にグラフを作っています。

また、下記理由でデータの値や色などを変更している箇所があります。

  • グラフの該当箇所が分かりやすいようにデータや色を調整している
  • グラフが表示されないため、ソースを改修しグラフを表示している

上記を前提に、実際に設定してみて、私的に理解を深める＆気づいた点・理解できた点などのメモのために記事に残しています。検証を優先しているため、読みにくい箇所も多いかと思いますが、ご了承くださいm(__)m

スポンサーリンク

索引（その他の分析）

  1. 「Getting Started」～「General > Data structures」の例を使って勝手に分析！
  2. 「General > Colors」～「Configuration > Configuration」の例を使って勝手に分析！
  3. 「Interactions」～「Subtitle」の例を使って勝手に分析！
  4. 「Tooltip」の例を使って勝手に分析！
  5. 「Line Chart」～「Scatter Chart」の例を使って勝手に分析！
  6. 「Area Chart」～「Mixed Chart Types」の例を使って勝手に分析！
  7. 「Axes」～「Category Axis」の例を使って勝手に分析！
  8. 「Linear Axis」～「Labeling Axes」の例を使って勝手に分析！
  9. よく見るグラフを実際に作ってみた（棒グラフ・折れ線グラフ・円グラフ・帯グラフ）

８．「Colors」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/colors.html」のソースをご覧ください。
※1つ目のソース部分（背景黒）
※2つ目の引数に「type: ‘bar’,」を追記しないとグラフは表示されませんでした。typeの初期値がないため？

2つ目のソース部分（背景黒）は3年前のライブラリを使うようなので、いったんスルー。

画像の準備

画像オブジェクトを用意して、画像のパスを設定しておく。それをパターン画像としてグラフに使うことができる。

注意点が２つある。

  1. 要素取得時に、「getContext(‘2d’)」を指定する必要がある
  2. 「fillPattern = ctx.createPattern(img, ‘repeat’);」このように指定すると、背景画像を指定できるようになる
    ※ctx：１で取得した要素、img：画像オブジェクト

2つ目の引数 > data > datasets

  • backgroundColor・・・上記「画像の準備」の２で取得した「fillPattern」を指定するとグラフの背景が画像になる

９．「Fonts」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/fonts.html」のソースをご覧ください。
※ソース部分（背景黒）
※データは前回の「１．～」のものを使いました

デフォルトのフォントサイズ

「Chart.defaults.font.size = 14;」このように指定するとグラフに関わる文字サイズが一括で変更できる。

2つ目の引数 > options > plugins > legend > labels > font

  • size・・・文字サイズを指定できる（グラフ上のラベルには反映された）
  • family・・・フォントを指定できる（グラフ上のラベルには反映された）
  • weight・・・文字の太さを指定できる（グラフ上のラベルには反映された）
  • style・・・文字のスタイル（斜字など）を指定できる（グラフ上のラベルには反映された）

１０．「Padding」>「Number」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/padding.html」のソースをご覧ください。
※1つ目のソース部分（背景黒）
※データは前回の「１．～」のものを使いました

options > layout

  • padding・・・グラフの周り上下左右にpadding（余白）ができる。「９．～」のグラフと比較するとよく分かる

１１．「Padding」>「{top, left, bottom, right} object」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/padding.html」のソースをご覧ください。
※2つ目のソース部分（背景黒）
※データは前回の「１．～」のものを使いました

options > layout > padding

  • top・・・グラフの上にpadding（余白）ができる。
  • left・・・グラフの左にpadding（余白）ができる。「９．～」のグラフと比較するとよく分かる
  • bottom・・・グラフの下にpadding（余白）ができる。
  • right・・・グラフの右にpadding（余白）ができる。

１２．「Padding」>「{x, y} object」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/padding.html」のソースをご覧ください。
※3つ目のソース部分（背景黒）
※「}」（中括弧閉じ）が1つ足らないので、追加してください
※データは前回の「１．～」のものを使いました（グラフ自体は少し不細工になりますが、目盛り周りの話なので無視します）

2つ目の引数 > type

  • type・・・グラフの種類（radar：レーダーチャートが指定されていた）

2つ目の引数 > options > scales > r > ticks > backdropPadding

  • x・・・グラフ上に乗っている数字（5, 10, 15,・・・）の左右方向の余白（余白部分はグラフが見えなくなる）
  • y・・・グラフ上に乗っている数字（5, 10, 15,・・・）の上下方向の余白（余白部分はグラフが見えなくなる）

１３．「Performance」>「Disable Animations」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/performance.html」のソースをご覧ください。
※1つ目のソース部分（背景黒）
※データは前回の「１．～」のものを使いました

2つ目の引数 > options

  • animation・・・falseにするとグラフのアニメーションが無くなる。その分軽くなる

１４．「Performance」「Specify min and max for scales」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/general/performance.html」のソースをご覧ください。
※2つ目のソース部分（背景黒）
※データは前回の「１．～」のlabelsを日付に変更したものを使いました

2つ目の引数 > options > scales

  • x・・・labelsを日付に変更したりと試してみたが、うまく動作しなかった、何か分かれば追記したい。一先ずスルー。
    ⇒「chartjs-adapter-date-fns」を読み込む必要があった※下記へ
  • y・・・縦軸（Y軸）のグラフの最大・最小を設定している※下記へ

x

  • display・・・横軸の目盛りを表示するかどうか指定できる
  • type・・・「time」が設定されている。日付、時間に関する目盛りが使える。ただし、「chartjs-adapter-date-fns」を読み込む必要がある
  • min・・・グラフの最小値（グラフの一番左の数値）。new Date(‘2019-01-01’).valueOf()が指定されているので、2019年1月から
  • max・・・グラフの最大値（グラフの一番右の数値）。new Date(‘2019-12-31’).valueOf()が指定されているので、2019年12月まで

日付など使える場所が多そう

y

  • type・・・「linear」が設定されている。線形。通常の数値の縦軸（Y軸）を指す？デフォルト値だと思う
  • min・・・グラフの最小値（グラフの一番下の数値）
  • max・・・グラフの最大値（グラフの一番上の数値）

その他

同ページ内に他のパフォーマンスをあげるための方法も書いてあるが、設定すればOKというもの。必要になった際にチェックすれば良さそう。一先ずスルー。

１５．「Configuration」>「Global Configuration」から分かること

1つ目のchart

2つ目のchart

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/configuration/」のソースをご覧ください。
※2つ目のソース部分（背景黒）
※データは前回の「１．～」のものを使いました

2つの違い

見た目は同じに見えるが、ここで示したいことは、「９．～」にあるデフォルトと個別で上書きできるという点である。

デフォルト（グローバル）な設定は、「Chart.defaults.interaction.mode = ‘nearest’;」という形で行う。これは、それ以降のすべてのグラフに影響する。下記のように「2つ目の引数 > options > interaction > mode」で設定すれば、個別のグラフでは上書きすることが可能。

ここでは違いが見てとれなかったので、「９．～」で確認した方が分かりやすい。

2つ目の引数 > options > interaction

  • mode・・・indexの設定があるが、詳細は不明。詳細に関しては「Interaction Modes」を検証する際にチェックする

１６．「Configuration」>「Dataset Configuration」から分かること

ソース

本家サイト「https://www.chartjs.org/docs/3.7.0/configuration/」のソースをご覧ください。
※3つ目のソース部分（背景黒）

設定に関して、下記を調整した。

  • グラフがうまく表示されなかったため「2つ目の引数 > data > labels」に「labels: [‘label1’, ‘label2’],」という設定を追加した
  • 違いを分かりやすくするために1つ目のデータの点の色を赤、2つ目を緑、3つ目を青、4つ目はそのまま（グレー）にした
  • 違いを分かりやすくするために1つ目のデータを[0, 1]、2つ目を[1, 2]、3つ目を[2, 3]、4つ目を[3, 4]にした

デフォルトの設定

「Chart.defaults.datasets.line.showLine = false;」で折れ線グラフの線を消すことができる。つまり、点だけが残る。

1つ目[0, 1]と2つ目[1, 2]は線がないことが見て取れる。3つ目[2, 3]は「showLine: true」を設定しているため線が表示されている。最後の4つ目[3, 4]は線が表示されていないが、これは「type: ‘scatter’」が設定されているためである。type: ‘scatter’とは散布図グラフのことであり、そのため線の表示がなく点のみとなる。

2つ目の引数 > data > datasets

  • showLine・・・trueやfalseにすることで線を表示するかどうかを個別に指定することができる
  • type・・・グラフの種類（scatter：散布図グラフが指定されていた）を個別に指定することができる
スポンサーリンク

索引（その他の分析）

  1. 「Getting Started」～「General > Data structures」の例を使って勝手に分析！
  2. 「General > Colors」～「Configuration > Configuration」の例を使って勝手に分析！
  3. 「Interactions」～「Subtitle」の例を使って勝手に分析！
  4. 「Tooltip」の例を使って勝手に分析！
  5. 「Line Chart」～「Scatter Chart」の例を使って勝手に分析！
  6. 「Area Chart」～「Mixed Chart Types」の例を使って勝手に分析！
  7. 「Axes」～「Category Axis」の例を使って勝手に分析！
  8. 「Linear Axis」～「Labeling Axes」の例を使って勝手に分析！

まとめ

引き続きいくつかグラフのサンプルを見てきましたが、今回チェックしたものは比較的細かい部分の設定が多く感じました。

再度、長くなってきたので、続きは別記事にしたいと思います。

自分の中で思ったことを書いただけですので、読みにくいかもしれませんが、参考になれば幸いです。今後、全体的に把握できて、うまくまとめられそうであれば、別途まとめて記事にしたいと思います。

それでは、最後までお読みいただきありがとうございました！

スポンサーリンク