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

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

２４．「Tooltip」>「Label Callback」から分かること

ソース

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

2つ目の引数 > options > plugins > tooltip > callbacks

  • label・・・関数を指定することができる。ツールチップを表示させる直前のタイミングで関数を呼び出すことができる。ここでは、そのタイミングで数値を小数点第2位まで表示させて、「＄」マークを付与している

２５．「Tooltip」>「Label Color Callback」から分かること

ソース

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

2つ目の引数 > options > plugins > tooltip > callbacks

  • labelColor・・・ラベルの横に表示されるデフォルト正方形のアイコンのスタイルを指定できる。※下記へ
  • labelTextColor・・・関数で色を返すと、ラベルのテキストがその色になる

labelColor

  • borderColor・・・罫線の色を指定できる
  • backgroundColor・・・背景の色を指定できる
  • borderWidth・・・罫線の太さを指定できる
  • borderDash・・・罫線をダッシュにでき、ダッシュの度合いも指定できる
  • borderRadius・・・罫線を角丸にでき、角丸の度合いも指定できる

２６．「Tooltip」>「Label Point Style Callback」から分かること

ソース

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

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

  • usePointStyle・・・ラベルの横に表示されるデフォルト正方形のアイコンの形を変えれるか/変えれないかを指定できる
  • callbacks・・・関数を指定し、ラベルの横に表示されるデフォルト正方形のアイコンを変更する

callbacks

  • labelPointStyle・・・「pointStyle」でアイコンの形を変更できる。ここでは「triangle」三角形に変更している、また「rotation」によって図形を回転させることができる

２７．「Tooltip」>「Event Option」から分かること

ソース

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

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

  • enabled・・・標準で表示されているツールチップの表示/非表示を指定できる
  • external・・・ツールチップをhtmlタグを使って自分で作成することができる※下記へ

external

関数の引数「context」からツールチップの情報が取得できる。それを元にhtmlタグを作成し、表示させる。

表示させる箱として「chartjs-tooltip」を作成し、この箱にテキストやスタイルを詰め込んでツールチップを表示させる。表示位置は「context.chart.canvas.getBoundingClientRect」や、スクロール量「window.pageXOffset」や「window.pageYOffset」などを使って割り出し、絶対位置で指定している。

このあたりは、標準的なやり方なのだろう。ツールチップをカスタマイズしたい場合には必要となる。

スポンサーリンク

索引（その他の分析）

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

まとめ

今回はツールチップ関係を見てきましたが、場合によっては、カスタマイズできた方が便利な場合もあるのかなと思いました。関数内で好きにタグを作れるので、かなりカスタマイズはできるように思います。※うまく収まるかどうかなど、レイアウト的な問題が発生する可能性はありますが…

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

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

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

スポンサーリンク