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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

• Создайте новый DataTable, затем вызовите addColumn()/addRows()/addRow()/setCell().
• массивToDataTable()
• Инициализатор литералов JavaScript
• Отправка запроса к источнику данных

Пустая таблица данных + 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>

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

• Запрос к источнику данных инструментов диаграмм
• Синтаксис литерала JavaScript DataTable
• Справочник DataTable
• Справочник по представлению DataView
• Ссылка arrayToDataTable()