Google 可视化 API 参考

本页面列出了 Google Visualization API 提供的对象，以及所有可视化图表提供的标准方法。

注意：Google Visualization API 命名空间为 google.visualization.*

  1. DataTable 类
  2. DataView 类
  3. ChartWrapper 类
  4. ChartEditor 类
  5. 数据操纵方法
    1. <群组>
    2. join()
  6. 格式化程序
    1. ArrowFormat
    2. BarFormat
    3. ColorFormat
    4. DateFormat
    5. NumberFormat
    6. PatternFormat
  7. 小工具辅助类
  8. 查询类
    1. 查询
    2. QueryResponse
  9. 错误显示类
  10. 事件
    1. google.visualization.events.addListener()
    2. google.visualization.events.addOneTimeListener()
    3. google.visualization.events.removeListener()
    4. google.visualization.events.removeAllListeners()
    5. google.visualization.events.trigger()
  11. 标准可视化方法和属性
    1. 构造函数
    2. draw()
    3. getAction()
    4. getSelection()
    5. removeAction()
    6. setAction()
    7. setSelection()
  12. 各种静态方法
    1. arrayToDataTable()
    2. drawChart()
    3. drawToolbar()

数组注意事项

某些浏览器无法正确处理 JavaScript 数组中的尾随逗号，因此不要使用。即使数组中间的值为空，也没关系。例如：

data = ['a','b','c', ,]; // BAD
data = ['a','b','c'];   // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.

DataTable 类

表示可变的二维值表。如需创建 DataTable 的只读副本（可选择过滤以显示特定值、行或列），请创建 DataView。

每一列都分配有一个数据类型，以及多个可选属性，包括 ID、标签和模式字符串。

此外，您还可以将自定义属性（名称/值对）分配给任何单元格、行、列或整个表格。有些可视化图表支持特定的自定义属性；例如，表格可视化图表支持一个名为“style”的单元格属性，该属性允许您将内嵌 CSS 样式字符串分配给呈现的表格单元格。可视化图表应在其文档中描述其支持的任何自定义属性。

另请参阅：QueryResponse.getDataTable

构造函数

语法

DataTable(opt_data, opt_version)

opt_data
[可选] 用于初始化表的数据。这可以是通过对已填充的表调用 DataTable.toJSON() 返回的 JSON，也可以是包含用于初始化表的数据的 JavaScript 对象。此处介绍了 JavaScript 字面量对象的结构。如果未提供此参数，则返回一个新的空数据表。
opt_version
[可选] 一个数值，用于指定所用 Wire 协议的版本。仅供图表工具数据源实现者使用。当前版本为 0.6。

详细信息

DataTable 对象用于保存传入可视化图表的数据。DataTable 是一个基本的二维表。每一列中的所有数据都必须具有相同的数据类型。每一列都有一个描述符，其中包含其数据类型、该列的标签（可能由可视化图表显示）和一个 ID，可用于引用特定列（作为使用列索引的替代方案）。DataTable 对象还支持对分配给特定值、行、列或整个 DataTable 的任意属性进行映射。可视化图表可以使用这些属性来支持其他功能；例如，表格可视化图表就使用自定义属性，让您能够为各个单元格分配任意类名称或样式。

表中的每个单元格都包含一个值。单元格可以具有 null 值，也可以具有其列指定的类型的值。单元格可以有选择地接受数据的“格式化”版本；这是数据的字符串版本，其格式设置适合可视化显示。 可视化可以（但并非必须）使用格式化版本进行显示，但始终使用数据本身执行任何排序或计算（例如确定图表上的点放置位置）。例如，可以将“low”“medium”和“high”作为格式值分配给数字单元格值 1、2 和 3。

如需在调用构造函数后添加数据行，您可以对单行调用 addRow()，或对多行调用 addRows()。您还可以通过调用 addColumn() 方法来添加列。也有适用于行和列的移除方法，但建议您创建一个 DataView，它是 DataTable 的选择性视图，而不是移除行或列。

在将 DataTable 的值传递到可视化图表的 draw() 方法后，如果您对其进行了更改，相应更改不会立即更改图表。您必须再次调用 draw() 才能反映任何更改。

注意：Google 图表不会对数据表执行任何验证。（否则，图表的呈现速度会变慢。）如果您在列需要字符串的地方提供了一个数字（或者正好相反），Google 图表会尽最大努力以合理的方式解读该值，但不会标记错误。

示例

以下示例演示了如何使用字面量字符串实例化和填充 DataTable，所使用的数据与上面的 JavaScript 示例中所示： 

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

以下示例将创建一个新的空 DataTable，然后使用与上面相同的数据手动填充它： 

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);
我应该使用 JavaScript 还是对象字面量表示法创建 DataTable？

您可以通过以下方式创建 DataTable：调用不带形参的构造函数，然后通过调用下面列出的 addColumn()/addRows() 方法来添加值，或者传入已填充的 JavaScript 字面量对象对其进行初始化。下文介绍了这两种方法。您应该使用哪一个？

  • 通过调用 addColumn()、addRow() 和 addRows() 使用 JavaScript 创建和填充表是非常可读的代码。如果您要手动输入验证码，此方法会很有用。它比使用对象字面量表示法（如下文所述）慢，但在较小的表格（例如 1000 个单元格）中，您可能不会注意到太大区别。
  • 在大型表中，使用对象字面量表示法直接声明 DataTable 对象要快得多。不过，要正确使用语法可能会有些棘手；如果您可以在代码中生成对象字面量语法（降低出错的可能性），请使用这种语法。

 

方法

方法 返回值 说明

addColumn(type, opt_label, opt_id)

或

addColumn(description_object)

 数字

向数据表添加新列，并返回新列的索引。系统会为新列的所有单元格分配一个 null 值。此方法有两个签名：

第一个签名具有以下参数：

  • type - 一个字符串，具有列的值的数据类型。类型可以是以下其中一项：'string', 'number', 'boolean', 'date', 'datetime', 和 'timeofday'.
  • opt_label - [可选] 带有列标签的字符串。列标签通常显示为可视化图表的一部分，例如作为表格中的列标题，或饼图中的图例标签。如果未指定值，则分配空字符串。
  • opt_id - [可选] 一个字符串，其中包含列的唯一标识符。如果未指定值，则分配空字符串。

第二个签名有一个包含以下成员的对象参数：

  • type - 描述列数据类型的字符串。值与上面的 type 相同。
  • label - [可选，字符串] 列的标签。
  • id - [可选，字符串] 列的 ID。
  • role - [可选，字符串] 列的角色。
  • pattern - [可选，字符串] 一个数字（或日期）格式字符串，用于指定列值的显示方式。

另请参阅：getColumnId、getColumnLabel、getColumnType、insertColumn、getColumnRole

addRow(opt_cellArray) 数字

向数据表中添加一个新行，并返回新行的索引。

  • opt_cellArray [可选] 一个行对象，采用 JavaScript 表示法，用于指定新行的数据。如果未添加此参数，此方法只会在表的末尾添加新的空行。此参数是单元格值的数组：如果您只想为单元格指定值，则只需给出单元格值（例如 55 或“hello”）即可；如果您要为单元格指定格式化的值和/或属性，请使用单元格对象（例如，{v:55, f:'Fifty-five'}）。您可以在同一方法调用中混合使用简单值和单元格对象）。对于空单元格，请使用 null 或空数组条目。

示例：

data.addRow();  // Add an empty row
data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value.

// Add a row with two cells, the second with a formatted value.
data.addRow(['Hermione', {v: new Date(1999,0,1),
                          f: 'January First, Nineteen ninety-nine'}
]);

data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined.
data.addRow(['Col1Val', , 'Col3Val']);     // Same as previous.
addRows(numOrArray) 数字

向数据表中添加新行，并返回最后添加的行的索引。您可以调用此方法来创建新的空行，或者通过用于填充行的数据来创建新的空行，如下所述。

  • numOrArray - 数字或数组：
    • 数字 - 一个数字，用于指定要添加的未填充新行的数量。
    • Array - 用于填充一组新行的 row 对象数组。每一行都是一个对象，如 addRow() 中所述。对于空单元格，请使用 null 或空数组条目。

示例：

data.addRows([
  ['Ivan', new Date(1977,2,28)],
  ['Igor', new Date(1962,7,5)],
  ['Felix', new Date(1983,11,17)],
  ['Bob', null] // No date set for Bob.
]);

另请参阅：insertRows
clone() DataTable 返回数据表的克隆。结果是数据表的深层副本，但单元格属性、行属性、表属性和列属性（这些为浅副本）除外；这意味着非基元属性是通过引用复制的，但原始属性是通过值复制的。
getColumnId(columnIndex) 字符串 返回由底层表中的列索引指定的指定列的标识符。
对于通过查询检索的数据表，列标识符由数据源设置，可在使用查询语言时用于引用列。
另请参阅：Query.setQuery
getColumnIndex(columnIdentifier) String、Number 如果表中存在由列索引、ID 或标签指定的指定列，则返回该列，否则返回 -1。当 columnIdentifier 是字符串时，它用于首先按列 ID 查找列，然后按标签查找列。
另请参阅：getColumnId、getColumnLabel
getColumnLabel(columnIndex) 字符串 返回由底层表中的列索引指定的指定列的标签。
列标签通常作为可视化图表的一部分显示。例如，列标签可显示为表格中的列标题，或在饼图中显示为图例标签。
对于通过查询检索的数据表，列标签由数据源或查询语言的 label 子句设置。
另请参阅：setColumnLabel
getColumnPattern(columnIndex) 字符串

返回用于设置指定列值的格式的格式模式。

  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。

对于通过查询检索的数据表，列模式由数据源或查询语言的 format 子句设置。模式的一个示例为 '#,##0.00'。如需详细了解模式，请参阅查询语言参考文档。

getColumnProperties(columnIndex) 对象

返回指定列的所有属性的映射。请注意，属性对象是通过引用返回的，因此更改检索到的对象中的值也会更改 DataTable 中的值。

  • columnIndex 是要检索其属性的列的数字索引。
getColumnProperty(columnIndex, name) 自动选择

返回命名属性的值，如果未为指定列设置此类属性，则返回 null。返回值类型因属性而异。

  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。
  • name 是属性名称，以字符串表示。

另请参阅：setColumnProperty setColumnProperties

getColumnRange(columnIndex) 对象

返回指定列中值的最小值和最大值。返回的对象具有 min 和 max 属性。如果此范围没有值，则 min 和 max 将包含 null。

columnIndex 应该是一个大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。
getColumnRole(columnIndex) 字符串 返回指定列的角色。
getColumnType(columnIndex) 字符串

返回由列索引指定的给定列的类型。

  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。

返回的列类型可以是下列之一：'string', 'number', 'boolean', 'date', 'datetime', 和 'timeofday'

getDistinctValues(columnIndex) 对象数组

按升序返回特定列中的唯一值。

  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。

返回对象的类型与 getValue 方法返回的类型相同。

getFilteredRows(filters) 对象数组

返回符合所有指定过滤条件的行的行索引。索引按升序返回。此方法的输出可用作 DataView.setRows() 的输入，以更改可视化图表中显示的行集。

filters - 一组对象，用于描述可接受的单元格值。如果行索引与所有指定过滤条件匹配，则此方法会返回该行索引。每个过滤条件都是一个具有数字 column 属性的对象，该属性指定了要评估的行中的列的索引，并且还包含以下某项：

  • value 属性，其值必须与指定列中的单元格完全匹配。该值必须与相应列的类型相同；或者
  • 以下一个或两个属性（与要过滤的列的类型相同）：
    • minValue - 单元格的最小值。指定列中的单元格值必须大于或等于此值。
    • maxValue - 单元格的最大值。指定列中的单元格值必须小于或等于此值。
    minValue（或 maxValue）的 null 或未定义值表示不强制执行范围的下限（或上限）。

