概览
可以排序和分页的表。 表单元格的格式可以使用格式字符串,也可以通过直接插入 HTML 作为单元格值来设置。数值右对齐;布尔值显示为对勾标记。用户可以通过键盘或鼠标选择单个行。 用户可以通过点击列标题对行进行排序。标题行会在用户滚动时保持固定。此表格会触发许多与用户互动相对应的事件。
示例
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> </head> <body> <div id="table_div"></div> </body> </html>
正在加载
google.charts.load
软件包名称为 "table"
。
google.charts.load('current', {packages: ['table']});
可视化图表的类名称为 google.visualization.Table
。
var visualization = new google.visualization.Table(container);
数据格式
DataTable 会被转换为相应的 HTML 表,DataTable 中的每一行/列都会转换为 HTML 表中的行/列。每一列都必须具有相同的数据类型,并且支持所有标准可视化数据类型(字符串、布尔值、数字等)。
自定义属性
您可以使用 DataTable 的 setProperty()
方法将以下自定义属性分配给数据表元素。
物业名称 | 应用对象 | 说明 |
---|---|---|
className | 单元格 | 要分配给单个单元格的字符串类名称。使用此方法为各个单元格分配 CSS 样式。 |
style | 单元格 | 要以内嵌方式分配给单元格的样式字符串。这会覆盖应用于该单元格的 CSS 类样式。您必须设置 allowHTML=true 属性才能使其正常运行。示例:'border: 1px solid green;' 。 |
示例
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
配置选项
名称 | |
---|---|
allowHTML |
如果此政策设为 true,包含 HTML 标记的单元格中已设置格式的值将以 HTML 的形式呈现。 如果设置为 false,大多数自定义格式化程序将无法正常运行。 类型:布尔值
默认:false
|
交替行样式 |
决定交替颜色样式是否会分配给奇数/偶数行。 类型:布尔值
默认:true
|
cssClassNames |
一个对象,其中每个属性名称都描述一个表元素,而属性值是一个字符串,用于定义要分配给该表元素的类。使用此属性可将自定义 CSS 分配给表中的特定元素。如需使用此属性,请分配一个对象,其中属性名称指定表元素,属性值为字符串,指定要分配给该元素的类名称。然后,您必须为网页上的该类定义 CSS 样式。支持以下属性名称:
示例:
注意:在 CSS 中,有些元素会替换其他元素。例如,如果您为 Type:对象
默认:null
|
第一个行号 |
dataTable 中第一行的行号。仅在 showRowNumber 为 true 时使用。 类型:数字
默认:1
|
冻结列 |
左侧将冻结的列数。水平滚动其余列时,这些列仍会保留。如果 类型:数字
默认:null
|
高度 |
用于设置可视化图表的容器元素的高度。您可以使用标准 HTML 单位(例如“100px”、“80em”、“60”)。如果未指定单位,则假定编号为像素。如果未指定,浏览器会自动调整高度以适应表格,同时在流程中尽可能缩减尺寸;如果设置的高度小于要求的高度,表格将添加一个垂直滚动条(标题行也已冻结)。如果设置为“100%”,该表将尽可能地展开为容器元素。 类型:字符串
默认:自动
|
网页 |
是否以及如何为数据启用分页。选择以下字符串值之一:
类型:字符串
默认:“停用”
|
pageSize |
每个页面的行数(使用页面选项启用分页时)。 类型:数字
默认:10
|
Paging 按钮 |
为分页按钮设置指定选项。相关选项如下所示:
类型:字符串或数字
默认:自动
|
表格 |
通过颠倒表格的列顺序,添加对从右到左的语言(例如阿拉伯语或希伯来语)的基本支持,使第 0 列为最右列,最后一列为最左列。这不会影响底层数据中的列索引,仅影响显示顺序。表格选项不支持完整的双向 (BiDi) 语言显示。如果您启用分页(使用页面选项),或者表具有滚动条(因为您指定的高度和宽度选项小于所需的表大小),此选项将被忽略。 类型:布尔值
默认:false
|
scrollLeftStartPosition |
如果表具有水平滚动条,因为您已设置宽度属性,请设置水平滚动位置(以像素为单位)。表格将在最左边的列中经过许多像素的滚动。 类型:数字
默认:0
|
显示行号 |
如果设置为 true,则将行号显示为表格的第一列。 类型:布尔值
默认:false
|
sort |
当用户点击列标题时,是否以及如何对列进行排序。如果启用了排序功能,请考虑同时设置 sortAscending 和 sortColumn 属性。请选择以下字符串值之一:
类型:字符串
默认:“启用”
|
升序排序 |
初始排序列的排序顺序。true 表示升序,false 表示降序。如果未指定 类型:布尔值
默认:true
|
排序列 |
数据表中列的起始索引,该表最初的排序依据。此列将标有一个小箭头来指示排序顺序。 类型:数字
默认:-1
|
起始页 |
要显示的第一个表格页面。仅当 类型:数字
默认:0
|
width |
用于设置可视化图表的容器元素的宽度。您可以使用标准 HTML 单位(例如“100px”、“80em”、“60”)。如果未指定单位,则假定编号为像素。如果未指定,浏览器会自动调整宽度以适应表格宽度;在此过程中,系统会尽可能缩小地图;如果设置的宽度小于要求的宽度,表格将添加一个水平滚动条。如果设置为“100%”,该表将尽可能地展开为容器元素。 类型:字符串
默认:自动
|
方法
方法 | |
---|---|
draw(data, options) |
绘制表格。 返回值类型:无
|
getSelection() |
标准 getSelection 实现。选择元素都是行元素。可以返回多个选定的行。无论用户如何进行互动(排序、分页等),选择对象中的行索引都会引用原始数据表。 请注意,切换选择:首次点击某个单元格时选中该单元格;再次点击该单元格即可取消选择单元格,这会导致选择事件,但在检索到的选择对象中没有任何选定项。 返回值类型:一组选择元素
|
getSortInfo() |
调用此方法可以检索有关已排序的表的当前排序状态的信息(通常是由已点击列标题的用户按特定列对行进行排序)。如果您已停用排序,此方法将不起作用。 如果您尚未在代码中对数据进行排序,或者用户尚未通过选择代码对数据进行排序,则将返回默认排序值。 返回值类型:具有以下属性的对象:
|
setSelection(selection) |
标准 返回值类型:无
|
clearChart() |
清除该图表,并释放其分配的所有资源。 返回值类型:无
|
事件
名称 | |
---|---|
select |
标准选择事件,但只能选择整行。 属性:无
|
网页 |
当用户点击页面导航按钮时触发。 属性:
page :数字。要转到的页面的索引。 |
sort |
当用户点击列标题且排序选项不是“停用”时即会触发。 属性:具有以下属性的对象:
|
准备就绪 |
此图表已准备好进行外部方法调用。如果您想与图表互动,并在绘制后调用方法,则应在调用绘制方法之前为此事件设置监听器,并仅在事件触发后调用它们。 属性:无
|
格式化程序
注意:表的可视化结果有一组格式化程序对象,已被通用格式化程序所取代,这些行为方式相同,但可用于任何可视化操作。
下表显示了旧版表格式化程序及其等效的通用格式化程序。在编写新代码时,您应使用通用格式设置工具。
重要提示:格式化程序通常使用 HTML 设置文本格式,因此应将 allowHtml
选项设置为 true
。
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。