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

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

Содержание

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

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

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

индекс: 0
тип: строка
метка: "Задание"

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

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

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

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

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

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

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

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

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

Таблица данных Просмотр данных
Читай пиши Только для чтения
Может быть создан пустым, а затем заполнен Является ссылкой на существующий DataTable . Не может быть заполнен с нуля; должен быть создан со ссылкой на существующий DataTable .
Данные занимают место для хранения. Data является ссылкой на существующую 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));

arrayToDataTable()

Эта вспомогательная функция создает и заполняет 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. Эта возвращенная таблица данных может быть скопирована, изменена или скопирована в представление данных так же, как и любая другая таблица данных.

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>

Дополнительная информация