概览
可以排序和分页的表。 表格单元格可以使用格式字符串设置格式，或直接将 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 样式分配给单个单元格。 |
| 样式 | 手机 | 要内嵌到单元格中的样式字符串。这会替换应用于该单元格的 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
|
| alternatingRowStyle |
确定是否将交替颜色样式分配给奇数行和偶数行。 类型：布尔值
默认值：true
|
| cssClassNames |
一个对象，其中每个属性名称都描述了一个表格元素，属性值是一个字符串，用于定义要分配给该表格元素的类。可以使用此属性为表格中的特定元素分配自定义 CSS。如需使用此属性，请分配一个对象，其中属性名称会指定表元素，属性值会是字符串，同时指定要分配给该元素的类名称。然后，您必须为网页上的该类定义 CSS 样式。支持以下属性名称：
示例：
注意：在 CSS 中，有些元素会替换其他元素。例如，如果您为 类型：object
默认值：null
|
| firstRowNumber |
dataTable 中第一行的行号。仅在 showRowNumber 为 true 时使用。 类型：数字
默认值：1
|
| frozenColumns |
左侧将冻结的列数。水平滚动其余列时，这些列将保留在原位。如果 类型：数字
默认值：null
|
| 高度 |
设置可视化图表容器元素的高度。您可以使用标准 HTML 单元（例如“100px”“80em”“60”）。如果未指定单位，则假定数字为像素。如果未指定，浏览器将自动调整高度以适应表格，在此过程中会尽可能地缩小；如果设置的高度小于所需的高度，表格将添加一个垂直滚动条（标题行也会冻结）。如果设置为“100%”，则该表会尽可能扩展到容器元素中。 类型：字符串
默认：自动
|
| 网页 |
是否以及如何启用数据分页。从下列字符串值中选择一个：
类型：字符串
默认：“disable”
|
| pageSize |
使用页面选项启用分页时，每页的行数。 类型：数字
默认值：10
|
| pagingButtons |
设置分页按钮的指定选项。相关选项如下所示：
类型：字符串或数字
默认：“auto”
|
| rtlTable |
通过反转表的列顺序，添加对从右到左书写的语言（例如阿拉伯语或希伯来语）的基本支持，使 0 列是最右边的列，最后一列是最左边的列。这不会影响底层数据中的列索引，只会影响显示顺序。即使使用此选项，表格可视化图表也不支持完全双向 (BiDi) 语言显示。如果您启用分页（使用页面选项），或者由于您指定的高度和宽度选项小于所需的表大小，表具有滚动条，则此选项将被忽略。 类型：布尔值
默认值：false
|
| scrollLeftStartPosition |
如果表格因您已设置 width 属性而具有水平滚动条，则设置水平滚动位置（以像素为单位）。表格打开后，会滚动超过最左列的像素数。 类型：数字
默认值：0
|
| showRowNumber |
如果设置为 true，则将行号显示为表的第一列。 类型：布尔值
默认值：false
|
| sort |
是否在用户点击列标题时对列进行排序以及如何排序。如果启用了排序功能，请考虑设置 orderAscending 和 SortColumn 属性。选择以下字符串值之一：
类型：字符串
默认：“enable”
|
| sortAscending |
初始排序列的排序顺序。true 表示升序，false 表示降序。如果未指定 类型：布尔值
默认值：true
|
| sortColumn |
数据表中列的索引，表的最初排序依据。该列将用指示排序顺序的小箭头进行标记。 类型：数字
默认值：-1
|
| startPage |
要显示的第一个表格页面。仅在 类型：数字
默认值：0
|
| 宽度 |
设置可视化图表容器元素的宽度。您可以使用标准 HTML 单元（例如“100px”“80em”“60”）。如果未指定单位，则假定数字为像素。如果未指定，浏览器将自动调整宽度以适应表格，在此过程中会尽可能缩小宽度；如果设置的宽度小于要求的宽度，表格将添加一个水平滚动条。如果设置为“100%”，则该表会尽可能地扩展到容器元素中。 类型：字符串
默认：自动
|
方法
| 方法 | |
|---|---|
draw(data, options) |
绘制表。 Return Type（返回类型）：none
|
getSelection() |
标准 getSelection 实现。选择元素均为行元素。可以返回多个选定的行。无论用户互动（排序、分页等）如何，选择对象中的行索引都会引用原始数据表。 请注意，选择状态会切换：首次点击某个单元格时，系统会将其选中；再次点击该单元格会取消选择该单元格，因此会生成选择事件，但检索到的选择对象中没有任何已选项。 返回类型：选择元素数组
|
getSortInfo() |
调用此方法可以检索已排序的表的当前排序状态的相关信息（通常是由用户点击列标题按特定列对行进行排序的用户）。如果您已停用排序，此方法将不起作用。 如果您尚未在代码中对数据进行排序，或者用户未通过选择代码对数据进行排序，则返回默认排序值。 返回值类型：具有以下属性的对象：
|
setSelection(selection) |
标准 Return Type（返回类型）：none
|
clearChart() |
清除图表，并释放为其分配的所有资源。 Return Type（返回类型）：none
|
事件
| 名称 | |
|---|---|
| select |
标准选择事件，但只能选择整行。 属性：无
|
| 网页 |
当用户点击网页导航按钮时触发。 属性：
page：数字。要导航到的网页的索引。 |
| sort |
当用户点击列标题且排序选项不是“停用”时即会触发。 属性：具有以下属性的对象：
|
| 准备就绪 |
该图表已准备好进行外部方法调用。如果您想与图表交互，并在绘制图表后调用相应方法，则应在调用绘制方法之前为该事件设置监听器，并且仅在事件触发后调用监听器。 属性：无
|
格式设置工具
注意 ：表格可视化图表包含一组已被通用格式设置工具取代的格式化程序对象，其行为方式相同，但可用于任何可视化图表。
下表显示了旧版表格式设置工具及其等效的通用格式设置工具。在编写新代码时，您应该使用通用格式设置工具。
| 表格格式设置工具 | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
重要提示：格式设置工具通常使用 HTML 来设置其文本格式；因此，您应将 allowHtml 选项设置为 true。
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。