ツールチップ: 概要
ツールチップは、カーソルを合わせたときに表示される小さなボックスです。（ホバーカードはより一般的で、画面の任意の場所に表示されます。ツールチップは、散布図の点や棒グラフの棒などに常に付随しています）。
このドキュメントでは、Google グラフでツールチップを作成してカスタマイズする方法について説明します。
ツールチップの種類の指定
Google グラフでは、すべてのコアグラフのツールチップが自動的に作成されます。デフォルトでは SVG としてレンダリングされます。ただし、IE 8 では 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>
これは HTML ツールチップ、つまりオプション isHtml: true があるツールチップでのみ機能します。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Fixations'],
['2015', 80],
['2016', 90],
['2017', 100],
['2018', 90],
['2019', 80],
]);
var options = {
tooltip: { isHtml: true }, // CSS styling affects only HTML tooltips.
legend: { position: 'none' },
bar: { groupWidth: '90%' },
colors: ['#A61D4C']
};
var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
<div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>
</body>
</html>
ツールチップにグラフを配置する
HTML ツールチップには、任意の HTML コンテンツ（Google グラフを含む）を含めることができます。ツールチップ内にグラフを使用すると、データ要素にカーソルを合わせたときに追加情報を表示できます。これは、概要を一目で確認でき、ユーザーが必要に応じてさらに詳しい分析を行うための優れた方法です。
以下の縦棒グラフは、いくつかの主要なスポーツ イベントの最近の視聴者数の最高値を示しています。各ツールチップには、過去 10 年間の平均視聴者数の折れ線グラフが表示されています。
ここで注意すべき点が 2 つありますまず、ツールチップに表示されるデータセットごとに、印刷可能なグラフを描画する必要があります。次に、各ツールチップ グラフには 「ready」イベント ハンドラが必要です。これは addListener を介して呼び出し、印刷可能なグラフを作成します。
重要: すべてのツールチップ グラフは、メインのグラフの前に描画する必要があります。これは、プライマリ グラフの DataTable に追加する画像を取得するために必要です。
// Draws your charts to pull the PNGs for your tooltips.
function drawTooltipCharts() {
var data = new google.visualization.arrayToDataTable(tooltipData);
var view = new google.visualization.DataView(data);
// For each row of primary data, draw a chart of its tooltip data.
for (var i = 0; i < primaryData.length; i++) {
// Set the view for each event's data
view.setColumns([0, i + 1]);
var hiddenDiv = document.getElementById('hidden_div');
var tooltipChart = new google.visualization.LineChart(hiddenDiv);
google.visualization.events.addListener(tooltipChart, 'ready', function() {
// Get the PNG of the chart and set is as the src of an img tag.
var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';
// Add the new tooltip image to your data rows.
primaryData[i][2] = tooltipImg;
});
tooltipChart.draw(view, tooltipOptions);
}
drawPrimaryChart();
}
function drawPrimaryChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Event');
data.addColumn('number', 'Highest Recent Viewership');
// Add a new column for your tooltips.
data.addColumn({
type: 'string',
label: 'Tooltip Chart',
role: 'tooltip',
'p': {'html': true}
});
// Add your data (with the newly added tooltipImg).
data.addRows(primaryData);
var visibleDiv = document.getElementById('visible_div');
var primaryChart = new google.visualization.ColumnChart(visibleDiv);
primaryChart.draw(data, primaryOptions);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawTooltipCharts);
// Set up data for visible chart.
var primaryData = [
['NBA Finals', 22.4],
['NFL Super Bowl', 111.3],
['MLB World Series', 19.2],
['UEFA Champions League Final', 1.9],
['NHL Stanley Cup Finals', 6.4],
['Wimbledon Men\'s Championship', 2.4]
];
// Set up data for your tooltips.
var tooltipData = [
['Year', 'NBA Finals', 'NFL Super Bowl', 'MLB World Series',
'UEFA Champions League Final', 'NHL Stanley Cup Finals',
'Wimbledon Men\'s Championship'],
['2005', 12.5, 98.7, 25.3, 0.6, 3.3, 2.8],
['2006', 13.0, 90.7, 17.1, 0.8, 2.8, 3.4],
['2007', 9.3, 93.0, 15.8, 0.9, 1.8, 3.8],
['2008', 14.9, 97.5, 17.1, 1.3, 4.4, 5.1],
['2009', 14.3, 98.7, 13.6, 2.1, 4.9, 5.7],
['2010', 18.2, 106.5, 19.4, 2.2, 5.2, 2.3],
['2011', 17.4, 111.0, 14.3, 4.2, 4.6, 2.7],
['2012', 16.8, 111.3, 16.6, 2.0, 2.9, 3.9],
['2013', 16.6, 108.7, 12.7, 1.4, 5.8, 2.5],
['2014', 15.7, 111.3, 15.0, 1.9, 4.7, 2.4]
];
var primaryOptions = {
title: 'Highest U.S. Viewership for Most Recent Event (in millions)',
legend: 'none',
tooltip: {isHtml: true} // This MUST be set to true for your chart to show.
};
var tooltipOptions = {
title: 'U.S. Viewership Over The Last 10 Years (in millions)',
legend: 'none'
};
// Draws your charts to pull the PNGs for your tooltips.
function drawTooltipCharts() {
var data = new google.visualization.arrayToDataTable(tooltipData);
var view = new google.visualization.DataView(data);
// For each row of primary data, draw a chart of its tooltip data.
for (var i = 0; i < primaryData.length; i++) {
// Set the view for each event's data
view.setColumns([0, i + 1]);
var hiddenDiv = document.getElementById('hidden_div');
var tooltipChart = new google.visualization.LineChart(hiddenDiv);
google.visualization.events.addListener(tooltipChart, 'ready', function() {
// Get the PNG of the chart and set is as the src of an img tag.
var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';
// Add the new tooltip image to your data rows.
primaryData[i][2] = tooltipImg;
});
tooltipChart.draw(view, tooltipOptions);
}
drawPrimaryChart();
}
function drawPrimaryChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Event');
data.addColumn('number', 'Highest Recent Viewership');
// Add a new column for your tooltips.
data.addColumn({
type: 'string',
label: 'Tooltip Chart',
role: 'tooltip',
'p': {'html': true}
});
// Add your data (with the newly added tooltipImg).
data.addRows(primaryData);
var visibleDiv = document.getElementById('visible_div');
var primaryChart = new google.visualization.ColumnChart(visibleDiv);
primaryChart.draw(data, primaryOptions);
}
</script>
</head>
<body>
<div id="hidden_div" style="display:none"></div>
<div id="visible_div" style="height:300px"></div>
</body>
</html>
ツールチップの操作
ツールチップには、JavaScript 定義のアクションを含めることもできます。簡単な例として、ユーザーが [サンプルブックを見る] をクリックするとダイアログ ボックスをポップアップ表示するアクションを含むツールチップを示します。
tooltip オプションは、ユーザーが円の角度調整用円柱を選択するとトリガーされ、setAction で定義されたコードが実行されます。
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Percentage of my books'],
['Science Fiction', 217],
['General Science', 203],
['Computer Science', 175],
['History', 155],
['Economics/Political Science', 98],
['General Fiction', 72],
['Fantasy', 51],
['Law', 29]
]);
var chart = new google.visualization.PieChart(
document.getElementById('tooltip_action'));
var options = { tooltip: { trigger: 'selection' }};
chart.setAction({
id: 'sample',
text: 'See sample book',
action: function() {
selection = chart.getSelection();
switch (selection[0].row) {
case 0: alert('Ender\'s Game'); break;
case 1: alert('Feynman Lectures on Physics'); break;
case 2: alert('Numerical Recipes in JavaScript'); break;
case 3: alert('Truman'); break;
case 4: alert('Freakonomics'); break;
case 5: alert('The Mezzanine'); break;
case 6: alert('The Color of Magic'); break;
case 7: alert('The Law of Superheroes'); break;
}
}
});
chart.draw(data, options);
}
アクションは、visible、enabled、またはその両方にできます。Google グラフがレンダリングされる際、ツールチップ アクションは表示されている場合にのみ表示され、有効になっている場合にのみクリック可能です。（無効になっているが、表示されている操作はグレー表示されます）。
visible と enabled は、true または false の値を返す関数にする必要があります。これらの機能は要素 ID とユーザーの選択に基づいて動作するため、アクションの表示とクリックの可否を微調整できます。
ツールチップは、focus と selection でトリガーできます。ただし、ツールチップ アクションでは selection をおすすめします。これにより、ツールチップが保持されるため、ユーザーがアクションを選択しやすくなります。
アクションがアラートである必要はありません。JavaScript でできることは、すべてアクションから実行できます。ここでは 2 つのアクションを追加します 1 つは円グラフのくさびを拡大し もう 1 つは縮小する
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Percentage of my books'],
['Science Fiction', 217],
['General Science', 203],
['Computer Science', 175],
['History', 155],
['Economics & Political Science', 98],
['General Fiction', 72],
['Fantasy', 51],
['Law', 29]
]);
var chart = new google.visualization.PieChart(
document.getElementById('tooltip_action_2'));
var options = { tooltip: { trigger: 'selection' }};
chart.setAction({
id: 'increase',
text: 'Read 20 more books',
action: function() {
data.setCell(chart.getSelection()[0].row, 1,
data.getValue(chart.getSelection()[0].row, 1) + 20);
chart.draw(data, options);
}
});
chart.setAction({
id: 'decrease',
text: 'Read 20 fewer books',
action: function() {
data.setCell(chart.getSelection()[0].row, 1,
data.getValue(chart.getSelection()[0].row, 1) - 20);
chart.draw(data, options);
}
});
chart.draw(data, options);
}
データへのアノテーション付け
列の Role として tooltip ではなく annotationText を使用すると、Google グラフにテキストを直接オーバーレイできます。（ツールチップは、マウスでアノテーションにカーソルを合わせると表示されます）。
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'USA');
dataTable.addColumn({type: 'string', role: 'annotation'});
dataTable.addColumn({type: 'string', role: 'annotationText', p: {html:true}});
dataTable.addColumn('number', 'China');
dataTable.addColumn('number', 'UK');
dataTable.addRows([
['2000', 94, '', '', 58, 28],
['2004', 101, '', '', 63, 30],
['2008', 110, 'An all time high!', '<img width=100px src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg">', 100, 47],
['2012', 104, '', '', 88, 65]
]);
var options = { tooltip: {isHtml: true}};
var chart = new google.visualization.LineChart(document.getElementById('tt_6_annotation'));
chart.draw(dataTable, options);
}
サポートされているグラフ
現在、HTML ツールチップは、次の種類のグラフでサポートされています。- AreaChart
- BarChart
- CalendarChart
- CandlestickChart
- ColumnChart
- ComboChart
- LineChart
- PieChart
- サンキー ダイアグラム
- ScatterChart
- タイムライン
annotationText または tooltip のロールを使用している場合は、ロールに関するドキュメントを参照して、今後の変更と将来の問題を回避する方法を確認してください。