ツールチップ: 概要
ツールチップは、アイテムにカーソルを合わせるとポップアップする小さなボックスです。（ホバーカードは一般的なもので、画面の任意の場所に表示される可能性があります）。ツールチップは、散布図上のドットや棒グラフ上のバーなどに常に添付されます）。
このドキュメントでは、Google Chart でツールチップを作成してカスタマイズする方法について説明します。
ツールチップのタイプの指定
Google Charts は、すべてのコアチャートのツールチップを自動的に作成します。デフォルトでは SVG としてレンダリングされますが、IE8 では VML としてレンダリングされます。コアグラフで HTML ツールチップを作成するには、draw() 呼び出しに渡すグラフ オプションで tooltip.isHtml: true を指定します。これにより、ツールチップ アクションも作成できます。
標準のツールチップ
カスタム コンテンツがない場合は、基になるデータに基づいてツールチップ コンテンツが自動的に生成されます。ツールチップを表示するには、グラフ内のいずれかのバーにカーソルを合わせます。
ツールチップのコンテンツのカスタマイズ
この例では、DataTable に新しい列を追加し、ツールチップのロールでマークを付けることで、ツールチップにカスタム コンテンツを追加します。
注: これは、バブルチャートの可視化ではサポートされていません。
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'Sales');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
['2010', 600,'$600K in our first year!'],
['2011', 1500, 'Sunspot activity made this our best year ever!'],
['2012', 800, '$800K in 2012.'],
['2013', 1000, '$1M in sales last year.']
]);
var options = { legend: 'none' };
var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
chart.draw(dataTable, options);
}
HTML ツールチップの使用
この例は、HTML ツールチップを有効にして前の例に基づいています。グラフのオプションに tooltip.isHtml: true が追加されています。
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'Sales');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
['2010', 600,'$600K in our first year!'],
['2011', 1500, 'Sunspot activity made this our best year ever!'],
['2012', 800, '$800K in 2012.'],
['2013', 1000, '$1M in sales last year.']
]);
var options = {
tooltip: {isHtml: true},
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
chart.draw(dataTable, options);
}
見た目はそれほど変わりませんが、HTML をカスタマイズできるようになりました。
HTML コンテンツのカスタマイズ
前述の例では、書式なしテキストのコンテンツを含むツールチップがすべて使用されていますが、HTML ツールチップを使えば、HTML マークアップを使用してツールチップをカスタマイズできます。これを有効にするには、次の 2 つのことを行う必要があります。
-
グラフ オプションで
tooltip.isHtml: trueを指定します。これにより、（SVG ではなく）HTML でツールチップを描画するようにグラフが設定されます。 -
htmlカスタム プロパティを使用して、データテーブルの列全体または特定のセルをマークします。ツールチップ ロールと HTML プロパティを含むデータテーブルの列は次のようになります。
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})注: これは、バブルチャートのビジュアル表示では機能しません。バブルチャートの HTML ツールチップのコンテンツはカスタマイズできません。
重要: ツールチップ内の HTML が信頼できるソースから取得されていることを確認してください。カスタム HTML コンテンツにユーザー作成コンテンツが含まれている場合は、そのコンテンツをエスケープすることが重要です。そうしないと、見栄えの良い可視化が XSS 攻撃を受ける可能性があります。
カスタム HTML コンテンツは、<img> タグを追加するか、テキストを太字にするだけです。
カスタム HTML コンテンツには、動的に生成されるコンテンツを含めることもできます。ここでは、カテゴリ値ごとに動的に生成されるテーブルを含むツールチップを追加しています。ツールチップは行の値に接続されているため、いずれかのバーにカーソルを合わせると、HTML ツールチップが表示されます。
この例では、カスタム HTML ツールチップをドメイン列に添付する方法を示します。（上記の例では、データ列に接続されています）。ドメイン軸のツールチップをオンにするには、focusTarget: 'category' オプションを設定します。
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Country');
// Use custom HTML content for the domain tooltip.
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn('number', 'Gold');
dataTable.addColumn('number', 'Silver');
dataTable.addColumn('number', 'Bronze');
dataTable.addRows([
['USA', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg', 46, 29, 29), 46, 29, 29],
['China', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
['UK', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
]);
var options = {
title: 'London Olympics Medals',
colors: ['#FFD700', '#C0C0C0', '#8C7853'],
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }
};
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}
function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
'<table class="medals_layout">' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}
ローテーション ツールチップ
Google グラフのツールチップは CSS を使用して回転できます。下のグラフでは、チャート div の直前に、このインライン CSS を使用して、ツールチップが時計回りに 30° 回転します。
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>