概览
您可以向任何可视化图表添加工具栏元素,使用户能够将底层数据导出到 CSV 文件或 HTML 表格中,或者提供代码以将可视化图表嵌入到任意网页或小工具中。
开发者:Google
示例
从工具栏中选择其中一个选项。
<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']}); var visualization; function draw() { drawVisualization(); drawToolbar(); } function drawVisualization() { var container = document.getElementById('visualization_div'); visualization = new google.visualization.PieChart(container); new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'). send(queryCallback); } function queryCallback(response) { visualization.draw(response.getDataTable(), {is3D: true}); } function drawToolbar() { var components = [ {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA', gadget: 'https://www.google.com/ig/modules/pie-chart.xml', userprefs: {'3d': 1}}, {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}, {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}, {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA', gadget: 'https://www.google.com/ig/modules/pie-chart.xml', userprefs: {'3d': 1}, style: 'width: 800px; height: 700px; border: 3px solid purple;'} ]; var container = document.getElementById('toolbar_div'); google.visualization.drawToolbar(container, components); }; google.charts.setOnLoadCallback(draw); </script> </head> <body> <div id="visualization_div" style="width: 270px; height: 200px;"></div> <div id="toolbar_div"></div> </body> </html>
用途
通过调用 google.visualization.drawToolbar()
方法,向工具栏中添加允许的导出类型和每种导出所需的数据,将工具栏添加到您的网页中。
要使用工具栏,您的可视化图表必须从网址获取其数据;您不能传入手动填充的 DataTable 或 DataView 对象。您要将用于填充可视化图表的数据的网址传入 drawToolbar()
方法。
如果您想提供包含该小工具的 iGoogle 组件或嵌入式 iframe,则必须提供该小工具的可视化图表版本的网址。
输出类型
工具栏可以为用户提供以下一种或多种输出类型的选择,具体取决于您在 drawToolbar()
方法中配置工具栏的方式:
- 数据的简单 CSV 版本(浏览器将呈现或提供下载和保存的选项,具体取决于您的浏览器配置和/或
- 一个包含数据的 HTML 表格(在新浏览器窗口中打开)和/或
- HTML <iframe> 代码,用于将此可视化图表嵌入网页,和/或
- 指向可让用户在其 iGoogle 页面中嵌入该小工具的页面链接。
语法
google.visualization.drawToolbar(container, components)
参数
- 容器
- 页面上 DOM 元素的句柄。API 会将工具栏绘制到此元素中。这与标准可视化的 container 参数类似。您应将工具栏放在使用该可视化图表的旁边。
- 组件
- 一组对象,每个对象描述可以导出数据的格式或可视化图表。工具栏会按照添加到数组中的顺序向用户显示选项。每个对象都有一个类型说明属性,以及一个或多个附加属性,具体取决于类型:
type: 'csv'
- 此选项会将数据导出到逗号分隔值文件。此时,系统会打开“另存为”对话框。- datasource:'string' - 数据源网址。
type: html'
- 此选项可将数据导出到 HTML 表格中。 包含数据表格的页面将在新窗口中打开。- datasource:数据源网址字符串。
type: igoogle
- 此选项允许用户将可视化图表添加到其 iGoogle 页面。系统将在浏览器中打开一个“添加到 iGoogle”页面。仅当可视化图表版本化后才能使用该功能。- datasource:数据源网址字符串。
- Gadget:小工具化版本的 XML 网址字符串。请注意,工具栏关联的可视化图表不必是小工具版本。
- userprefs:适用于此可视化图表的可选偏好设置对象,用于指定可视化图表偏好设置。
type: htmlcode
- 此选项会创建一段 HTML 代码,用户可以将其嵌入网页以在 iframe 中显示可视化。包含该小工具的确切 HTML 元素的弹出式窗口将在浏览器中打开。仅当可视化图表版本化时,才能使用该窗口。- datasource:数据源网址字符串。
- Gadget:小工具的 XML 网址字符串。
- userprefs:适用于此可视化图表的可选偏好设置对象,用于指定可视化图表偏好设置。
- style:iframe 样式的可选字符串。 例如:“width: 300px; height: 500px;”。
示例
function drawToolbar() { var components = [ {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA', gadget: 'https://www.google.com/ig/modules/pie-chart.xml', userprefs: {'3d': 1}}, {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}, {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}, {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA', gadget: 'https://www.google.com/ig/modules/pie-chart.xml'} ]; var container = document.getElementById('toolbar_div'); google.visualization.drawToolbar(container, components); };
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。对于某些组件,数据取自提供给工具栏的相应数据源。
本地化
工具栏目前仅支持美式英语。