DataTables 和 DataViews

本页面讨论了图表使用的内部数据表示形式、用于将数据传递到图表的 DataTableDataView 类,以及实例化和填充 DataTable 的各种方式。

内容

  1. 数据在图表中的显示方式
  2. 我的图表使用什么表架构?
  3. DataTables 和 DataViews
  4. 创建和填充 DataTable
    1. 创建一个新的 DataTable,然后调用 addColumn()/addRows()/addRow()/setCell()
    2. arrayToDataTable()
    3. JavaScript 文字初始化程序
    4. 发送数据源查询
  5. dataTableToCsv()
  6. 更多信息

数据在图表中的显示方式

所有图表都会将其数据存储在表中。下面是填充后的两列数据表的简化表示形式:

索引:0
类型:字符串
标签:“任务”

索引:1
类型:数字
标签:“小时”
“工作” 11
“美食” 2
“通勤” 2
“观看电视” 2
“睡眠” 7

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

以下是表支持的元素和属性的完整列表;如需了解详情,请参阅构造函数的 JavaScript 字面量参数的格式

  • 表格 - 列和行数组,以及可指定的任意名称/值对的可选映射。图表目前不使用表格级属性。
  • - 每一列都支持必需的数据类型,以及可选的字符串标签、ID、模式以及任意名称/值属性映射。标签是可通过图表显示的用户友好字符串;ID 是可选标识符,可用于替代列索引。列可通过从零开始的索引或可选 ID 在代码中引用。如需查看支持的数据类型列表,请参阅 DataTable.addColumn()
  • - 行是一个单元格数组,以及可指定的任意名称/值对的可选映射。
  • 单元格 - 每个单元格都是一个包含列类型的实际值以及您提供的值的可选字符串格式版本的对象。例如:系统可能会为数值列赋值 7,而格式化值为“seven”。 如果提供了格式化值,图表会使用实际值进行计算和渲染,但可能会在适当情况下显示格式化值,例如当用户将鼠标悬停在某个点上时。每个单元格还有一个任意名称/值对的映射。

我的图表使用的是哪种表架构?

不同的图表使用不同的格式的表:例如,一张饼图需要包含字符串列和数字列的两列表,其中每一行描述一个切片,第一列是切片标签,第二列是切片值。但是,散点图需要由两个数字列组成的表,其中每一行都是一个点,并且这两列是该点的 X 和 Y 值。请参阅图表的文档,了解图表所需的数据格式。

DataTable 和 DataView

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

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

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

创建和填充 DataTable

您可以通过几种不同的方式创建和填充 DataTable:

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

步骤

  1. 实例化新的 DataTable
  2. 添加列
  3. 添加一行,可选择填充数据。您可以添加空行,稍后再填充它们。您还可以添加或移除行,或者单独修改单元格的值。

优点:

  • 您可以指定每列的数据类型和标签。
  • 适合在浏览器中生成表,并且比 JSON 字面量方法更不易出现拼写错误。

缺点:

  • 不太适合在 Web 服务器上以编程方式生成页面时,构建一个 JSON 字面量字符串以传入 DataTable 构造函数。
  • 取决于浏览器的速度,可能比大型表格(大约 1000 个单元格)的 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 字面量对象传递到表构造函数,并定义表架构和数据(可选)。

优点:

  • 在网络服务器上生成数据时很有用。
  • 对于大型表(大约 1000 个以上的单元格),处理速度比其他方法快

缺点:

  • 语法使用起来很不方便,而且容易拼写错误。
  • 代码不太可读。
  • 与 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>

详细信息