На этой странице обсуждаются внутреннее представление данных, используемое диаграммами, классы DataTable
и DataView
, используемые для передачи данных в диаграмму, а также различные способы создания и DataTable
.
Содержание
- Как данные представлены на диаграмме
- Какую схему таблицы использует моя диаграмма?
- Таблицы данных и представления данных
- Создание и заполнение DataTable
- dataTableToCsv()
- Дополнительная информация
Как данные представлены на диаграмме
Все диаграммы хранят свои данные в таблице. Вот упрощенное представление заполненной таблицы данных из двух столбцов:
индекс: 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().
- arrayToDataTable()
- Инициализатор литерала JavaScript
- Отправка запроса к источнику данных
Пустая таблица данных + addColumn()/addRows()/addRow()/setCell()
Шаги:
- Создайте новую
DataTable
- Добавить столбцы
- Добавьте одну или несколько строк, при необходимости заполненных данными. Вы можете добавить пустые строки и заполнить их позже. Вы также можете добавлять или удалять строки, дополнительные строки или редактировать значения ячеек по отдельности.
Преимущества:
- Вы можете указать тип данных и метку каждого столбца.
- Хорошо подходит для создания таблицы в браузере и менее подвержен опечаткам, чем литеральный метод 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>