chart.jsの円グラフで、マウスオーバー時の情報を増やしたい

chart.jsを使ってグラフを作る際に、マウスオーバーでそのデータの情報を表示させることができるかと思いますが、
その情報にさらに追加で別の情報も表示したいです。

何も設定していないと下のような画像になり、script部に記述したlabelとdataの値しか表示されません。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>円グラフサンプル</title>
6
7<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
8
9</head>
10<body style="height: 100%; margin: 0%; background-color: #494949">
11	<canvas id="pieGraph" style="background-color: #494949;"></canvas>
12	
13	
14	<script type="text/javascript">
15        var ctx = document.getElementById("pieGraph").getContext('2d');
16		var myChart = new Chart(ctx, {
17	  		type: 'pie',
18	  		data: {
19	    		labels: ["データ１", "データ２", "データ３", "データ４"],**←ここのデータが表示される**
20	    		datasets: [{
21	      			backgroundColor: [
22	        			"#2ecc71",
23	        			"#3498db",
24	        			"#95a5a6",
25	        			"#9b59b6"
26	      			],
27	     			data: [12, 19, 3, 17]**←ここのデータが表示される**
28	    		}]
29	  		}
30		});
31
32	</script>
33</body>
34</html>

上記のコードはラベルとデータのみ表示されるパターンのコードになります。

このコードをどう書き換えるとマウスオーバー時の情報を増やすことができるのでしょうか？
教えてくださるとうれしいです。

画像でのイメージになりますが、下のような画面にしたいです。

足りない情報等あれば追記します。
宜しくお願い致します。

行動規範の内容に同意します

回答3件

ベストアンサー

オプションで設定すれば可能なようです。
options.tooltips.callbacksの様々なキーにコールバック関数を設定できるらしく、
適切なキーのコールバック関数に設定すれば好きに情報を増やせると思います。
（多分キーによって表示位置が違う？ titleは一番上とか？）

Tooltip　Callbacks

未検証なので、実際に設定したり、引数をconsole.log等で表示して確認してみてください。

投稿2019/01/29 08:36

dice142

総合スコア5158

mastan1117

2019/01/29 08:47

tipsのオプション一覧ですね。リンクの貼り付けありがとうございます。またわからないことがあれば質問させていただくこともあるかもしれませんが宜しくお願い致します。

mastan1117

2019/02/01 05:27

callbacksの書き方を調べてみたところ実現することができました。ありがとうございました。勉強になりました！

dice142

2019/02/01 05:33

おめでとうございます。 chart.jsは日本語訳してくれている人がいるので、そちらを見てみるのも良いかもしれません。（最新版に対応してないかもしれないので、なるべく公式を見たほうが良いとは思いますが。）

行動規範の内容に同意します

このあたりが参考になるかもしれません。
Chart.jsのhoverに任意のテキストを表示したい
 Chart.js - にほんご。：ツールチップ設定

投稿2019/01/29 08:30

madoka9393

総合スコア992

mastan1117

2019/01/29 08:44

既に同じような質問が投稿されてたのですね。リンクを貼ってくださってありがとうございます。確認してみます。

行動規範の内容に同意します

callbackを使用して表示を変える方法で実現できた。
表示する情報に改行を加えたい場合、表示する項目を[]で囲み、カンマ区切りにすると改行できる。
下記のコードの場合ベタ書きだが、java側などで作成したデータを表示したい場合
ベタ書きの箇所を書き換えると表示できる、、、、、と思う。

jsp
1var ctx = document.getElementById("pieGraph").getContext('2d');
2        var myChart = new Chart(ctx, {
3              type: 'pie',
4              data: {
5                labels: ["データ１", "データ２", "データ３", "データ４"],
6                datasets: [{
7                      backgroundColor: [
8                        "#2ecc71",
9                        "#3498db",
10                        "#95a5a6",
11                        "#9b59b6"
12                      ],
13                     data: [12, 19, 3, 17]
14                }]
15              },
16　　　　　　　　options: {                             //◆オプション
17　　　　　　　　　tooltips: {
18　　　　　　　　　　callbacks: {
19　　　　　　　　　　　label: function (tooltipItem, data) {
20　　　　　　　　　　　　return [data.labels[tooltipItem.index] + ": " + data.datasets[0].data[tooltipItem.index]+ " %", "補足情報:ほげほげ"];
21　　　　　　　　　　　}
22　　　　　　　　　　}
23　　　　　　　　　}
24　　　　　　　　}
25　　　　　});