工具提示：簡介
工具提示是彈出的方塊，當您將滑鼠遊標懸停在某個項目上時。(醒目資訊卡較為籠統，可以顯示在畫面上的任意位置；工具提示一律會附加在某個項目上，例如散佈圖上的圓點或長條圖上的長條)。
本文件將說明如何在 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 標記自訂工具提示。如要啟用這項功能，您必須執行下列兩項操作：
-
在圖表選項中指定
tooltip.isHtml: true。這會指示圖表在 HTML (而非 SVG) 中繪製工具提示。 -
使用
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 旋轉。在下圖中，工具提示會透過這個內嵌 CSS，於圖表 div 之前立即順時針旋轉 30°：
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>