提示:简介
提示是指将鼠标悬停在某些内容上时弹出的小方框。(悬停卡片更为普遍,可能出现在屏幕上的任何位置;提示会一律附加到内容上,例如散点图中的点或条形图上的条形。)
在本文档中,您将学习如何在 Google 图表中创建和自定义提示。
指定提示类型
Google 图表会自动为所有核心图表创建提示。它们默认以 SVG 格式渲染,但在 IE 8 中除外,它们将以 VML 格式渲染。您可以通过在传递给 draw() 调用的图表选项中指定 tooltip.isHtml: true
以在核心图表上创建 HTML 提示,还可让您创建工具提示操作。
标准提示
在没有任何自定义内容的情况下,系统将根据底层数据自动生成提示内容。您可以将鼠标悬停在图表中的任何柱形上,查看提示。
自定义提示内容
在此示例中,我们将向提示添加自定义内容,方法是向 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 旋转。在下图中,工具提示在图表 div 之前紧挨着使用以下内嵌 CSS 将工具提示顺时针旋转 30°:
<style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>