Обзор
Таблица, которую можно сортировать и разбивать на страницы. Ячейки таблицы можно форматировать с помощью строк формата или путем прямой вставки HTML в качестве значений ячеек. Числовые значения выравниваются по правому краю; логические значения отображаются в виде галочек. Пользователи могут выбирать отдельные строки с помощью клавиатуры или мыши. Пользователи могут сортировать строки, нажимая на заголовки столбцов. Строка заголовка остается фиксированной при прокрутке пользователем. Таблица запускает ряд событий, соответствующих взаимодействию с пользователем.
Пример
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>
Загрузка
Имя пакета google.charts.load — "table" .
google.charts.load('current', {packages: ['table']});
Имя класса визуализации — google.visualization.Table .
var visualization = new google.visualization.Table(container);
Формат данных
DataTable преобразуется в соответствующую таблицу HTML, при этом каждая строка/столбец в DataTable преобразуется в строку/столбец в таблице HTML. Каждый столбец должен иметь один и тот же тип данных. Поддерживаются все стандартные типы данных визуализации (строка, логическое значение, число и т. д.).
Пользовательские свойства
Вы можете присвоить следующие пользовательские свойства элементам таблицы данных, используя метод setProperty() класса DataTable .
| Имя свойства | Относится к | Описание |
|---|---|---|
| имя класса | Клетка | Имя строкового класса, которое можно назначить отдельной ячейке. Используйте это, чтобы назначить стиль CSS отдельным ячейкам. |
| стиль | Клетка | Строка стиля, которую можно назначить встроенной в ячейку. Это переопределит стили классов CSS, примененные к этой ячейке. Чтобы это работало, вы должны установить свойствоallowHtml=true. Пример: 'border: 1px solid green;' . |
Пример
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});Параметры конфигурации
| Имя | |
|---|---|
| разрешитьHtml | Если установлено значение true, форматированные значения ячеек, содержащих теги HTML, будут отображаться как HTML. Если установлено значение false, большинство пользовательских средств форматирования не будут работать должным образом. Тип: логический По умолчанию: ложь |
| чередованиеRowStyle | Определяет, будет ли чередующийся цветовой стиль назначен нечетным и четным строкам. Тип: логический По умолчанию: правда |
| cssClassNames | Объект, в котором каждое имя свойства описывает элемент таблицы, а значение свойства представляет собой строку, определяющую класс, присваиваемый этому элементу таблицы. Используйте это свойство, чтобы назначить пользовательский CSS определенным элементам вашей таблицы. Чтобы использовать это свойство, назначьте объект, где имя свойства указывает элемент таблицы, а значение свойства представляет собой строку, определяющую имя класса, которое нужно присвоить этому элементу. Затем вы должны определить стиль CSS для этого класса на своей странице. Поддерживаются следующие имена свойств:
Пример: Примечание. В CSS некоторые элементы переопределяют другие. Например, если вы укажете цвет фона для элемента Тип: объект По умолчанию: ноль |
| FirstRowNumber | Номер строки для первой строки в dataTable. Используется только в том случае, если showRowNumber имеет значение true. Тип: номер По умолчанию: 1 |
| замороженные столбцы | Количество столбцов слева, которые будут заморожены. Эти столбцы останутся на месте при горизонтальной прокрутке остальных столбцов. Если Тип: номер По умолчанию: ноль |
| высота | Устанавливает высоту элемента контейнера визуализации. Вы можете использовать стандартные единицы HTML (например, «100 пикселей», «80em», «60»). Если единицы измерения не указаны, предполагается, что это количество пикселей. Если не указано, браузер автоматически отрегулирует высоту в соответствии с таблицей, максимально сжимаясь при этом; если установлено значение меньше требуемой высоты, в таблице будет добавлена вертикальная полоса прокрутки (строка заголовка также будет зафиксирована). Если установлено значение «100%», таблица максимально расширится до элемента контейнера. Тип: строка По умолчанию: автоматический |
| страница | Если и как включить постраничное перелистывание данных. Выберите одно из следующих строковых значений:
Тип: строка По умолчанию: «отключить» |
| размер страницы | Количество строк на каждой странице, если разбиение по страницам включено с помощью параметра страницы. Тип: номер По умолчанию: 10 |
| Кнопки пейджинга | Устанавливает указанную опцию для кнопок листания. Возможные варианты:
Тип: строка или число. По умолчанию: «авто» |
| rtlTable | Добавляет базовую поддержку языков с письмом справа налево (таких как арабский или иврит), изменяя порядок столбцов таблицы на противоположный, так что нулевой столбец является самым правым столбцом, а последний столбец — самым левым столбцом. Это не влияет на индекс столбца в базовых данных, а только на порядок отображения. Полное двунаправленное языковое отображение (BiDi) не поддерживается визуализацией таблицы даже при использовании этой опции. Этот параметр будет проигнорирован, если вы включите разбивку по страницам (используя параметр страницы) или если в таблице есть полосы прокрутки, поскольку вы указали параметры высоты и ширины, меньшие, чем требуемый размер таблицы. Тип: логический По умолчанию: ложь |
| прокруткаLeftStartPosition | Устанавливает положение горизонтальной прокрутки в пикселях, если таблица имеет горизонтальные полосы прокрутки, поскольку вы установили свойство ширины. Таблица откроется с прокруткой на такое количество пикселей за крайний левый столбец. Тип: номер По умолчанию: 0 |
| показатьстрокуномер | Если установлено значение true, номер строки отображается в качестве первого столбца таблицы. Тип: логический По умолчанию: ложь |
| Сортировать | Если и как сортировать столбцы, когда пользователь щелкает заголовок столбца. Если сортировка включена, рассмотрите возможность установки свойств sortAscending и sortColumn. Выберите одно из следующих строковых значений:
Тип: строка По умолчанию: «включить» |
| Сортировать по возрастанию | Порядок сортировки исходного столбца сортировки. Верно для восходящего, ложно для нисходящего. Игнорируется, если Тип: логический По умолчанию: правда |
| сортировкаКолонка | Индекс столбца в таблице данных, по которому таблица изначально сортируется. Столбец будет отмечен маленькой стрелкой, указывающей порядок сортировки. Тип: номер По умолчанию: -1 |
| Начальная страница | Первая отображаемая страница таблицы. Используется только если Тип: номер По умолчанию: 0 |
| ширина | Устанавливает ширину элемента контейнера визуализации. Вы можете использовать стандартные единицы измерения HTML (например, «100 пикселей», «80em», «60»). Если единицы измерения не указаны, предполагается, что это количество пикселей. Если не указано, браузер автоматически отрегулирует ширину в соответствии с таблицей, максимально сжимаясь при этом; если установлено значение меньше требуемой ширины, в таблице будет добавлена горизонтальная полоса прокрутки. Если установлено значение «100%», таблица максимально расширится до элемента контейнера. Тип: строка По умолчанию: автоматический |
Методы
| Метод | |
|---|---|
draw(data, options) | Рисует таблицу. Тип возврата: нет |
getSelection() | Стандартная реализация getSelection. Все элементы выбора являются элементами строки. Может возвращать более одной выбранной строки. Индексы строк в объекте выбора относятся к исходной таблице данных независимо от любого взаимодействия с пользователем (сортировка, разбиение по страницам и т. д.). Обратите внимание, что выбор(ы) переключаются: щелчок по ячейке в первый раз выделяет ее; Повторный щелчок по ячейке отменяет ее выделение, что приводит к событию выбора, но в полученном объекте выбора нет выбранных элементов. Тип возвращаемого значения: Массив элементов выбора. |
getSortInfo() | Вызовите этот метод, чтобы получить информацию о текущем состоянии сортировки таблицы, которая была отсортирована (обычно пользователем, который щелкнул заголовок столбца, чтобы отсортировать строки по определенному столбцу). Если у вас отключена сортировка, этот метод не сработает. Если вы не отсортировали данные в коде или пользователь не отсортировал данные, выбрав код, будут возвращены значения сортировки по умолчанию. Тип возвращаемого значения: объект со следующими свойствами:
|
setSelection(selection) | Стандартная реализация Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
События
| Имя | |
|---|---|
| выбирать | Стандартное событие выбора, но можно выбрать только целые строки. Свойства: Нет |
| страница | Срабатывает, когда пользователи нажимают кнопку навигации по странице. Свойства: page : Номер. Индекс страницы, на которую нужно перейти. |
| Сортировать | Срабатывает, когда пользователи нажимают на заголовок столбца, а опция сортировки не отключена. Свойства: Объект со следующими свойствами:
|
| готовый | Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода рисования и вызывать их только после того, как событие было запущено. Свойства: Нет |
Форматеры
Примечание. Визуализация таблицы имеет набор объектов форматирования, которые были заменены универсальными форматтерами , которые ведут себя таким же образом, но могут использоваться в любой визуализации.
В следующей таблице показаны устаревшие средства форматирования таблиц и эквивалентные им общие средства форматирования. При написании нового кода следует использовать универсальный форматтер.
| Средство форматирования таблиц | |
|---|---|
| ТаблицаСтрелкаФормат | google.visualization.ArrowFormat |
| ТаблицаБарФормат | google.visualization.BarFormat |
| ТаблицаЦветФормат | google.visualization.ColorFormat |
| ТаблицеДатаФормат | google.visualization.DateFormat |
| ТабличныйНомерФормат | google.visualization.NumberFormat |
| ТаблицаШаблонФормат | google.visualization.PatternFormat |
Важно: форматировщики часто используют HTML для форматирования текста; поэтому вам следует установить для allowHtml значение true .
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.