工具提示:簡介
工具提示是滑鼠遊標懸停時出現的小方塊。(名片較寬,可以顯示在螢幕上的任何位置;工具提示一律附加在東西上,例如散佈圖上的點或長條圖上的長條)。
這份說明文件將說明如何在 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 將工具提示的順位旋轉 30°,緊接在圖表 div 之前:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>