另一个可选属性 test 用于指定要与值或范围过滤结合使用的函数。系统会通过单元格值、行和列索引以及数据表调用该函数。如果应从结果中排除相应行，它应返回 false。

示例：getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}]) 返回一个数组，其中包含按升序排列的所有行的索引，其中第四列（列索引 3）为 42，第三列（列索引 2）介于“bar”和“foo”（含）之间。
getFormattedValue(rowIndex, columnIndex) 字符串

返回指定行和列索引处的单元格格式化值。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • ColumnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。

如需详细了解如何设置列值的格式，请参阅查询语言参考文档。

另请参阅：setFormattedValue
getNumberOfColumns() 数字 返回表中的列数。
getNumberOfRows() 数字 返回表中的行数。
getProperties(rowIndex, columnIndex) 对象

返回指定单元格所有属性的映射。请注意，属性对象是通过引用返回的，因此更改检索到的对象中的值也会更改 DataTable 中的值。

  • rowIndex 是单元格的行索引。
  • columnIndex 是单元格的列索引。
getProperty(rowIndex, columnIndex, name) 自动选择

返回命名属性的值，如果未为指定单元格设置此类属性，则返回 null。返回值类型因属性而异。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。
  • name 是一个具有属性名称的字符串。

另请参阅：setCell setProperties setProperty

getRowProperties(rowIndex) 对象

返回指定行的所有属性的映射。请注意，属性对象是通过引用返回的，因此更改检索到的对象中的值也会更改 DataTable 中的值。

  • rowIndex 是要检索其属性的行的索引。
getRowProperty(rowIndex, name) 自动选择

返回命名属性的值，如果未为指定行设置此类属性，则返回 null。返回值类型因属性而异。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • name 是一个具有属性名称的字符串。

另请参阅：setRowProperty setRowProperties

getSortedRows(sortColumns) 数字数组

返回表的排序版本，而不修改底层数据的顺序。 如需对底层数据进行永久排序，请调用 sort()。您可以通过多种方式指定排序方式，具体取决于您传递到 sortColumns 参数的类型：

  • 单个数字指定要作为排序依据的列的索引。将按升序排序。示例：sortColumns(3) 将按第 4 列升序排序。
  • 单个对象，包含要排序的列索引编号和一个可选的布尔值属性 desc。如果 desc 设置为 true，特定列将按降序排序；否则，按升序排序。示例：sortColumns({column: 3}) 将按第 4 列升序排序；sortColumns({column: 3, desc: true}) 将按第 4 列降序排序。
  • 要排序的列索引的一个数字数组。第一个数字是排序依据的主列，第二个数字是辅助列，依此类推。这意味着当第一列中的两个值相等时，会比较第二列中的值，依此类推。示例：sortColumns([3, 1, 6]) 将先按第 4 列（升序）、按第 2 列（升序）、按第 7 列（升序）排序。
  • 一个对象数组，每个对象都有一个要排序的列索引编号和一个可选的布尔值属性 desc。如果 desc 设置为 true，特定列将按降序排序（默认为升序）。第一个对象是排序依据的主列，第二个对象是辅助列，依此类推。这意味着当第一列中的两个值相等时，会比较第二列中的值，依此类推。示例：sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) 将先按第 4 列排序（升序），然后按第 2 列降序排序，最后按第 7 列降序排序。

返回值是一个数字数组，每个数字都是一个 DataTable 行的索引。按照返回数组的顺序对 DataTable 行进行迭代会导致行按指定的 sortColumns 排序。输出结果可用作 DataView.setRows() 的输入，以快速更改可视化图表中显示的行集。

请注意，排序保证是稳定的：这意味着如果对两行的值相等进行排序，同一排序方式每次都会以相同的顺序返回这些行。
另请参阅：排序

示例：如需迭代按第三列排序的行，请使用以下命令：

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}
getTableProperties 对象 返回表的所有属性的映射。
getTableProperty(name) 自动选择

返回命名属性的值，如果未为表设置此类属性，则返回 null。返回值类型因属性而异。

  • name 是一个具有属性名称的字符串。

另请参阅：setTableProperties setTableProperty

getValue(rowIndex, columnIndex) 对象

返回指定行和列索引处的单元格值。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。

返回值的类型取决于列类型（请参阅 getColumnType）：

  • 如果列类型为“字符串”，则值是字符串。
  • 如果列类型为“数字”，则值为数字。
  • 如果列类型为“布尔值”，则值是一个布尔值。
  • 如果列类型为“日期”或“日期时间”，则值是日期对象。
  • 如果列类型为“timeofday”，则值是一个包含四个数字的数组：[小时、分钟、秒、毫秒]。
  • 如果单元值为 null 值，则返回 null。
insertColumn(columnIndex, type [,label [,id]]) 无

在指定索引处向数据表插入一个新列。位于指定索引处或之后的所有现有列都将转为更高索引。

  • columnIndex 是一个数字，包含新列的必需索引。
  • type 应该是列的值数据类型的字符串。类型可以是以下某项：'string', 'number', 'boolean', 'date', 'datetime', 和 'timeofday'.
  • label 应该是带有列标签的字符串。列标签通常作为可视化图表的一部分显示，例如作为表格中的列标题，或饼图中的图例标签。如果未指定值，则分配空字符串。
  • id 应该是包含列唯一标识符的字符串。如果未指定值，则分配空字符串。

另请参阅：addColumn
insertRows(rowIndex, numberOrArray) 无

在指定行索引处插入指定数量的行数。

  • rowIndex 是插入新行的索引编号。系统将添加从指定索引编号开始的行。
  • numberOrArray 是要添加的大量新空行，或者是在索引处添加的一个或多个已填充行的数组。如需了解添加行对象数组的语法，请参阅 addRows()。

另请参阅：addRows
removeColumn(columnIndex) 无

移除指定索引处的列。

  • columnIndex 应为具有有效列索引的数字。

另请参阅：removeColumns
removeColumns(columnIndex, numberOfColumns) 无

从指定索引处的列开始移除指定数量的列。

  • numberOfColumns 是要移除的列数。
  • columnIndex 应为具有有效列索引的数字。

另请参阅：removeColumn
removeRow(rowIndex) 无

移除指定索引处的行。

  • rowIndex 应为具有有效行索引的数字。

另请参阅：removeRows
removeRows(rowIndex, numberOfRows) 无

移除从指定索引处的行开始的指定行数。

  • numberOfRows 是要移除的行数。
  • rowIndex 应为具有有效行索引的数字。

另请参阅：removeRow
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]]) 无

设置单元格的值、设置了格式的值和/或属性。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。
  • value [可选] 是分配给指定单元格的值。为避免覆盖此值，请将此参数设置为 undefined；要清除此值，请将其设为 null。值的类型取决于列类型（请参阅 getColumnType()）：
    • 如果列类型为“字符串”，则值应为字符串。
    • 如果列类型为“数字”，则值应为数字。
    • 如果列类型为“布尔值”，则值应为布尔值。
    • 如果列类型为“日期”或“日期时间”，则值应为 Date 对象。
    • 如果列类型为“timeofday”，则值应为包含四个数字的数组：[小时、分钟、秒、毫秒]。
  • formattedValue [可选] 是一个字符串，其值格式为字符串。为避免覆盖此值，请将此参数设置为 undefined；如需清除此值并让 API 根据需要对 value 应用默认格式，请将其设为 null；如需明确设置采用空格式的值，请设置空字符串。可视化图表通常使用设置了格式的值来显示值标签。例如，设置了格式的值可以显示为饼图中的标签文本。
  • properties [可选] 是具有此单元格的其他属性的 Object（名称/值映射）。为避免覆盖此值，请将此参数设置为 undefined；如需清除此值，请将其设为 null。 某些可视化图表支持修改行、列或单元格属性来修改其显示或行为；请参阅可视化图表文档，了解支持的属性。

另请参阅：setValue()、setFormattedValue()、setProperty()、setProperties()。

setColumnLabel(columnIndex, label) 无

设置列的标签。

  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。
  • label 是一个字符串，带有要分配给该列的标签。列标签通常作为可视化图表的一部分显示。例如，列标签可显示为表格中的列标题，或在饼图中显示为图例标签。

另请参阅：getColumnLabel
setColumnProperty(columnIndex, name, value) 无

设置单个列属性。某些可视化图表支持通过行、列或单元格属性来修改其显示或行为；请参阅可视化图表文档，了解支持的属性。

  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。
  • name 是一个具有属性名称的字符串。
  • value 是可以分配给指定列的指定命名属性的任意类型值。

另请参阅：setColumnProperties getColumnProperty

setColumnProperties(columnIndex, properties) 无

设置多个列属性。某些可视化图表支持通过行、列或单元格属性来修改其显示或行为；请参阅可视化图表文档，了解支持的属性。

  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。
  • properties 是具有此列的其他属性的 Object（名称/值映射）。如果指定了 null，则该列的所有其他属性都将被移除。

另请参阅：setColumnProperty getColumnProperty

setFormattedValue(rowIndex, columnIndex, formattedValue) 无

设置单元格的格式值。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。
  • formattedValue 是一个字符串，其值采用适合显示的格式。如需清除此值并让 API 根据需要对单元格值应用默认格式，请将其设置为 formattedValue null；如需明确设置采用空格式的值，请将其设置为空字符串。

另请参阅：getFormattedValue
setProperty(rowIndex, columnIndex, name, value) 无

设置单元格属性。某些可视化图表支持修改行、列或单元格属性来修改其显示或行为；请参阅可视化图表文档，了解支持的属性。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。
  • name 是一个具有属性名称的字符串。
  • value 是可以分配给指定单元格的指定命名属性的任意类型值。

另请参阅：setCell setProperties getProperty

setProperties(rowIndex, columnIndex, properties) 无

设置多个单元格属性。某些可视化图表支持通过行、列或单元格属性来修改其显示或行为；请参阅可视化图表文档，了解支持的属性。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • columnIndex 应为大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。
  • properties 是具有此单元的其他属性的 Object（名称/值映射）。如果指定了 null，相应单元格的所有其他属性都将被移除。

另请参阅：setCell setProperty getProperty

setRowProperty(rowIndex, name, value) 无

设置行属性。某些可视化图表支持修改行、列或单元格属性来修改其显示或行为；请参阅可视化图表文档，了解支持的属性。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • name 是一个具有属性名称的字符串。
  • value 是可以分配给指定行的指定命名属性的任意类型值。

另请参阅：setRowProperties getRowProperty

setRowProperties(rowIndex, properties) 无

设置多个行属性。某些可视化图表支持通过行、列或单元格属性来修改其显示或行为；请参阅可视化图表文档，了解支持的属性。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • properties 是具有此行其他属性的 Object（名称/值映射）。如果指定了 null，则该行的所有其他属性都将被移除。

另请参阅：setRowProperty getRowProperty

setTableProperty(name, value) 无

设置单个表属性。某些可视化图表支持修改表、行、列或单元格属性来修改其显示或行为；请参阅可视化图表文档，了解支持的属性。

  • name 是一个具有属性名称的字符串。
  • value 是要分配给表的指定命名属性的任何类型的值。

另请参阅：setTableProperties getTableProperty

setTableProperties(properties) 无

设置多个表格属性。某些可视化图表支持修改表、行、列或单元格属性来修改其显示或行为；请参阅可视化图表文档，了解支持的属性。

  • properties 是具有表的其他属性的 Object（名称/值映射）。如果指定了 null，则该表的所有其他属性都将被移除。

