Таблицы данных и представления данных

На этой странице обсуждается внутреннее представление данных, используемое диаграммами, классы DataTable и DataView , используемые для передачи данных в диаграмму, а также различные способы создания экземпляров и заполнения DataTable .

Содержание

  1. Как данные представлены на диаграмме
  2. Какую схему таблицы использует моя диаграмма?
  3. Таблицы данных и представления данных
  4. Создание и заполнение таблицы данных
    1. Создайте новый DataTable, затем вызовите addColumn()/addRows()/addRow()/setCell().
    2. массивToDataTable()
    3. Инициализатор литералов JavaScript
    4. Отправка запроса к источнику данных
  5. dataTableToCsv()
  6. Больше информации

Как данные представлены на диаграмме

Все диаграммы хранят свои данные в таблице. Вот упрощенное представление заполненной таблицы данных с двумя столбцами:

индекс: 0
тип: строка
метка: «Задача»

 индекс: 1
тип: номер
метка: «Часов в день»
'Работа' 11
'Есть' 2
'Добираться' 2
'Смотреть телевизор' 2
'Спать' 7

Данные хранятся в ячейках, на которые ссылаются как ( row , columns ), где row — это индекс строки, отсчитываемый от нуля, а столбец — это либо индекс столбца, отсчитываемый от нуля, либо уникальный идентификатор, который вы можете указать.

Вот более полный список поддерживаемых элементов и свойств таблицы; дополнительные сведения см. в разделе «Формат параметра литерала JavaScript конструктора» :

  • Таблица — массив столбцов и строк, а также дополнительная карта произвольных пар имя/значение, которые вы можете назначить. Свойства уровня таблицы в настоящее время не используются диаграммами.
  • Столбцы . Каждый столбец поддерживает требуемый тип данных, а также необязательную строковую метку, идентификатор, шаблон и карту произвольных свойств имени и значения. Метка представляет собой удобную для пользователя строку, которую можно отобразить на диаграмме; ID — это необязательный идентификатор, который можно использовать вместо индекса столбца. На столбец можно ссылаться в коде либо по индексу, начинающемуся с нуля, либо по дополнительному идентификатору. См. DataTable.addColumn() для получения списка поддерживаемых типов данных.
  • Строки . Строка представляет собой массив ячеек плюс необязательную карту произвольных пар имя/значение, которые вы можете назначить.
  • Ячейки . Каждая ячейка представляет собой объект, содержащий фактическое значение типа столбца, а также необязательную версию предоставленного вами значения в строковом формате. Например: числовому столбцу может быть присвоено значение 7 и форматированное значение «семь». Если указано форматированное значение, диаграмма будет использовать фактическое значение для вычислений и рендеринга, но может отображать форматированное значение там, где это необходимо, например, если пользователь наводит курсор на точку. Каждая ячейка также имеет дополнительную карту произвольных пар имя/значение.

Какую схему таблицы использует моя диаграмма?

В разных диаграммах используются таблицы разных форматов: например, круговая диаграмма предполагает наличие таблицы из двух столбцов со строковым столбцом и числовым столбцом, где каждая строка описывает срез, а первый столбец — это метка среза, а второй столбец — это значение среза. Однако точечная диаграмма предполагает таблицу, состоящую из двух числовых столбцов, где каждая строка представляет собой точку, а два столбца представляют собой значения X и Y точки. Прочтите документацию к вашей диаграмме, чтобы узнать, какой формат данных ей требуется.

Таблицы данных и представления данных

Таблица данных диаграммы представлена ​​в JavaScript либо объектом DataTable , либо объектом DataView . В некоторых случаях вы можете увидеть используемый литерал JavaScript или JSON-версию DataTable, например, когда данные отправляются через Интернет с помощью источника данных инструментов диаграммы, или в качестве возможного входного значения для ChartWrapper .

DataTable используется для создания исходной таблицы данных. DataView — это удобный класс, который предоставляет представление DataTable только для чтения с методами для быстрого скрытия или изменения порядка строк или столбцов без изменения связанных исходных данных. Вот краткое сравнение двух классов:

Таблица данных Просмотр данных
Читай пиши Только чтение
Может быть создан пустым, а затем заполнен Является ссылкой на существующий DataTable . Невозможно заполнить с нуля; должен быть создан со ссылкой на существующий DataTable .
Данные занимают место для хранения. Данные являются ссылкой на существующий DataTable и не занимают места.
Можно добавлять/редактировать/удалять строки, столбцы и данные; все изменения сохраняются. Можно сортировать или фильтровать строки без изменения базовых данных. Строки и столбцы можно скрывать и открывать повторно.
Можно клонировать Может возвращать версию представления DataTable .
Есть исходные данные; не содержит ссылок Живая ссылка на DataTable ; любые изменения в данных DataTable немедленно отражаются в представлении.
Можно передать в диаграмму в качестве источника данных. Можно передать в диаграмму в качестве источника данных.
Не поддерживает вычисляемые столбцы Поддерживает вычисляемые столбцы, то есть столбцы, значения которых вычисляются «на лету» путем объединения или управления другими столбцами.
Нет скрытия строк или столбцов Можно скрыть или показать выбранные столбцы

Создание и заполнение таблицы данных

Существует несколько различных способов создания и заполнения DataTable:

Пустая таблица данных + addColumn()/addRows()/addRow()/setCell()

Шаги:

  1. Создайте экземпляр нового DataTable
  2. Добавить столбцы
  3. Добавьте одну или несколько строк, при необходимости заполненных данными. Вы можете добавить пустые строки и заполнить их позже. Вы также можете добавлять или удалять дополнительные строки или редактировать значения ячеек по отдельности.

Преимущества:

  • Вы можете указать тип данных и метку каждого столбца.
  • Подходит для создания таблицы в браузере и менее подвержен опечаткам, чем литеральный метод JSON.

Недостатки:

  • Не так полезно, как создание строки-литерала JSON для передачи в конструктор DataTable при программном создании страницы на веб-сервере.
  • Зависит от скорости браузера и может быть медленнее, чем литеральные строки JSON с большими таблицами (около 1000+ ячеек).

Примеры:

Вот несколько примеров создания одной и той же таблицы данных с использованием различных вариантов этого метода:

// ------- 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));

массивToDataTable()

Эта вспомогательная функция создает и заполняет DataTable с помощью одного вызова.

Преимущества:

  • Очень простой и читаемый код, выполняемый в браузере.
  • Вы можете либо явно указать тип данных каждого столбца, либо позволить Google Charts определить тип на основе переданных данных.
    • Чтобы явно указать тип данных столбца, укажите объект в строке заголовка с помощью свойства type .
    • Чтобы Google Charts определил тип, используйте строку в качестве метки столбца.

Примеры:

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 можно скопировать, изменить или скопировать в DataView так же, как и любой другой DataTable.

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.

Следующий код отобразит

Ramanujan,1729
Gauss,5050

в консоли JavaScript вашего браузера:

<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>

Больше информации