可视化:表

概览

可以排序和分页的表。 表单元格的格式可以使用格式字符串,也可以通过直接插入 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 表中的行/列。每一列都必须具有相同的数据类型,并且支持所有标准可视化数据类型(字符串、布尔值、数字等)。

自定义属性

您可以使用 DataTablesetProperty() 方法将以下自定义属性分配给数据表元素。

物业名称 应用对象 说明
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 样式。支持以下属性名称:

  • headerRow - 为表标题行(<tr> 元素)分配类名称。
  • tableRow - 为非标题行(<tr> 元素)分配类名称。
  • oddTableRow - 为奇数行分配类名称(<tr> 元素)。注意:交替 RowStyle 选项必须设置为 true。
  • selectedTableRow - 为所选表格行(<tr> 元素)分配类名称。
  • hoverTableRow - 为悬停表格行(<tr> 元素)分配类名称。
  • headerCell - 为类行中的所有单元格指定类名(<td> 元素)。
  • tableCell - 为所有非标题表单元格(<td> 元素)分配类名称。
  • rowNumberCell - 为行号列中的单元格(<td> 元素)指定类名称。注意:showRowNumber 选项必须设置为 true。

示例 var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

注意:在 CSS 中,有些元素会替换其他元素。例如,如果您为 <tr> 元素和 <td> 元素指定了背景颜色,那么后者的优先级高于前者。请务必在 cssClassNames 中指定所有相关的 CSS 样式,以避免冲突。

Type:对象
默认:null
第一个行号

dataTable 中第一行的行号。仅在 showRowNumber 为 true 时使用。

类型:数字
默认:1
冻结列

左侧将冻结的列数。水平滚动其余列时,这些列仍会保留。如果 showRowNumberfalse,则将 frozenColumns 设置为 0 将等同于设置为 null,但如果 showRowNumber 设置为 true,则行号列将会冻结。

类型:数字
默认:null
高度

用于设置可视化图表的容器元素的高度。您可以使用标准 HTML 单位(例如“100px”、“80em”、“60”)。如果未指定单位,则假定编号为像素。如果未指定,浏览器会自动调整高度以适应表格,同时在流程中尽可能缩减尺寸;如果设置的高度小于要求的高度,表格将添加一个垂直滚动条(标题行也已冻结)。如果设置为“100%”,该表将尽可能地展开为容器元素。

类型:字符串
默认:自动
网页

是否以及如何为数据启用分页。选择以下字符串值之一:

  • “enable”- 表格中将包含前进和后退按钮。点击这些按钮将执行分页操作,并更改显示的页面。您可能还需要设置 pageSize 选项。
  • “event”- 该表将包含前进和后退按钮,但点击它们会触发“page”事件,且不会更改所显示的页面。当代码实现自己的页面翻转逻辑时,应使用此选项。如需查看有关如何手动处理分页事件的示例,请参阅 TableQuery 封装容器示例
  • “disable”- [默认] 不支持 Paging。
  • 类型:字符串
    默认:“停用”
pageSize

每个页面的行数(使用页面选项启用分页时)。

类型:数字
默认:10
Paging 按钮

为分页按钮设置指定选项。相关选项如下所示:

  • “two”- 启用“上一个”和“下一个”按钮
  • “prev”- 仅“上一个”按钮已启用
  • “next”- 仅启用了“Next”按钮
  • “auto”- 根据当前页面启用按钮。第一页上仅显示了下一页。最后一页仅显示上一页。否则,会同时启用两者。
  • number - 要显示的分页按钮数量。此显式数字将替换根据 pageSize 计算出的值。
类型:字符串或数字
默认:自动
表格

通过颠倒表格的列顺序,添加对从右到左的语言(例如阿拉伯语或希伯来语)的基本支持,使第 0 列为最右列,最后一列为最左列。这不会影响底层数据中的列索引,仅影响显示顺序。表格选项不支持完整的双向 (BiDi) 语言显示。如果您启用分页(使用页面选项),或者表具有滚动条(因为您指定的高度和宽度选项小于所需的表大小),此选项将被忽略。

类型:布尔值
默认:false
scrollLeftStartPosition

如果表具有水平滚动条,因为您已设置宽度属性,请设置水平滚动位置(以像素为单位)。表格将在最左边的列中经过许多像素的滚动。

类型:数字
默认:0
显示行号

如果设置为 true,则将行号显示为表格的第一列。

类型:布尔值
默认:false
sort

