此页面由 Cloud Translation API 翻译。

DataTable 和 DataView

本页讨论了图表使用的内部数据表示法、用于将数据传递到图表中的 DataTable 和 DataView 类，以及实例化和填充 DataTable 的各种方法。

数据在图表中表示的方式

所有图表的数据存储在表格中。下面是一个已填充的两列数据表的简化表示法：

索引：0 类型：字符串标签：“Task”	索引：1 类型：数字标签：“小时/天”
“单位”	11
“吃”	2
“通勤”	2
“观看电视节目”	2
“睡眠”	7

数据存储在以 (row, column) 引用的单元格中，其中 row 是从 0 开始的行索引，column 是从零开始的列索引或您可以指定的唯一 ID。

下面列出了表格所支持的元素和属性的更完整列表；如需了解更多详情，请参阅构造函数的 JavaScript 字面量参数的格式：

表格 - 一组列和行，以及您可以分配的任意名称/值对的可选映射。图表目前不使用表格级属性。
列 - 每列都支持必需的数据类型，以及可选的字符串标签、ID、模式以及任意名称/值属性的映射。标签是直观易懂的字符串，可由图表显示；ID 是可选标识符，可以代替列索引。可以通过在代码中通过从零开始的索引或者通过可选 ID 来引用列。如需查看支持的数据类型列表，请参阅 DataTable.addColumn()。
行 - 行是单元格的数组，以及您可以分配的任意名称/值对的可选映射。
单元格 - 每个单元格都是一个对象，其中包含列类型的实际值，以及您提供的值（可选的字符串格式版本）。例如：可以为数字列分配值 7 和格式化值“seven”。如果提供了格式化值，则图表将使用实际值进行计算和呈现，但在适当情况下（例如，当用户将鼠标悬停在某个点上时）可能会显示格式化的值。每个单元格还包含一个由任意名称/值对组成的可选映射。

我的图表使用哪种表架构？

不同的图表使用不同格式的表格：例如，饼图需要一个包含字符串列和数字列的两列表格，其中每行描述一个切片，第一列是切片标签，第二列是切片值。不过，散点图要求表格由两个数值列组成，其中每行代表一个点，两列分别是该点的 X 值和 Y 值。请参阅图表的文档，了解所需的数据格式。

数据表和数据视图

图表数据表在 JavaScript 中由 DataTable 对象或 DataView 对象表示。在某些情况下，您可能会看到所使用的 JavaScript 字面量或 JSON 版本的 DataTable。例如，当图表工具数据源通过互联网发送数据时，或者作为 ChartWrapper 的可能输入值。

DataTable 用于创建原始数据表。DataView 是一种便捷类，可提供 DataTable 的只读视图，其中包含快速隐藏行或列或对其重新排序，而无需修改链接的原始数据。下面对这两个类进行了简要比较：

DataTable	DataView
读写	只读
可以创建为空，然后进行填充	是对现有 `DataTable` 的引用。无法从头开始填充；必须通过引用现有 `DataTable` 进行实例化。
数据会占用存储空间。	数据是对现有 `DataTable` 的引用，不会占用空间。
可以添加/修改/删除行、列和数据，并且所有更改都是永久性的。	可以在不修改基础数据的情况下对行进行排序或过滤。行和列可以重复隐藏和显示。
可以克隆	可以返回 `DataTable` 版本的视图
是源数据；不包含引用	对 `DataTable` 的实时引用；`DataTable` 数据中的任何更改都会立即反映在视图中。
可以作为数据源传入图表	可以作为数据源传入图表
不支持计算列	支持计算列，即具有通过组合或操纵其他列即时计算的值的列。
没有隐藏行或列	可以隐藏或显示所选列

创建和填充数据表

您可以通过多种不同方式创建和填充 DataTable：

创建一个新的 DataTable，然后调用 addColumn()/addRows()/addRow()/setCell()
arrayToDataTable()
JavaScript 字面量初始化程序
发送数据源查询

空 DataTable + addColumn()/addRows()/addRow()/setCell()

步骤：

实例化一个新的 DataTable
添加列
添加一行或多行，并视需要填充数据。您可以添加空行并在稍后进行填充。您还可以添加或移除行，或者逐个修改单元格的值。

优点：

您可以指定每列的数据类型和标签。
适合在浏览器中生成表格，不如使用 JSON 字面量方法更容易出现拼写错误。

缺点：

不如构建在 Web 服务器上以编程方式生成页面时构建要传递到 DataTable 构造函数的 JSON 字面量字符串那么有用。
取决于浏览器的速度，可能比使用较大表格（约 1,000 个以上单元格）的 JSON 字面量字符串慢。

示例：

下面的几个示例展示了如何使用此分析法的不同变体创建相同的数据表：

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  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));

arrayToDataTable()

此辅助函数通过单次调用创建并填充 DataTable。

优点：

在浏览器中执行的非常简单且可读的代码。
您可以明确指定每列的数据类型，也可以让 Google 图表根据传入的数据推断出类型。
- 要明确指定列的数据类型，请使用 type 属性在标题行中指定一个对象。
- 要让 Google 图表推断类型，请为列标签使用字符串。

示例：

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.

var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

JavaScript 字面量初始化程序

您可以将 JavaScript 字面量对象传递到表构造函数，定义表架构和（可选）数据。

优点：

在网络服务器上生成数据时非常有用。
对于大型表格（约 1,000 个以上单元格），处理速度比其他方法更快

缺点：

语法很难正确，且容易拼写错误。
代码可读性欠佳。
与 JSON 暂时类似，但不完全相同。

示例：

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

发送数据源查询

当您向图表工具数据源发送查询时，成功的回复是一个 DataTable 实例。与任何其他 DataTable 一样，这个返回的 DataTable 可以被复制、修改或复制到 DataView 中。

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

辅助函数 google.visualization.dataTableToCsv(data) 可返回一个包含数据表中数据的 CSV 字符串。

此函数的输入可以是 DataTable 或 DataView。

它使用单元格的格式化值。系统会忽略列标签。

“,”和“\n”等特殊字符使用标准 CSV 转义规则进行转义。

以下代码将在浏览器的 JavaScript 控制台中显示

Ramanujan,1729 Gauss,5050

：

<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']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

DataTable 和 DataView

目录

数据在图表中表示的方式

我的图表使用哪种表架构？

数据表和数据视图

创建和填充数据表

空 DataTable + addColumn()/addRows()/addRow()/setCell()

arrayToDataTable()

JavaScript 字面量初始化程序

发送数据源查询

dataTableToCsv()

更多信息