另请参阅：setTableProperty getTableProperty

setValue(rowIndex, columnIndex, value) 无

设置单元格的值。除了覆盖任何现有的单元格值之外，此方法还会清除单元格的所有格式化值和属性。

  • rowIndex 应该是大于或等于零的数字，并且小于 getNumberOfRows() 方法返回的行数。
  • columnIndex 应该是一个大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。您无法使用此方法为此单元格设置设置了格式的值；为此，请调用 setFormattedValue()。
  • value 是分配给指定单元格的值。返回值的类型取决于列类型（请参阅 getColumnType）：
    • 如果列类型为“字符串”，则值应为字符串。
    • 如果列类型为“数字”，则值应为数字。
    • 如果列类型为“布尔值”，则值应为布尔值。
    • 如果列类型为“日期”或“日期时间”，则值应为 Date 对象。
    • 如果列类型为“timeofday”，则值应为包含四个数字的数组：[小时、分钟、秒、毫秒]。
    • 对于任何列类型，都可以将该值设置为 null。

另请参阅：setCell、setFormattedValue、 setProperty、setProperties

sort(sortColumns) 无 根据指定的排序列对行进行排序。此方法会修改 DataTable。有关排序详情的说明，请参阅 getSortedRows()。此方法不会返回排序后的数据。
另请参阅：getSortedRows
示例：如需先按第三列排序，然后再按第二列排序，请使用：data.sort([{column: 2}, {column: 1}]);
toJSON() 字符串 返回可传入 DataTable 构造函数的 DataTable 的 JSON 表示形式。例如： 
{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

构造函数的 JavaScript 字面量 data 参数的格式

您可以通过将 JavaScript 字符串字面量对象传入 data 参数来初始化 DataTable。我们将这个对象称为 data 对象。您可以根据以下说明手动编写此对象；或者，如果您知道如何使用 Python 并且您的网站可以使用该库，也可以使用辅助 Python 库。但是，如果您希望手动构造对象，本部分将介绍语法。

首先，我们来看一个简单的 JavaScript 对象示例，用来描述一个包含三行和三列（字符串、数字和日期类型）的表：

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

现在我们来描述一下语法：

data 对象包含两个必需的顶级属性（cols 和 rows）和一个可选的 p 属性（任意值的映射）。

注意：显示的所有属性名称和字符串常量都区分大小写。此外，被描述为采用字符串值的属性也应将其值括在引号中。 例如，如果您要将类型属性指定为数字，其表示方式将如下所示：type: 'number'，但值本身（数字）将表示为：v: 42

cols 属性

cols 是一个对象数组，用于说明每列的 ID 和类型。每个属性都是一个包含以下属性的对象（区分大小写）：

  • type [必需] 列中数据的数据类型。支持以下字符串值（示例包括 v: 属性，稍后将）：
    • '布尔值' - JavaScript 布尔值（“true”或“false”）。示例值： v:'true'
    • “number”- JavaScript 数值。示例值：v:7、v:3.14、v:-55
    • “string”- JavaScript 字符串值。示例值：v:'hello'
    • “date”- JavaScript 日期对象（从零开始的月份），时间被截断。示例值：v:new Date(2008, 0, 15)
    • “日期时间”- 包含时间的 JavaScript 日期对象。示例值： v:new Date(2008, 0, 15, 14, 30, 45)
    • “timeofday”- 由三个数字和一个可选的第四个数字组成的数组，表示小时（0 表示午夜）、分钟、秒和可选的毫秒。示例值：v:[8, 15, 0]、v: [6, 12, 1, 144]
  • id [可选] 列的字符串 ID。在表中必须是唯一的。请使用基本的字母数字字符，因此托管页面无需使用花哨的转义，即可通过 JavaScript 访问该列。切勿选择 JavaScript 关键字。示例： id:'col_1'
  • label [可选] 某些可视化图表为此列显示的字符串值。示例：label:'Height'
  • pattern [可选] 数据源用来设置数字、日期或时间列值格式的字符串模式。这仅供参考；您可能不需要读取该模式，该模式也不需要存在。Google 可视化客户端不会使用此值（它会读取单元格设置了格式的值）。如果 DataTable 来自数据源来响应使用 format 子句的查询，则您在该子句中指定的模式可能会在此值中返回。推荐的模式标准是 ICU DecimalFormat 和 SimpleDateFormat 。
  • p [可选] 一个对象，是应用于单元格的自定义值的映射。 这些值可以是任何 JavaScript 类型。如果您的可视化图表支持任何单元格级属性，它会描述这些属性；否则，此属性将被忽略。 示例：p:{style: 'border: 1px solid green;'}。

cols 示例

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows 属性

rows 属性包含行对象的数组。

每个行对象都有一个名为 c 的必需属性，即该行中单元格的数组。它还有一个可选的 p 属性，用于定义要分配给整行的任意自定义值的映射。如果您的可视化图表支持任何行级属性，它会描述这些属性；否则，此属性将被忽略。

单元格对象

表格中的每个单元格均由一个对象进行描述，该对象具有以下属性：

  • v [可选] 单元格值。数据类型应与列数据类型相匹配。如果该单元格为 null，v 属性应为 null，但仍可具有 f 和 p 属性。
  • f [可选] v 值的字符串版本，采用适合显示的格式。通常情况下，这些值会匹配（但不需要匹配），因此，如果您为 v 指定 Date(2008, 0, 1)，则应为此属性指定“January 1, 2008”或此类字符串。系统不会根据 v 值检查此值。可视化图表不会将此值用于计算，而只会将其用作显示的标签。如果省略，系统会使用默认格式化程序自动生成字符串版本的 v。您可以使用自己的格式设置工具修改 f 值，也可以使用 setFormattedValue() 或 setCell() 设置值，也可以使用 getFormattedValue() 检索值。
  • p [可选] 一个对象，是应用于单元格的自定义值的映射。 这些值可以是任何 JavaScript 类型。如果您的可视化图表支持任何单元格级属性，它会对这些属性进行描述。可以通过 getProperty() 和 getProperties() 方法检索这些属性。 示例：p:{style: 'border: 1px solid green;'}。

行数组中单元格的顺序应与 cols 中的列说明顺序相同。如需指示 null 单元格，您可以指定 null，将数组中的单元格留空，或省略末尾的数组成员。因此，如需针对前两个单元格指示具有 null 的行，您可以指定 [ , , {cell_val}] 或 [null, null, {cell_val}]。

下面是一个三列的示例表格对象，其中填充了三行数据：

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

p 属性

表级 p 属性是应用于整个 DataTable 的自定义值的映射。这些值可以是任何 JavaScript 类型。如果您的可视化图表支持任何数据表级属性，它会对这些属性进行描述；否则，此属性将可供应用使用。 示例：p:{className: 'myDataTable'}。

DataView 类

底层 DataTable 的只读视图。DataView 仅允许选择一部分列和/或行。它还允许对列/行进行重新排序以及复制列/行。

视图是底层 DataTable 上的实时窗口，而不是数据的静态快照。但是，在更改表本身的结构时，您仍必须小心，如下所述：

  • 在底层表中添加或移除列不会由视图反映，并且可能会导致视图中出现意外行为；您必须从 DataTable 创建新的 DataView 才能获取这些更改。
  • 在底层表中添加或移除行是安全的，并且更改会立即传播到视图中（但在此更改之后，您必须对任何可视化图表调用 draw() 才能呈现新行集）。请注意，如果您的视图通过调用 setRows() or hideRows() 方法之一过滤掉了行，则您在底层表中添加或移除行时，会出现意外行为；您必须创建新的 DataView 才能反映新表。
  • 更改现有单元格中的单元格值是安全的，并且更改会立即传播到 DataView（但在此更改后，您必须对任何可视化图表调用 draw() 才能呈现新的单元格值）。

也可以通过另一个 DataView 创建 DataView。请注意，每当提到底层表或视图时，它指的是此级别之后的级别。也就是说，它是指用于构建此 DataView 的数据对象。

DataView 还支持计算列；此类列的值是使用您提供的函数即时计算的。因此，例如，您可以添加前两个列之和的列，或者添加另一列计算和显示日期的日历季度的列。如需了解详情，请参阅 setColumns()。

如果您通过隐藏或显示行或列来修改 DataView，则在您再次对该可视化图表调用 draw() 之前，可视化图表不会受到影响。

您可以将 DataView.getFilteredRows() 与 DataView.setRows() 结合使用，以创建包含相关数据子集的 DataView，如下所示： 

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

构造函数

您可以通过以下两种方式创建新的 DataView 实例：

构造函数 1

var myView = new google.visualization.DataView(data)
data
用于初始化视图的 DataTable 或 DataView。默认情况下，视图以原始顺序包含底层数据表或视图中的所有列和行。如需在此视图中隐藏或显示行或列，请调用相应的 set...() 或 hide...() 方法。

另见：

setColumns()、hideColumns()、setRows()、hideRows()。

 

构造函数 2

此构造函数通过将序列化 DataView 分配给 DataTable 来创建新的 DataView。它可帮助您重新创建使用 DataView.toJSON() 序列化的 DataView。

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)
数据
用于创建 DataView 的 DataTable 对象，并针对该对象调用 DataView.toJSON()。如果此表与原始表不同，则会导致不可预测的结果。
viewAsJson
DataView.toJSON() 返回的 JSON 字符串。说明要在 data DataTable 中显示或隐藏哪些行。

方法

方法 返回值 说明
查看DataTable的说明。 与等效的 DataTable 方法相同，只不过行/列索引引用的是视图中的索引，而不是底层表/视图中的索引。
getTableColumnIndex(viewColumnIndex) 数字

返回由指定列在此视图中的索引指定的底层表（或视图）中的索引。viewColumnIndex 应该是一个大于或等于零且小于 getNumberOfColumns() 方法返回的列数的数字。如果这是生成的列，则返回 -1。

示例：如果之前调用了 setColumns([3, 1, 4])，则 getTableColumnIndex(2) 将返回 4。
getTableRowIndex(viewRowIndex) 数字

给定行在此视图中的索引，返回其在底层表（或视图）中的索引。viewRowIndex 应该是大于或等于零的数字，且小于 getNumberOfRows() 方法返回的行数。

示例：如果之前调用了 setRows([3, 1, 4])，则 getTableRowIndex(2) 将返回 4。
getViewColumnIndex(tableColumnIndex) 数字

返回此视图中映射到底层表（或视图）中的索引指定的指定列的索引。如果存在多个此类索引，则返回第一个（最小）。如果不存在此类索引（指定的列不在视图中），则返回 -1。 tableColumnIndex 应该是一个大于或等于零的数字，并且小于底层表/视图的 getNumberOfColumns() 方法返回的列数。

示例：如果之前调用了 setColumns([3, 1, 4])，则 getViewColumnIndex(4) 将返回 2。
getViewColumns() 数字数组

按顺序返回此视图中的列。也就是说，如果您针对某个数组调用 setColumns，然后调用 getViewColumns()，则应得到同一个数组。

getViewRowIndex(tableRowIndex) 数字

返回此视图中映射到底层表（或视图）中的索引指定的给定行的索引。如果存在多个此类索引，则返回第一个（最小）。如果不存在此类索引（指定的行不在视图中），则返回 -1。 tableRowIndex 应该是一个大于或等于零的数字，并且小于底层表/视图的 getNumberOfRows() 方法返回的行数。

示例：如果之前调用了 setRows([3, 1, 4])，则 getViewRowIndex(4) 将返回 2。
getViewRows() 数字数组

按顺序返回此视图中的行。也就是说，如果您通过某个数组调用 setRows，然后调用 getViewRows()，则应得到同一个数组。

