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

引き続き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. よく見るグラフを実際に作ってみた（棒グラフ・折れ線グラフ・円グラフ・帯グラフ）

１７．「Interactions」>「Event Option」から分かること

ソース

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

2つ目の引数 > options

  • events・・・[‘click’]を指定すると折れ線グラフの●の部分をクリックしないと情報が表示されないようになった。元々はマウスオーバーで情報が表示されていた前前回の「１．～」などで確認すると分かる。

１８．「Interactions」>「Event Option」から分かること

ソース

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

2つ目の引数 > options

  • events・・・[‘mousemove’, ‘mouseout’, ‘click’, ‘touchstart’, ‘touchmove’]を指定すると折れ線グラフの●の部分をマウスでカーソルを合わせると（おそらくmousemoveが反応し）●が大きくなる
  • plugins > tooltip > events・・・[‘click’]を指定すると折れ線グラフの●の部分をクリックしないと情報が表示されないようになった。元々はマウスオーバーで情報が表示されていた前前回の「１．～」などで確認すると分かる。「１７．～」と同じ設定をものによって個別に設定できる。tooltip（ツールチップとはマウスオーバー時に表示されるヒントや情報のポップアップを指す）

その他

同ページに他にもいろいろとイベント時に何か設定する方法やポイントを合わせたときにどの情報を拾ってくるかなどの設定ができるらしい。ただ、実際に必要なタイミングにならないと使うタイミングや便利さが分からず覚えられないので、なんとなくそんな感じのことが書いてあることは覚えておこうと思います。

よって、同ページの以降の内容はいったんスルー。

１９．「Animations」から分かること

ソース

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

2つ目の引数 > options > animations > tension

  • duration・・・アニメーションの動きの間隔（1秒であれば1秒で1回の動作をする）
  • easing・・・linearが設定されている。linearは等速である。その他いろいろな動き方を指定できる（同ページ「Easing」に設定できる項目が記載されている）
  • from・・・1が指定され、toで0が指定されているので0～1を動くみたいなことだと思うが、詳細は把握できていない…現状そこまで必要な情報ではないので、分かり次第追記予定
  • to・・・※fromに記載
  • loop・・・trueであれば連続して動き、falseの場合は、1度動いて止まる

２０．「Legend」>「Example」から分かること

ソース

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

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

  • display・・・グラフの項目説明の文言の表示/非表示を指定できる
  • labels > color・・・グラフの項目説明の文言の文字色を指定できる

２１．「Legend」>「Custom On Click Actions」から分かること

ソース

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

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

  • onClick・・・グラフの項目説明の文言をクリックした際に、作成した関数「newLegendClickHandler」を呼び出すことができる。中身には触れないが、どの処理を通ってもポップアップのアラートを表示するよう対応したところ、クリックでアラートが表示されることが確認できた。
    イベントによって関数が呼び出される点は確認できたので、現時点で関数内の処理はいったんスルー。

２２．「Title」>「Example Usage」から分かること

1つ目

2つ目

ソース

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

2つ目の引数 > options > plugins > title

  • display・・・グラフのタイトルの表示/非表示を指定できる
  • text・・・グラフのタイトルの文言を指定できる
  • padding・・・グラフのタイトルのpaddingを指定できる※下記へ

padding

  • top・・・グラフのタイトルの上側のpaddingを指定できる
  • bottom・・・グラフのタイトルの下側のpaddingを指定できる

※1つ目のグラフと2つ目のグラフを比較するとタイトルの位置の違いが分かる

２３．「Subtitle」から分かること

ソース

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

2つ目の引数 > options > plugins > subtitle

  • display・・・グラフのタイトルの表示/非表示を指定できる
  • text・・・グラフのタイトルの文言を指定できる

    ※サブタイトルだけだと分かりにくいと思い、「２２．～」のタイトルも設定した

    スポンサーリンク

    索引（その他の分析）

    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」の例を使って勝手に分析！

    まとめ

    引き続きいくつかグラフのサンプルを見てきました。アニメーションに関して動作を見る限りそんなに重くはなさそうでしたが、重さの観点から1ページに大量のグラフがある場合等、あまり使えないかもしれませんね。また、タイトルやサブタイトルのグラフの外の設定もありました。これはそれなりに需要がありそうです。

    ただ、編集しやすいさを考えると、chartjsで設定しなくても普通にベタ書きでも良いかもしれないですね。

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

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

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

    スポンサーリンク