ツールチップ: 概要
ツールチップは、アイテムにカーソルを合わせるとポップアップする小さなボックスです。(ホバーカードは一般的なもので、画面の任意の場所に表示される可能性があります)。ツールチップは、散布図上のドットや棒グラフ上のバーなどに常に添付されます)。
このドキュメントでは、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>