hideColumns(columnIndexes) 无

在当前视图中隐藏指定的列。columnIndexes 是一个数字数组，表示要隐藏的列的索引。这些索引是底层表/视图中的索引编号。columnIndexes 中的数字不必是按顺序排列（也就是说，只要输入 [3,4,1] 就可以）。当您遍历其余列时，将保持它们的索引顺序。为已隐藏的列输入索引编号不会出错，但输入底层表/视图中不存在的索引会抛出错误。如需取消隐藏列，请调用 setColumns()。

示例：如果您有一个包含 10 列的表，您先调用 setColumns([2,7,1,7,9])，然后调用 hideColumns([7,9])，则该视图中的列将为 [2,1]。
hideRows(min, max) 无

隐藏当前视图中索引介于最小值和最大值（含）之间的所有行。这是上述 hideRows(rowIndexes) 的便捷语法。例如，hideRows(5, 10) 等同于 hideRows([5, 6, 7, 8, 9, 10])。

hideRows(rowIndexes) 无

在当前视图中隐藏指定的行。rowIndexes 是一个数字数组，表示要隐藏的行的索引。这些索引是底层表/视图中的索引编号。rowIndexes 中的数字不必是按顺序排列（也就是说，只要输入 [3,4,1] 就可以）。其余行将保留其索引顺序。为已隐藏的行输入索引编号不会出错，但输入底层表/视图中不存在的索引会抛出错误。如需取消隐藏行，请调用 setRows()。

示例：如果您有一个包含 10 行的表，您先调用 setRows([2,7,1,7,9])，然后调用 hideRows([7,9])，则视图中的行将是 [2,1]。
setColumns(columnIndexes) 无

指定哪些列在此视图中可见。系统将隐藏所有未指定的列。 这是底层表/视图或计算列中的列索引数组。如果您不调用此方法，则默认为显示所有列。数组也可以包含重复项，即多次显示同一列。系统将按指定的顺序显示列。

  • columnIndexes - 由数字和/或对象组成的数组（可混合）：
    • Numbers 用于指定要包含在视图中的源数据列的索引。数据未经修改。如果您需要明确定义角色或其他列属性，请使用 sourceColumn 属性指定对象。
    • 对象用于指定计算列。计算列会即时为每行创建一个值并将其添加到视图中。该对象必须具有以下属性：
      • calc [函数] - 将为列中的每一行调用的函数，以计算该单元格的值。函数签名为 func(dataTable, row)，其中 dataTable 是源 DataTable，row 是源数据行的索引。该函数应返回 type 所指定类型的单个值。
      • type [字符串] - calc 函数返回的值的 JavaScript 类型。
      • label [可选，字符串] - 要分配给此生成的列的可选标签。如果未指定，视图列将没有标签。
      • id [可选，字符串] - 要分配给此生成的列的可选 ID。
      • sourceColumn - [可选，数值] 用作值的来源列；如果指定，请勿指定 calc 或 type 属性。这类似于传入数字而不是对象，但允许您为新列指定角色和属性。
      • properties [可选，对象] - 一个对象，其中包含要分配给此列的任意属性。如果未指定，视图列将没有属性。
      • role [可选，字符串] - 要分配给此列的角色。如果未指定，则不会导入现有角色。

示例：

// Show some columns directly from the underlying data.
// Shows column 3 twice.
view.setColumns([3, 4, 3, 2]);

// Underlying table has a column specifying a value in centimeters.
// The view imports this directly, and creates a calculated column
// that converts the value into inches.
view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);
function cmToInches(dataTable, rowNum){
  return Math.floor(dataTable.getValue(rowNum, 1) / 2.54);
}
setRows(min, max) 无

将此视图中的行设置为（底层表/视图中）介于最小值和最大值（含边界值）的所有索引。这是以下 setRows(rowIndexes) 的便捷语法。例如，setRows(5, 10) 等同于 setRows([5, 6, 7, 8, 9, 10])。

setRows(rowIndexes) 无

根据底层表/视图中的索引编号设置此视图中的可见行。 rowIndexes 应该是索引号数组，用于指定要在视图中显示哪些行。数组会指定各行的显示顺序，并且行可以复制。请注意，仅显示 rowIndexes 中指定的行；此方法会清除视图中的所有其他行。数组也可以包含重复项，从而有效地复制了此视图中的指定行（例如，setRows([3, 4, 3, 2]) 将导致 3 行在此视图中出现两次）。因此，数组提供了从底层表/视图到此视图的行的映射。您可以使用 getFilteredRows() 或 getSortedRows() 为此方法生成输入。

示例：如需创建一个包含底层表/视图第 3 行和第 0 行的视图，请使用以下代码：view.setRows([3, 0])
toDataTable() DataTable 返回填充了 DataView 的可见行和列的 DataTable 对象。
toJSON() string 返回此 DataView 的字符串表示形式。该字符串不包含实际数据；它仅包含特定于 DataView 的设置，例如可见行和列。您可以存储此字符串并将其传递给静态 DataView.fromJSON() 构造函数以重新创建此视图。这不包括生成的列。

ChartWrapper 类

ChartWrapper 类用于封装图表，并处理对图表的所有加载、绘制和数据源查询。该类提供了用于在图表上设置值并绘制图表的便捷方法。此类简化了从数据源读取数据的操作，因为您无需创建查询回调处理程序。您还可以使用它轻松保存图表，以便重复使用。

使用 ChartWrapper 的另一个好处是，您可以使用动态加载来减少库加载的数量。此外，由于 ChartWrapper 会为您处理查询和加载图表软件包的操作，因此您也无需显式加载这些软件包。如需了解详情，请参阅以下示例。

不过，ChartWrapper 目前仅传播图表抛出的部分事件：select、ready 和 error。其他事件不会通过 ChartWrapper 实例进行传输；要获取其他事件，您必须直接在图表句柄上调用 getChart() 并订阅事件，如下所示： 

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

构造函数

ChartWrapper(opt_spec)
opt_spec
[可选] - 用于定义图表的 JSON 对象，或该对象的序列化字符串版本。drawChart() 文档中显示了此对象的格式。如果未指定，则必须使用此对象公开的 set... 方法设置所有适当的属性。

方法

ChartWrapper 还提供以下其他方法：

方法 返回值类型 说明
draw(opt_container_ref) 无

绘制图表。对图表或数据进行任何更改后，必须调用此方法以显示更改。

  • opt_container_ref [可选] - 对页面上有效容器元素的引用。指定后，系统会在其中绘制图表。否则，系统将在具有 containerId 所指定 ID 的元素中绘制图表。
toJSON() 字符串 返回图表的 JSON 表示的字符串版本。
clone() ChartWrapper 返回图表封装容器的深层副本。
getDataSourceUrl() 字符串 如果此图表从数据源获取数据，则返回此数据源的网址。否则，返回 null。
getDataTable() google.visualization.DataTable

如果此图表从本地定义的 DataTable 获取数据，将返回对图表的 DataTable 的引用。如果此图表从数据源获取数据，则会返回 null。

下次调用 ChartWrapper.draw() 时，图表将反映您对返回的对象所做的任何更改。
getChartType() 字符串 已封装图表的类名称。如果这是 Google 图表，将不能使用 google.visualization 来限定名称。例如，如果这是一个树状图，则会返回“Treemap”，而不是“google.visualization.treemap”。
getChartName() 字符串 返回 setChartName() 分配的图表名称。
getChart() Chart 对象参考 返回对此 ChartWrapper 创建的图表的引用，例如 google.visualization.BarChart 或 google.visualization.ColumnChart 。 在您对 ChartWrapper 对象调用 draw() 并抛出 ready 事件之前，此方法会一直返回 null。对返回的对象调用的方法会反映在网页上。
getContainerId() 字符串 图表的 DOM 容器元素的 ID。
getQuery() 字符串 此图表的查询字符串（如果有），并会查询数据源。
getRefreshInterval() 数字 此图表的任何刷新间隔（如果此图表查询数据源）。零表示不刷新。
getOption(key, opt_default_val) 任何类型

返回指定的图表选项值

  • key - 要检索的选项的名称。可以是限定名称，例如 'vAxis.title'。
  • opt_default_value [可选] - 如果指定的值未定义或为 null，系统将返回此值。
getOptions() 对象 返回此图表的选项对象。
getView() 对象 OR 数组 返回格式与 dataview.toJSON() 相同的 DataView 初始化程序对象，或此类对象的数组。
setDataSourceUrl(url) 无 设置要用于此图表的数据源的网址。如果您还为此对象设置了数据表，则系统会忽略数据源网址。
setDataTable(table) 无 设置图表的 DataTable。传入以下内容之一：null；DataTable 对象；DataTable 的 JSON 表示法；或遵循 arrayToDataTable() 语法的数组。
setChartType(type) 无 设置图表类型。传入已封装图表的类名称。如果这是 Google 图表，请勿使用 google.visualization 限定。例如，对于饼图，请传入“PieChart”。
setChartName(name) 无 设置图表的任意名称。此图表不会显示在图表的任何位置，除非自定义图表已明确设计为使用它。
setContainerId(id) 无 设置图表所含 DOM 元素的 ID。
setQuery(query_string) 无 设置查询字符串（如果此图表查询数据源）。如果指定此值，您还必须设置数据源网址。
setRefreshInterval(interval) 无 为此图表设置刷新间隔（如果此图表查询数据源）。 如果指定此值，您还必须设置数据源网址。零表示不刷新。
setOption(key, value) 无 设置单个图表选项值，其中 key 是选项名称，value 是值。如需取消设置某个选项，请为该值传入 null。请注意，key 可以是限定名称，例如 'vAxis.title'。
setOptions(options_obj) 无 用于设置图表的完整选项对象。
setView(view_spec) 无 设置一个 DataView 初始化程序对象，该对象充当底层数据的过滤器。图表封装容器必须具有来自 DataTable 或数据源的底层数据才能应用此视图。您可以传入字符串或 DataView 初始化程序对象，例如 dataview.toJSON() 返回的对象。您还可以传入 DataView 初始化程序对象的数组，在这种情况下，该数组中的第一个 DataView 将应用于底层数据以创建新数据表，第二个 DataView 将应用于通过应用第一个 DataView 生成的数据表，依此类推。

活动

ChartWrapper 对象会引发以下事件。请注意，您必须先调用 ChartWrapper.draw()，然后才能抛出任何事件。

名称 说明 属性
error 尝试渲染图表时出错时触发。 id、message
ready 该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法，则应在调用 draw 方法之前为该事件设置监听器，并且仅在事件触发后调用监听器。 无
select 当用户点击条形或图例时触发。选择图表元素时，会选择数据表中的相应单元格；选择图例时，会选择数据表中的相应列。如需了解已选择的内容，请调用 ChartWrapper.getChart(). getSelection()。请注意，仅当底层图表类型抛出选择事件时，才会抛出该异常。 无

示例

以下两个代码段创建了一个等效的折线图。第一个示例使用 JSON 字面量表示法定义图表；第二个示例使用 ChartWrapper 方法设置这些值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

同一图表，现在使用 setter 方法：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

ChartEditor 类

ChartEditor 类用于打开页内对话框，让用户能够即时自定义可视化效果。