当用户点击列标题时,是否以及如何对列进行排序。如果启用了排序功能,请考虑同时设置 sortAscending 和 sortColumn 属性。请选择以下字符串值之一:

  • “enable”- [默认] 用户可以点击列标题,按点击的列进行排序。当用户点击列标题时,系统会自动对行进行排序,并触发“sort”事件。
  • “event”- 当用户点击列标题时,将会触发“sort”事件,但系统不会自动对行进行排序。当页面实现自己的排序时,应使用此选项。如需查看有关如何手动处理事件的示例,请参阅 TableQuery 封装容器示例
  • “disable”- 点击列标题不会产生任何影响。
类型:字符串
默认:“启用”
升序排序

初始排序列的排序顺序。true 表示升序,false 表示降序。如果未指定 sortColumn,系统会忽略此参数。

类型:布尔值
默认:true
排序列

数据表中列的起始索引,该表最初的排序依据。此列将标有一个小箭头来指示排序顺序。

类型:数字
默认:-1
起始页

要显示的第一个表格页面。仅当 page 处于模式启用/事件时使用。

类型:数字
默认:0
width

用于设置可视化图表的容器元素的宽度。您可以使用标准 HTML 单位(例如“100px”、“80em”、“60”)。如果未指定单位,则假定编号为像素。如果未指定,浏览器会自动调整宽度以适应表格宽度;在此过程中,系统会尽可能缩小地图;如果设置的宽度小于要求的宽度,表格将添加一个水平滚动条。如果设置为“100%”,该表将尽可能地展开为容器元素。

类型:字符串
默认:自动

方法

方法
draw(data, options)

绘制表格。

返回值类型:无
getSelection()

标准 getSelection 实现。选择元素都是行元素。可以返回多个选定的行。无论用户如何进行互动(排序、分页等),选择对象中的行索引都会引用原始数据表。

请注意,切换选择:首次点击某个单元格时选中该单元格;再次点击该单元格即可取消选择单元格,这会导致选择事件,但在检索到的选择对象中没有任何选定项。

返回值类型:一组选择元素
getSortInfo()

调用此方法可以检索有关已排序的表的当前排序状态的信息(通常是由已点击列标题的用户按特定列对行进行排序)。如果您已停用排序,此方法将不起作用。

如果您尚未在代码中对数据进行排序,或者用户尚未通过选择代码对数据进行排序,则将返回默认排序值。

返回值类型:具有以下属性的对象:
  • column -(数字)对表格排序所依据的列的索引。
  • ascending -(如果升序排序,则为 true)如果降序排序,则为 false。
  • sortedIndexes -(数字数组)数字数组,其中数组中的索引是已排序的行号(在可见表中),值是该行在底层(未排序)数据表中的索引。
setSelection(selection)

标准 setSelection() 实现,但只能选择整行或多行。无论任何用户互动(排序、分页等),选择对象中的行索引都会引用原始数据表。

返回值类型:无
clearChart()

清除该图表,并释放其分配的所有资源。

返回值类型:无

事件

名称
select

标准选择事件,但只能选择整行。

属性:无
网页

当用户点击页面导航按钮时触发。

属性page:数字。要转到的页面的索引。
sort

当用户点击列标题且排序选项不是“停用”时即会触发。

属性:具有以下属性的对象:
  • column -(数字)对表格排序所依据的列的索引。
  • ascending -(如果升序排序,则为 true)如果降序排序,则为 false。
  • sortedIndexes -(数字数组)数字数组,其中该数组中的索引是已排序的行号(在可见表中),值是该行在底层(未排序)数据表中的索引。
准备就绪

此图表已准备好进行外部方法调用。如果您想与图表互动,并在绘制后调用方法,则应在调用绘制方法之前为此事件设置监听器,并仅在事件触发后调用它们。

属性:无

格式化程序

注意:表的可视化结果有一组格式化程序对象,已被通用格式化程序所取代,这些行为方式相同,但可用于任何可视化操作。

下表显示了旧版表格式化程序及其等效的通用格式化程序。在编写新代码时,您应使用通用格式设置工具。

表格式设置工具
表格式 google.visualization.ArrowFormat
表格式 google.visualization.BarFormat
表颜色格式 google.visualization.ColorFormat
表日期格式 google.visualization.DateFormat
表格式 google.visualization.NumberFormat
表格式 google.visualization.PatternFormat

重要提示:格式化程序通常使用 HTML 设置文本格式,因此应将 allowHtml 选项设置为 true

数据政策

所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。