如需使用 ChartEditor，请执行以下操作：

  1. 加载 charteditor 软件包。 在 google.charts.load() 中，加载软件包“charteditor”。您无需针对您在编辑器中呈现的图表类型加载软件包；图表编辑器将根据需要为您加载任何软件包。
  2. 创建一个 ChartWrapper 对象，用于定义供用户自定义的图表。此图表将显示在对话框中，用户可以使用编辑器重新设计图表、更改图表类型，甚至更改源数据。
  3. 创建一个新的 ChartEditor 实例，并注册以监听“ok”事件。当用户点击对话框中的“确定”按钮时，系统会抛出此事件。收到用户修改的图表后，您应调用 ChartEditor.getChartWrapper() 来检索用户修改的图表。
  4. 调用 ChartEditor.openDialog()，并传入 ChartWrapper。系统随即会打开对话框。对话框按钮可让用户关闭编辑器。只要 ChartEditor 实例在范围内，该实例就可用；在用户关闭对话框后不会自动销毁该实例。
  5. 如需更新代码中的图表，请调用 setChartWrapper()。

方法

方法 返回值 说明
openDialog(chartWrapper, opt_options) null

将图表编辑器作为页面上的嵌入式对话框打开。该函数会立即返回，而不会等待对话框关闭。如果您并未丢失实例的作用域，则可以再次调用 openDialog() 以重新打开对话框，但必须再次传入 ChartWrapper 对象。

  • chartWrapper - ChartWrapper 对象，用于定义要在窗口中渲染的初始图表。图表必须具有已填充的 DataTable，或者连接到有效的数据源。此封装容器会在内部复制到图表编辑器中，因此您之后对 ChartWrapper 句柄所做的任何更改都不会反映在图表编辑器的副本中。
  • opt_options - [可选] 包含图表编辑器任何选项的对象。请参阅下方的选项表。
getChartWrapper() ChartWrapper 返回表示图表的 ChartWrapper，用户做出修改后。
setChartWrapper(chartWrapper) null

使用此方法更新编辑器中的渲染图表。

chartWrapper - ChartWrapper 对象，表示要渲染的新图表。图表必须具有已填充的 DataTable，或者已连接到有效的数据源。

closeDialog() null 关闭图表编辑器对话框。

选项

图表编辑器支持以下选项：

名称 类型 默认 说明
dataSourceInput 元素句柄或“网址框” null

使用此字段可让用户为图表指定数据源。此属性可以是以下两个值之一：

  • 'urlbox' - 在对话框的可编辑文本框中显示图表的数据源网址。用户可以修改此设置，系统将根据新的数据源重新绘制图表。
  • DOM 元素 - 可让您提供用于选择数据源的自定义 HTML 元素。向 HTML 元素（可以在代码中创建或者从网页复制）传入句柄。 此元素会显示在对话框中。使用此方法可让用户选择图表的数据源。例如，创建一个列表框，其中包含多个数据源网址，或者方便用户选择的名称。 该元素必须实现选择处理程序，并使用它来更改图表的数据源：例如，更改底层 DataTable 或修改图表的 dataSourceUrl 字段。

活动

图表编辑器会引发以下事件：

名称 说明 属性
ok 当用户点击对话框中的“确定”按钮时触发。收到此方法后，您应调用 getChartWrapper() 来检索用户配置的图表。 无
cancel 当用户点击对话框中的“取消”按钮时触发。 无

示例

以下示例代码会打开一个图表编辑器对话框，其中包含已填充的折线图。如果用户点击“确定”，修改后的图表将保存到页面上的指定 <div> 中。 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

数据操纵方法

google.visualization.data 命名空间包含静态方法，用于对 DataTable 对象执行类似 SQL 的操作，例如联接这些对象或按列值分组。

google.visualization.data 命名空间提供以下方法：

方法 说明
google.visualization.data.group 执行 SQL GROUP BY 操作，以返回按指定列中的值分组的表。
google.visualization.data.join 在一个或多个键列上联接两个数据表。

group()

获取一个已填充的 DataTable 对象，并执行类似于 SQL 的 GROUP BY 操作，返回一个表，其中的行按指定列值分组。请注意，这不会修改输入 DataTable。

在返回的表中，指定键列中的每种值组合均占一行。每行包括键列，外加一列，其中包含与键组合匹配的所有行的汇总列值（例如，指定列中所有值的总和或计数）。

google.visualization.data 命名空间包含几个有用的聚合值（例如 sum 和 count），但您也可以定义自己的值（例如，standardDeviation 或 secondHighest）。方法说明后面会提供有关如何定义您自己的集合商家的说明。

语法

google.visualization.data.group(data_table, keys, columns)
data_table
输入 DataTable。调用 group() 不会对其进行修改。
keys
一组数字和/或对象，用于指定要作为分组依据的列。结果表包含此数组中的每一列，以及 columns 中的每一列。如果为数字，则这是要作为分组依据的输入 DataTable 的列索引。如果是对象，它将包含一个可以修改指定列的函数（例如，对该列中的值加上 1）。该对象必须具有以下属性：
  • column - 一个数字，它是 dt 中要应用转换的列索引。
  • modifier - 此函数接受一个值（每行的相应列中的单元格值），并返回修改后的值。此函数用于修改列值以帮助进行分组：例如，通过调用 whatQuarter 函数来计算日期列的季度，以便 API 可以按季度对行进行分组。计算得出的值显示在返回表的键列中。此函数可以在此对象内以内嵌方式声明，也可以是您在代码中的其他位置定义的函数（必须位于调用范围内）。该 API 提供了一个简单的修饰符函数；如需了解如何创建您自己的更实用的函数，请点击此处。您必须知道此函数可以接受的数据类型，并且仅对该类型的列调用它。您还必须知道此函数的返回类型，并在下文所述的 type 属性中声明它。
  • type - 函数 modifier 返回的类型。此名称应该是 JavaScript 字符串类型名称，例如“number”或“布尔值”。
  • label - [可选] 用于在返回的 DataTable 中分配此列的字符串标签。
  • id - [可选] 要在返回的 DataTable 中分配此列的字符串 ID。

示例：[0]、[0,2]、[0,{column:1, modifier:myPlusOneFunc, type:'number'},2]
列
[可选] 让您指定除了键列之外还要包含在输出表中的列。由于行组中的所有行都压缩为单个输出行，因此您必须确定要为该行组显示的值。例如，您可以选择显示组中第一行的列值，或显示该组中所有行的平均值。 columns 是对象的数组，具有以下属性：
  • column - 一个数字，用于指定要显示的列的索引。
  • aggregation - 此函数接受包含此行组中此列的所有值的数组，并返回要在结果行中显示的单个值。返回值必须是对象的 type 属性指定的类型。下面详细介绍了如何创建您自己的聚合函数。您必须知道此方法接受哪些数据类型，并且仅对适当类型的列调用该方法。该 API 提供了几个有用的聚合函数。请参阅下面的提供的聚合函数获取列表，或创建聚合函数了解如何编写您自己的聚合函数。
  • type - 聚合函数的返回类型。此名称应为 JavaScript 字符串类型名称，例如“number”或“布尔值”。
  • label - [可选] 要应用于所返回表中此列的字符串标签。
  • id - [可选] 要应用于所返回表中此列的字符串 ID。

返回值

一个 DataTable，键中列出的每一列对应一列，columns 中列出的每列对应一列。该表按键行从左到右进行排序。

示例

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

提供的修饰符函数

API 提供了以下修饰符函数，您可以将它们传递到按键中。modifier 参数自定义分组行为。

函数 输入数组类型 返回值类型 说明
google.visualization.data.month 日期 number 对于给定的日期，它将返回从 0 开始的月份值（0、1、2 等）。

提供的汇总函数

API 提供了以下可传递到列的聚合函数。aggregation 参数数组。

函数 输入数组类型 返回值类型 说明
google.visualization.data.avg number number 传入的数组的平均值。
google.visualization.data.count 任意类型 number 组中的行数。Null 值和重复值也计算在内。
google.visualization.data.max 数字、字符串、日期 number, string, Date, null 数组中的最大值。对于字符串，这是按字典顺序排序的列表中的第一项；对于日期值，这是最新日期。Null 会被忽略。如果没有最大值，则返回 null。
google.visualization.data.min 数字、字符串、日期 number, string, Date, null 数组中的最小值。对于字符串，这是按字典顺序排序的列表中的最后一项；对于日期值，这是最早的日期。Null 会被忽略。如果没有最小值，则返回 null。
google.visualization.data.sum number number 数组中所有值的总和。

创建修饰符函数

您可以创建一个修饰符函数，在 group() 函数对行进行分组之前对键值执行简单转换。此函数接受一个单元格值，对其执行操作（例如对值加 1），并返回该值。输入和返回类型不必相同，但调用方必须知道输入和输出类型。下面是一个接受日期并返回季度的函数示例： 

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

创建聚合函数

您可以创建一个聚合函数，该函数接受行组中的一组列值，并返回单个数字，例如，返回计数或值的平均值。下面是提供的计数聚合函数的实现，该函数返回行组中的行数计数：

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

join()

此方法类似于 SQL JOIN 语句，将两个数据表（DataTable 或 DataView 对象）联接到单个结果表中。您可以在两个表之间指定一个或多个列对（键列），然后输出表根据您指定的联接方法包含这些行：仅包含两个键都匹配的行；一个表中的所有行；或者两个表中的所有行（无论键是否匹配）。结果表仅包含键列以及您指定的任何其他列。请注意，dt2 不能有重复的键，但 dt1 可以。术语“键”是指所有键列值的组合，而不是特定的键列值；因此，如果某行具有单元格值 A | B | C 且列 0 和 1 是键列，则该行的键为 AB。

语法

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);
dt1
一个已填充的 DataTable，用于与 dt2 联接。
dt2
一个已填充的 DataTable，用于与 dt1 联接。此表不能有多个相同的键（其中一个键是键列值的组合）。
joinMethod
用于指定联接类型的字符串。如果 dt1 有多个行与 dt2 行匹配，则输出表将包含所有匹配的 dt1 行。请从以下值中进行选择：
  • “full”- 输出表包含两个表中的所有行，无论键是否匹配。不匹配的行将包含 null 单元格条目；匹配的行将联接在一起。
  • “inner”- 经过过滤以仅包含键匹配的行的全联接。
  • “left”：输出表包含 dt1 中的所有行，无论 dt2 中是否存在任何匹配行。
  • “right”- 输出表包含 dt2 中的所有行，无论 dt1 中是否存在任何匹配行。
keys
要从两个表进行比较的键列的数组。每个键值对都是一个双元素数组，第一个是 dt1 中的键，第二个是 dt2 中的键。此数组可以按索引、ID 或标签指定列，请参阅 getColumnIndex。
两个表中的列类型必须相同。所有指定的键必须根据 joinMethod 提供的规则进行匹配，以便包含表中的行。键列始终包含在输出表中。只有左侧表 dt1 可以包含重复的键；dt2 中的键必须是唯一的。这里的术语“键”表示一组唯一的键列，而不是单个列值。例如，如果您的键列是 A 和 B，则下表将仅包含唯一键值（因此可以用作 dt2）：
A B
Jen 红色
Jen 蓝色
弗雷德 红色
示例：[[0,0], [2,1]] 会比较两个表中第一列的值，以及来自 dt1 的第三列与 dt1 中第二列的值。
dt1Columns
dt1 中除 dt1 的键列之外要包含在输出表中的列的数组。此数组可以按索引、ID 或标签指定列，请参阅 getColumnIndex。
dt2Columns
dt2 中除 dt2 的键列之外要包含在输出表中的列的数组。此数组可以按索引、ID 或标签指定列，请参阅 getColumnIndex。

返回值

一个包含键列、dt1Columns 和 dt2Columns 的 DataTable。此表按键列从左到右进行排序。当 joinMethod 为“inner”时，应填充所有关键单元格。对于其他联接方法，如果未找到匹配的键，则表中任何不匹配的键单元格都将显示 null。

示例

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

格式设置工具

Google Visualization API 提供了格式设置工具，以便重新设置可视化图表中的数据格式。这些格式化程序会更改所有行中指定列的格式值。请注意：

  • 格式化程序只会修改格式化的值，而不会修改基础值。例如，显示的值将为“$1,000.00”，但基础值仍为“1000”。
  • 格式设置工具一次只影响一列；要为多个列重新设置格式，请为要更改的每一列应用格式设置工具。
  • 如果您还使用用户定义的格式化程序，则某些 Google 可视化格式化程序会覆盖所有用户定义的格式化程序。

    • 对数据应用的实际格式源自 API 加载时所使用的语言区域。如需了解详情，请参阅 加载具有特定语言区域的图表 。

    重要提示：格式化程序只能与 DataTable 一起使用，不能与 DataView 一起使用（DataView 对象是只读的）。

    以下是使用格式化程序的常规步骤：

    1. 获取填充的 DataTable 对象。
    2. 对于要重新设置格式的每一列：
      1. 创建一个对象，用于指定格式设置工具的所有选项。这是一个基本的 JavaScript 对象，包含一组属性和值。请查看格式化程序的文档，了解支持的属性。（或者，您可以传入一个对象字面量表示法对象来指定您的选项。）
      2. 创建格式化程序，并传入您的 options 对象。
      3. 调用 formatter.format(table, colIndex)，并传入要重新格式化的数据的 DataTable 和（从零开始）列号。请注意，您只能对每列应用一个格式设置工具；应用第二个格式设置工具只会覆盖第一个格式设置工具的效果。
        重要提示：许多格式设置工具都需要 HTML 标记才能显示特殊格式；如果您的可视化图表支持 allowHtml 选项，您应将其设置为 true。

    以下示例将日期列的带格式的日期值更改为使用长日期格式（“1009 年 1 月 1 日”）：

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

    大多数格式化程序会公开以下两个方法：

    方法 说明
    google.visualization.formatter_name(options)

    构造函数，其中 formatter_name 是具体的 formatterclass 名称。

    • options - 通用 JavaScript 对象，用于指定该格式化程序的选项。此对象是具有“属性/值”对的通用对象，具有特定于该格式化程序的属性。如需了解支持的选项，请参阅具体格式设置工具的文档。以下是调用 DateFormat 对象的构造函数的两种示例方法，同时传入两个属性： 
    // Object literal technique
var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5});

// Equivalent property setting technique
var options = new Object();
options['formatType'] = 'long';
options['timeZone'] = -5;
var formatter = new google.visualization.DateFormat(options);
    format(data, colIndex)

    重新设置指定列中数据的格式。

    • data - 包含要重新格式化的数据的 DataTable。您不能在此处使用数据视图。
    • colIndex - 要格式化的列的索引（从零开始）。要设置多个列的格式，您必须使用不同的 colIndex 值多次调用此方法。

     

    Google Visualization API 提供了以下格式设置工具：

    格式化程序名称 说明
    ArrowFormat 添加向上或向下箭头，指示单元格的值是高于还是低于指定值。
    BarFormat 添加彩色条形，其方向和颜色指示单元格的值是高于还是低于指定值。
    ColorFormat 根据单元格中的值是否在指定范围内为相应单元格着色。
    DateFormat 将日期或日期时间值设置为几种不同的格式，包括“1 月 1 日”、“2009 年 1 月 1 日”、“1/1/09”和“2009 年 1 月 1 日”。
    NumberFormat 设置数值的各个方面的格式。
    PatternFormat 将同一行的单元格值与任意文本串联到指定单元格中。

    ArrowFormat

    向数字单元格添加向上箭头或向下箭头，具体取决于该值是高于还是低于指定的基值。如果等于基值，则不显示箭头。

    选项

    ArrowFormat 支持传递给构造函数的以下选项：

    Option 说明
    base

    一个表示底数的数字，用于与单元格的值进行比较。如果单元格值较高，则单元格包含绿色的向上箭头；如果单元格的值较低，则单元格包含红色向下箭头；如果相同，则无箭头。

    示例代码

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

    BarFormat

    向数字单元格添加彩色条，以表明单元格的值是高于还是低于指定底数。

    选项

    BarFormat 支持传递给构造函数的以下选项：

    Option

    示例

    说明
    base 一个数字，是要作为与单元格值比较的底数。如果单元格值较高，则会将其绘制到基底右侧；如果值较低，则会将其绘制在左侧。 默认值为 0。
    colorNegative 一个字符串，表示柱形的负值部分。可能的值为“red”、“green”和“blue”；默认值为“red”。
    colorPositive 一个字符串，表示柱形的正值部分的颜色。可能的值包括“red”、“green”和“blue”。默认值为“blue”。
    drawZeroLine 一个布尔值，用于指示在存在负值时是否绘制 1 像素的深色基准线。 暗线旨在增强条形的视觉扫描效果。默认值为“false”。
    max 条形范围的最大值。默认值为表中的最大值。
    min 柱形范围的最小值。默认值为表中的最小值。
    showValue 如果为 true，则显示值和条形；如果为 false，则仅显示条形。默认值为 true。
    width 每个条形的粗细（以像素为单位）。默认值为 100。

    示例代码

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    ColorFormat

    为数值单元格的前景或背景分配颜色，具体取决于单元格的值。此格式化程序并不常见，因为它在构造函数中不使用其选项。相反，在调用 format() 之前，您应该根据需要调用 addRange() 或 addGradientRange() 以添加颜色范围。可以使用任何可接受的 HTML 格式（例如“黑色”“#000000”或“#000”）指定颜色。

    方法

    ColorFormat 支持以下方法：

    方法 说明
    google.visualization.ColorFormat() 构造函数。不接受任何参数。
    addRange(from, to, color, bgcolor)

    为单元格指定前景色和/或背景颜色，具体取决于单元格的值。 值在指定的 <from-to 范围内的任何单元格都会被分配 color 和 bgcolor。请务必注意，此范围不包括 1-1,000 和 1,000-2,000 之间的 1 秒，因此无法涵盖 1,000 这个值！

    • from - [String、Number、Date、DateTime 或 TimeOfDay] 范围的下边界（含）或 null。如果为 null，则匹配 -仍。字符串边界按字母顺序与字符串值进行比较。
    • to - [String, Number, Date, DateTime, 或 TimeOfDay] 范围的上界（不含边界值），或为 null。如果为 null，则匹配 + 帐号。字符串边界按字母顺序与字符串值进行比较。
    • color - 要应用于匹配单元格中的文本的颜色。值可以是“#RRGGBB”值，也可以是定义的颜色常量（例如“#FF0000”或“red”）。
    • bgcolor - 要应用于匹配单元格背景的颜色。值可以是“#RRGGBB”值，也可以是定义的颜色常量（例如“#FF0000”或“red”）。
    addGradientRange(from, to, color, fromBgColor, toBgColor)

    根据单元格的值指定范围中的背景颜色。该颜色会缩放，以匹配从下边界颜色到上边界颜色范围内的单元格值。请注意，与 addRange() 不同，此方法无法比较字符串值。提示：颜色范围通常很难查看者准确评估；最简单、最容易读取的范围是从完全饱和的颜色到白色（例如，#FF0000-FFFFFF）。

    • from - [数字、日期、日期时间或 TimeOfDay] 范围的下限（含边界值）或 null。如果为 null，则匹配 -仍。
    • to - [Number, Date, DateTime, or TimeOfDay] 范围的上边界（不含）或 null。如果为 null，则匹配 + 帐号。
    • color - 要应用于匹配单元格中的文本的颜色。所有单元格都具有相同的颜色，无论单元格的值是什么。
    • fromBgColor - 保持渐变色低端值的单元格的背景颜色。值可以是“#RRGGBB”值，也可以是定义的颜色常量（例如“#FF0000”或“red”）。
    • toBgColor - 保持值位于渐变高处的单元格的背景颜色。值可以是“#RRGGBB”值，也可以是定义的颜色常量（例如“#FF0000”或“red”）。

     
    format(dataTable, columnIndex) 将格式应用于指定列的标准 format() 方法。

    示例代码

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    DateFormat

    以多种方式设置 JavaScript Date 值的格式，包括“1 月 1 日”“1/1/16”和“2016 年 1 月 1 日”。

    选项

    DateFormat 支持传递给构造函数的以下选项：

    Option 说明
    formatType

    日期的快速格式设置选项。支持以下字符串值，这些字符串值会重新设置日期 2016 年 2 月 28 日的格式，如下所示：

    • “short”- 短格式：例如“2/28/16”
    • “medium”- 中等格式：例如“2016 年 2 月 28 日”
    • “long”- 长格式：例如“2016 年 2 月 28 日”

    您不能同时指定 formatType 和 pattern。
    pattern

    要应用于值的自定义格式模式，类似于 ICU 日期和时间格式。例如：var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});

    您不能同时指定 formatType 和 pattern。如需详细了解模式，请参阅下一部分。

    timeZone 显示日期值的时区。这是一个数值，表示 GMT + 此时区数量（可以是负数）。默认情况下，系统会假定使用创建日期对象时所用的计算机时区创建日期对象；此选项用于以其他时区显示该值。例如，如果您在位于英格兰格林威治的计算机上创建了一个为中午 5 点的 Date 对象，并将时区指定为 -5（options['timeZone'] = -5，即美国的东部太平洋时间），则显示的值将是中午 12 点。

    方法

    DateFormat 支持以下方法：

    方法 说明
    google.visualization.DateFormat(options)

    构造函数。如需了解详情，请参阅上面的“选项”部分。
    format(dataTable, columnIndex) 将格式应用于指定列的标准 format() 方法。
    formatValue(value)

    返回给定值的格式化值。 此方法不需要 DataTable。

    示例代码

    function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

    关于日期格式的更多信息

    以下是有关受支持模式的更多详细信息：

    这些格式类似于 ICU 日期和时间格式，但尚不支持以下格式：A e D F g Y u w W。为了避免与模式发生冲突，您希望在输出中显示的任何字面量文本都应用单引号引起来，但单引号除外（应该加倍成倍）：例如： "K 'o''clock.'"。

    模式 说明 输出示例
    GG 时代指示符。 “AD”
    yy 或 yyyy 。 1996
    M

    一年中的月。对于 1 月：

    • M 会生成 1
    • MM 会生成 01
    • MMM 生成的结果为 1 月
    • MMMM 会生成 1 月

    “7 月”

    “07”
    d 一个月中的日。额外的“d”值将添加前导零。 10
    小时 12 小时制的小时。额外的“h”值将添加前导零。 12
    H 以 24 小时制表示的小时数。额外的 Hk 值将添加前导零。 0
    m 一小时中的分钟。额外的“M”值将添加前导零。 30
    秒 一分钟中的秒。额外的“s”值将添加前导零。 55
    南 小数秒。额外的“S”值将在右侧填充零。 978
    E

    周几。以下是“星期二”的输出结果：

    • E 生成 T
    • EE 或 EEE 产品周二或周二
    • EEEE 星期二制作

    “周二”

    “星期二”
    aa AM/PM “下午”
    k 一天中的小时 (1~24)。额外的“k”值将添加前导零。 24
    K 小时，以上午/下午 (0~11) 表示。额外的“k”值将添加前导零。 0
    z

    时区。如果时区为 5，则生成“UTC+5”

    		 “UTC + 5”
    Z

    采用 RFC 822 格式的时区。对于时区 -5：

    Z、ZZ、ZZZ 生成 -0500

    ZZZZ 等都会生成“GMT -05:00”

    “-0800”

    “格林尼治标准时间 -05:00”
    v

    时区（通用）。

    		 “其他/GMT-5”
    ' 用于文本的 Esc 键 “日期”
    ” 单引号 yy

    NumberFormat

    说明应如何设置数字列的格式。格式设置选项包括指定前缀符号（例如美元符号）或要用作千位标记的标点符号。

    选项

    NumberFormat 支持传递给构造函数的以下选项：

    Option 说明
    decimalSymbol

    用作小数标记的字符。默认值为点 (.)。
    fractionDigits

    一个数字，用于指定小数点后显示多少位数。默认值为 2。如果您指定的位数超过数字所包含的位数，则较小的值将显示零。 截断的值将进行舍入（5 向上舍入）。

    groupingSymbol 用于将小数点左边的数字分成三组一组的字符。默认值为英文逗号 (,)。
    negativeColor 负值的文本颜色。无默认值。值可以是任何可接受的 HTML 颜色值，例如“红色”或“#FF0000”。
    negativeParens 一个布尔值，其中 true 表示负值应用括号括起来。 默认值为 true。
    pattern

    格式字符串。如果提供，系统会忽略除 negativeColor 之外的所有其他选项。

    该格式字符串是 ICU 模式集 的子集。 例如，{pattern:'#,###%'} 将为值 10、7.5 和 0.5 生成“1,000%”“750%”和“50%”输出值。

    prefix 值的字符串前缀，例如“$”。
    suffix 值的字符串后缀，例如“%”。

    方法

    NumberFormat 支持以下方法：

    方法 说明
    google.visualization.NumberFormat(options)

    构造函数。如需了解详情，请参阅上面的“选项”部分。
    format(dataTable, columnIndex) 将格式应用于指定列的标准 format() 方法。
    formatValue(value)

    返回给定值的格式化值。此方法不需要 DataTable。

    示例代码

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    PatternFormat

    允许您将指定列的值以及任意文本合并到单个列中。例如，如果您有一个列代表名字，一列代表姓氏，则可以使用 {last name}, {first name} 填充第三列。此格式化程序不遵循构造函数和 format() 方法的惯例。有关说明，请参阅下面的“方法”部分。

    方法

    PatternFormat 支持以下方法：

    方法 说明
    google.visualization.PatternFormat(pattern)

    构造函数。不接受选项对象。而是接受字符串模式参数。这是一个字符串，用于描述要在目标列中输入哪些列值以及任意文本。在字符串中嵌入占位符，以指示要嵌入的其他列中的值。占位符为 {#}，其中 # 是要使用的源列的索引。该索引是以下 format() 方法的 srcColumnIndices 数组中的索引。如需包含文字 { 或 } 字符，请按如下方式对其进行转义：\{ 或 \}。如需包含文字 \ 标记，请将其转义为 \\。

    示例代码

    以下示例演示了用于创建锚点元素的模式的构造函数，第一个和第二个元素都来自 format() 方法： 

    var formatter = new google.visualization.PatternFormat(
  '<a href="mailto:{1}">{0}</a>');
    format(dataTable, srcColumnIndices, opt_dstColumnIndex)

    标准格式设置调用，以及几个其他参数：

    • dataTable - 要对其执行操作的 DataTable。
    • srcColumnIndices - 一个数组，包含一个或多个（从零开始）列索引，作为源从底层 DataTable 中拉取。这将用作构造函数中 pattern 参数的数据源。列号不必按排序顺序排列。
    • opt_dstColumnIndex - [可选] 放置 pattern 操作输出的目标列。如果未指定，系统会将 srcColumIndices 中的第一个元素用作目的地。

    请参阅表格后面的格式设置示例。

    以下是一个包含四列的表的几个输入和输出示例。

    Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

    示例代码

    以下示例演示了如何合并两列中的数据来创建电子邮件地址。它使用 DataView 对象隐藏原始源列：

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', 'john@beatles.co.uk'],
  ['Paul McCartney', 'paul@beatles.co.uk'],
  ['George Harrison', 'george@beatles.co.uk'],
  ['Ringo Starr', 'ringo@beatles.co.uk']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    GadgetHelper

    帮助程序类，用于简化编写使用 Google 可视化 API 的小工具的操作。

    构造函数

    google.visualization.GadgetHelper()

    方法

    方法 返回值 说明
    createQueryFromPrefs(prefs) google.visualization.Query 静态。创建一个新的 google.visualization.Query 实例，并根据小工具偏好设置中的值设置其属性。参数 prefs 的类型是 _IG_Prefs
    1. 偏好设置 _table_query_url 用于设置查询数据源网址。
    2. Preference _table_query_refresh_interval 用于设置查询刷新间隔（以秒为单位）。
    validateResponse(response) 布尔值 静态。参数 response 的类型为 google.visualization.QueryResponse。如果响应包含数据，则返回 true。如果查询执行失败且响应不包含数据，则返回 false。如果发生错误，此方法会显示错误消息。

    查询类

    以下对象可用于将数据查询发送到外部数据源（例如 Google 电子表格）。

    查询

    表示发送到数据源的查询。

    构造函数

    google.visualization.Query(dataSourceUrl, opt_options)

    参数

    dataSourceUrl
    [必需，String] 作为查询发送目标的网址。如需了解 Google 电子表格，请参阅“图表和电子表格”文档。
    opt_options
    [可选，对象] 请求的选项映射。注意 ：如果您要访问 受限数据源 ，则不应使用此参数。以下是支持的属性：
    • sendMethod - [可选，字符串] 指定用于发送查询的方法。选择以下字符串值之一：
      • 'xhr' - 使用 XmlHttpRequest 发送查询。
      • 'scriptInjection' - 使用脚本注入发送查询。
      • 'makeRequest' - [仅适用于已弃用的小工具] 使用 小工具 API makeRequest() 方法发送查询。如果指定，您还应指定 makeRequestParams。
      • 'auto' - 使用数据源网址中的 tqrt 网址参数指定的方法。tqrt 可以具有以下值：“xhr”“scriptInjection”或“makeRequest”。如果 tqrt 缺失或具有无效值，则同网域请求默认值为“xhr”，跨网域请求默认值为“scriptInjection”。
    • makeRequestParams - [对象] makeRequest() 查询的参数映射仅当 sendMethod 为“makeRequest”时才使用且必需。

    方法

    方法 返回值 说明
    abort() 无 停止发送通过 setRefreshInterval() 开始的自动查询。
    setRefreshInterval(seconds) 无

    将查询设置为从首次显式调用 send 开始，每隔指定时长（秒数）自动调用 send 方法。seconds 是一个大于或等于零的数字。

    如果您使用此方法，则应在调用 send 方法之前调用它。

    您可以再次使用零（默认值）或调用 abort() 来取消此方法。

    setTimeout(seconds) 无 设置在引发超时错误之前等待数据源响应的秒数。seconds 是大于零的数字。
    默认超时时间为 30 秒。如果使用该方法，应在调用 send 方法之前调用。
    setQuery(string) 无 设置查询字符串。string 参数的值应为有效查询。
    如果使用该方法，应在调用 send 方法之前调用此方法。 详细了解查询语言。
    send(callback) 无 将查询发送到数据源。callback 应该是在数据源响应时调用的函数。回调函数将收到一个类型为 google.visualization.QueryResponse 的参数。

    QueryResponse

    表示从数据源收到的查询执行的响应。此类的实例会作为参数传递给调用 Query.send 时设置的回调函数。

    方法

    方法 返回值 说明
    getDataTable() DataTable 返回数据源返回的数据表。如果查询执行失败，且未返回任何数据，则返回 null。
    getDetailedMessage() 字符串 针对失败的查询返回详细的错误消息。如果查询执行成功，此方法将返回空字符串。返回的消息是面向开发者的消息，可能包含技术信息，例如“Column {salary}不存在”。
    getMessage() 字符串 针对失败的查询返回一条简短的错误消息。如果查询执行成功，此方法将返回空字符串。返回的消息是面向最终用户的简短消息，例如“无效查询”或“访问遭拒”。
    getReasons() 字符串数组 返回一个数组，其中包含零个或多个条目。每个条目都是一个短字符串，其中包含在执行查询时引发的错误或警告代码。可能的代码：
    • access_denied用户无权访问数据源。
    • invalid_query指定的查询存在语法错误。
    • data_truncated由于输出大小限制，未返回与查询选择匹配的一个或多个数据行。（警告）。
    • timeout 查询未在预期时间内响应。
    hasWarning() 布尔值 如果查询执行有任何警告消息，则返回 true。
    isError() 布尔值 如果查询执行失败，并且响应不包含任何数据表，则返回 true。如果查询执行成功且响应包含数据表，则返回 <false>。

    错误显示

    该 API 提供了多种函数来帮助您向用户显示自定义错误消息。要使用这些函数，请在页面上提供一个容器元素（通常为 <div>），API 将在其中绘制格式化的错误消息。此容器可以是可视化图表容器元素，也可以是仅用于显示错误的容器。如果您指定可视化图表包含元素，错误消息将显示在可视化图表上方。 然后调用下面的相应函数，以显示或移除错误消息。

    所有函数都是命名空间 google.visualization.errors 中的静态函数。

    许多可视化图表可能会抛出错误事件；要了解详情，请参阅下面的错误事件。

    您可以在查询封装容器示例中查看自定义错误示例。

    函数 返回值 说明
    addError(container, message, opt_detailedMessage, opt_options) 用于标识所创建的错误对象的字符串 ID 值。这是网页上的唯一值，可用于移除错误或查找其包含的元素。

    使用指定的文本和格式向指定的页面元素添加错误显示块。

    • container - 要在其中插入错误消息的 DOM 元素。如果找不到容器，该函数将抛出 JavaScript 错误。
    • message - 要显示的字符串消息。
    • opt_detailedMessage - 可选的详细消息字符串。默认情况下，这是鼠标悬停文本，但可以在下面介绍的 opt_options.showInToolTip 属性中更改。
    • opt_options - 可选对象，包含用于设置消息的各种显示选项的属性。支持的选项如下：
      • showInTooltip - 一个布尔值，其中 true 显示详细消息作为提示文本，false 显示容器正文中短消息之后的详细消息。默认值为 true。
      • type - 描述错误类型的字符串，用于确定应将哪些 CSS 样式应用于此消息。支持的值为“error”和“warning”。默认值为“error”。
      • style - 错误消息的样式字符串。此样式将替换已应用于警告类型 (opt_options.type) 的所有样式。示例：'background-color: #33ff99; padding: 2px;' 默认值为空字符串。
      • removable - 一个布尔值，其中 true 表示用户可以通过点击鼠标关闭消息。默认值为 false。
    addErrorFromQueryResponse(container, response)

    用于标识所创建的错误对象的字符串 ID 值；如果响应未指示错误，则返回 null。这是页面上的唯一值，可用于移除错误或查找其包含的元素。

    将查询响应和错误消息容器传递给此方法：如果查询响应指示查询错误，在指定的页面元素中显示错误消息。如果查询响应为 null，该方法将抛出 JavaScript 错误。将查询处理程序中收到的 QueryResponse 传递给此消息，以显示错误。它还会根据类型（错误或警告，类似于 addError(opt_options.type)）设置适当的显示样式

    • container - 要在其中插入错误消息的 DOM 元素。如果找不到容器，该函数将抛出 JavaScript 错误。
    • response - 查询处理程序为响应查询而接收的 QueryResponse 对象。如果此值为 null，该方法将抛出 JavaScript 错误。
    removeError(id) 布尔值：如果错误已删除，则为 true；否则为 false。

    从页面中移除 ID 指定的错误。

    • id - 使用 addError() 或 addErrorFromQueryResponse() 创建的错误的字符串 ID。
    removeAll(container) 无

    从指定容器中移除所有错误块。如果指定的容器不存在，则会抛出错误。

    • container - 包含要移除的错误字符串的 DOM 元素。如果找不到容器，该函数将抛出 JavaScript 错误。
    getContainer(errorId) 包含指定错误的 DOM 元素的句柄；如果找不到，则为 null。

    检索容器元素的句柄，其中包含 errorID 指定的错误。

    • errorId - 使用 addError() 或 addErrorFromQueryResponse() 创建的错误的字符串 ID。

    事件

    大多数可视化图表会触发事件来表明发生了什么。作为图表的用户，您经常需要监听这些事件。如果您编写了自己的可视化图表，可能还需要自行触发此类事件。

    借助以下方法，开发者可以监听事件、移除现有事件处理脚本或从可视化图表内部触发事件。

    addListener()

    调用此方法来注册以接收您网页上托管的可视化图表触发的事件。您应记录哪些事件参数（如果有）将被传递给处理函数。 

    google.visualization.events.addListener(source_visualization,
  event_name, handling_function)
    source_visualization
    来源可视化图表实例的句柄。
    event_name
    要监听的事件的字符串名称。可视化图表应记录其抛出了哪些事件。
    handling_function
    source_visualization 触发 event_name 事件时调用的本地 JavaScript 函数的名称。系统会将所有事件参数作为参数传递给处理函数。

    返回结果

    新监听器的监听器处理程序。稍后，如果需要，您可以使用该处理程序通过调用 google.visualization.events.removeListener() 移除此监听器。

    示例

    以下是注册接收选择事件的示例

    var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

    addOneTimeListener()

    这与 addListener() 相同，但适用于只应监听一次的事件。后续抛出该事件将不会调用处理函数。

    下面举例说明此属性很有用：每次绘制都会导致系统抛出 ready 事件。如果您只想使用第一个 ready 执行代码，则需要使用 addOneTimeListener，而不是 addListener。

    removeListener()

    调用此方法可以取消注册现有的事件监听器。

    google.visualization.events.removeListener(listener_handler)
    listener_handler
    要移除的监听器处理程序，由 google.visualization.events.addListener() 返回。

    removeAllListeners()

    调用此方法可以取消注册特定可视化图表实例的所有事件监听器。

    google.visualization.events.removeAllListeners(source_visualization)
    source_visualization
    应从中移除所有事件监听器的源可视化图表实例的句柄。

    trigger()

    由可视化实现者调用。从可视化图表中调用此方法可以触发具有任意名称和一组值的事件。

    google.visualization.events.trigger(source_visualization, event_name,
  event_args)
    source_visualization
    来源可视化实例的句柄。如果您是从发送的可视化图表所定义的方法内调用此函数，只需传入 this 关键字即可。
    event_name
    用于调用事件的字符串名称。您可以选择所需的任何字符串值。
    event_args
    [可选] 要传递给接收方法的名称/值对的映射。例如：{message: "Hello there!", score: 10, name: "Fred"}。如果不需要事件，您可以传递 null；接收器应准备好接受此参数的 null。

    示例

    下面的可视化示例会在调用 ononClick 方法时抛出名为“select”的方法。而不会传回任何值。 

    MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

    标准可视化方法和属性

    每个可视化图表都应该公开下面一组必需和可选的方法和属性。但请注意，我们并未实施类型检查来强制执行这些标准，因此您应阅读每个可视化图表的文档。

    注意 ：这些方法位于可视化图表的命名空间中，而非 google.visualization 命名空间。

    构造函数

    构造函数应包含可视化类的名称，并返回该类的实例。 

    visualization_class_name(dom_element)
    dom_element
    指向应嵌入可视化图表的 DOM 元素的指针。

    示例

    var org = new google.visualization.OrgChart(document.getElementById('org_div'));

    draw()

    在网页上绘制可视化图表。在后台，您可以从服务器提取图形，也可以使用链接的可视化代码在网页上创建图形。每当数据或选项发生更改时，您都应该调用此方法。该对象应在传递到构造函数的 DOM 元素内绘制。 

    draw(data[, options])
    数据
    一个 DataTable 或 DataView，用于存放用于绘制图表的数据。目前没有从图表中提取 DataTable 的标准方法。
    options
    [可选] 自定义选项的名称/值对映射。例如，高度和宽度、背景颜色以及图片说明。可视化图表文档应列出可用的选项；如果您不指定此参数，则应支持默认选项。 您可以使用 JavaScript 对象字面量语法传入选项映射：例如，{x:100, y:200, title:'An Example'}

    示例

    chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

    getAction()

    这可通过具有提示并允许提示操作的可视化图表选择性地公开。

    返回具有所请求的 actionID 的提示操作对象。

    示例：

    // Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

    getSelection()

    可视化结果会让您访问图形中当前选定的数据，从而有选择性地显示这些数据。 

    selection_array getSelection()

    返回结果

    selection_array 选定对象的数组，每个对象都描述用于创建可视化的基础表（DataView 或 DataTable）中的一个数据元素。每个对象都具有 row 和/或 column 属性，以及底层 DataTable 中所选项的行和/或列的索引。如果 row 属性为 null，则选择为一列；如果 column 属性为 null，则选择为一行；如果两者都不为 null，则它是特定数据项。您可以调用 DataTable.getValue() 方法来获取所选项的值。检索到的数组可以传入 setSelection()。

    示例

    function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

    removeAction()

    这可通过具有提示并允许提示操作的可视化图表选择性地公开。

    从图表中移除包含所请求 actionID 的提示操作对象。

    示例：

    // Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

    setAction()

    这可通过具有提示并允许提示操作的可视化图表选择性地公开。它仅适用于核心图表（条形图、柱形图、折线图、面积图、散点图、组合图表、气泡图、饼图、圆环图、K 线图、直方图、阶梯面积图）。

    设置当用户点击操作文本时要执行的提示操作。

    setAction(action object)

    setAction 方法接受一个对象作为其操作参数。此对象应指定 3 个属性：id（所设置的操作的 ID）、text（应显示在操作提示中的文本）和 action（应在用户点击操作文本时应运行的函数）。

    任何和所有提示操作都应在调用图表的 draw() 方法之前设置。

    示例：

    // Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

    setAction 方法还可以定义两个额外的属性：visible 和 enabled。这些属性应该是可返回 boolean 值的函数，用于指示提示操作是否可见和/或启用。

    示例：

    // The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

    setSelection()

    （可选）选择可视化图表中的数据条目，例如面积图中的点或条形图中的条形。调用此方法时，可视化图表应直观地指示新的选择是什么。setSelection() 的实现不应触发“选择”事件。可视化图表可能会忽略部分选择内容。例如，仅显示所选行的表可以忽略其 setSelection() 实现中的单元格或列元素，也可以选择整行。

    每次调用此方法时，系统会取消选择所有选定的项，并应用传入的新选择列表。没有明确的方法来取消选择个别项；要取消选择个别项，请调用 setSelection() 并使项保持选中状态；要取消选择所有元素，请调用 setSelection()、setSelection(null) 或 setSelection([])。 

    setSelection(selection_array)
    selection_array
    一个对象数组，每个对象都有一个数字行和/或列属性。row 和 column 是要选择的数据表中从零开始的行号或列号。要选择整列，请将 row 设置为 null；要选择整行，请将 column 设置为 null。示例：setSelection([{row:0,column:1},{row:1, column:null}]) 选择 (0,1) 处的单元格和整行 1。

    各种静态方法

    本部分包含 google.visualization 命名空间中公开的各种实用方法。

    arrayToDataTable()

    该方法接受二维数组并将其转换为 DataTable。

    列数据类型由所提供的数据自动确定。也可以使用数组第一行（列标题行）中的对象字面量表示法（即 {label: 'Start Date', type: 'date'}）来指定列数据类型。您也可以使用可选数据角色，但必须使用对象字面量表示法明确定义。对象字面量表示法也可以用于任何单元格，从而让您能够定义“单元格对象”）。

    语法

    google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)
    twoDArray
    一个二维数组，其中每行表示数据表中的一行。如果 opt_firstRowIsData 为 false（默认值），则第一行将被解读为标题标签。每列的数据类型由给定数据自动解释。如果单元格没有值，请根据情况指定 null 或空值。
    opt_firstRowIsData
    第一行是否定义了标题行。如果为 true，则假定所有行都是数据。如果为 false，则假定第一行是标题行，并将值指定为列标签。默认值为 false。

    返回结果

    新的 DataTable。

    示例

    以下代码演示了创建同一 DataTable 对象的三种方法：

    // Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

    drawChart()

    此方法会在单次调用中创建一个图表。使用此方法的优势在于它需要的代码略少，并且您可以将可视化图表序列化并保存为文本字符串，以便重复使用。此方法不会向已创建的图表返回句柄，因此您无法分配方法监听器来捕获图表事件。

    语法

    google.visualization.drawChart(chart_JSON_or_object)
    chart_JSON_or_object
    JSON 字面量字符串或 JavaScript 对象，具有以下属性（区分大小写）：
    属性 类型 必需 默认 说明
    chartType 字符串 必需 无 可视化图表的类名称。对于 Google 图表，可以省略 google.visualization 软件包名称。如果相应的可视化图表库尚未加载，则对于 Google 可视化图表，此方法将为您加载库；您必须明确加载第三方可视化图表。示例：Table、PieChart、example.com.CrazyChart。
    containerId 字符串 必需 无 网页上将托管可视化图表的 DOM 元素的 ID。
    选项 对象 可选 无 描述可视化图表选项的对象。您可以使用 JavaScript 字面量表示法，也可以为对象提供句柄。示例： "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
    dataTable 对象 可选 无 用于填充可视化图表的 DataTable。这可以是 DataTable 的文字 JSON 字符串表示形式（如上文所述），也可以是已填充的 google.visualization.DataTable 对象的句柄，也可以是类似于 arrayToDataTable(opt_firstRowIsData=false) 所接受的二维数组。 您必须指定此属性或 dataSourceUrl 属性。
    dataSourceUrl 字符串 可选 无 用于填充图表数据的数据源查询（例如 Google 电子表格）。您必须指定此属性或 dataTable 属性。
    个查询 字符串 可选 无 如果指定 dataSourceUrl，则可以选择使用可视化查询语言指定类似 SQL 的查询字符串来过滤或处理数据。
    refreshInterval 数字 可选 无 可视化图表刷新其查询来源的频率（以秒为单位）。请仅在指定 dataSourceUrl 时使用。
    次观看 对象 OR 数组 可选 无 设置一个 DataView 初始化程序对象，该对象充当底层数据的过滤器，如 dataTable 或 dataSourceUrl 参数所定义。您可以传入字符串或 DataView 初始化程序对象，例如 dataview.toJSON() 返回的对象。 示例："view": {"columns": [1, 2]}您还可以传入 DataView 初始化程序对象的数组，在这种情况下，数组中的第一个 DataView 将应用于底层数据，以创建新数据表，第二个 DataView 将应用于应用第一个 DataView 后生成的数据表，依此类推。

    示例

    根据电子表格数据源创建表格图表，并包含查询 SELECT A,D WHERE D > 100 ORDER BY D 

    <script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

    下一个示例将创建相同的表，但会在本地创建一个 DataTable：

    <script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

    此示例传入图表的 JSON 字符串表示形式，但您可能已从文件加载了该表示法： 

    <script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

    drawToolbar()

    这是工具栏元素的构造函数，可附加到多个可视化图表。通过此工具栏，用户能够以不同的格式导出可视化数据，或者提供可视化的嵌入式版本以便在不同位置使用。如需了解详情并查看代码示例，请参阅工具栏页面。