Важно! Часть «Диаграммы изображений» в Google Chart Tools официально объявлена устаревшей с 20 апреля 2012 г. Она продолжит работать в соответствии с нашей политикой прекращения поддержки .
Обзор
Одна или несколько спарклайнов, отображаемых с помощью изображений с помощью API Google Charts . Изображения содержатся в таблице 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:["imagesparkline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Revenue', 'Licenses'],
[435, 132],
[438, 131],
[512, 137],
[460, 142],
[491, 140],
[487, 139],
[552, 147],
[511, 146],
[505, 151],
[509, 149]
]);
var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));
chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 120px; height: 40px;"></div>
</body>
</html>
Загрузка
Имя пакета google.charts.load — "imagesparkline" .
google.charts.load("current", {packages: ["imagesparkline"]});
Имя класса визуализации — google.visualization.ImageSparkLine .
var visualization = new google.visualization.ImageSparkLine(container);
Формат данных
Любое количество столбцов. Все столбцы должны быть числами. Каждый столбец отображается в виде одной спарклайна.
Параметры конфигурации
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| цвет | нить | Указывает цвет, который будет использоваться для всех диаграмм. Строка в формате #rrggbb. Например: «#00cc00». Используется только в том случае, если опция colors не указана. | |
| цвета | Массив строк | Цвета по умолчанию | Цвета, используемые для столбцов данных. Массив строк, каждый элемент которого представляет собой строку в формате #rrggbb. Например: «#00cc00». Цвет i используется для столбца данных i. Если количество цветов меньше количества столбцов, выбор цвета будет повторяться. |
| наполнять | логическое значение | ЛОЖЬ | Если это правда, область под линией будет заполнена цветом. |
| высота | число | Высота контейнера | Высота изображений в пикселях. |
| меткаПозиция | нить | никто | Положение меток. Поддерживаемые значения: «нет», «слева», «справа». |
| Макс | Массив чисел | Максимальное значение данных каждой спарклайна | Максимальное значение диапазона значений данных каждой спарклайна. Индекс в массиве должен соответствовать индексу столбца в DataTable. Если все значения равны нулю, это будет максимальное значение в серии. |
| мин | Массив чисел | Минимальное значение данных каждой спарклайна | Наименьшее значение диапазона значений данных каждой спарклайна. Индекс в массиве должен соответствовать индексу столбца в DataTable. Если все значения равны нулю, это будет минимальное значение в серии. |
| showAxisLines | логическое значение | истинный | Если это правда, отображаются линии оси. Если значение false, это не так, и значением по умолчанию для showValueLabels является значение false. |
| showValueLabels | логическое значение | true, за исключением случаев, когда showAxisLines имеет значение false. | Если это правда, отображаются метки оси значений. |
| заголовок | Массив строк | Заголовки не отображаются | Заголовки для каждой спарклайна. |
| ширина | число | Ширина контейнера | Ширина диаграмм в пикселях. |
| макет | нить | 'в' | Вертикальная или горизонтальная компоновка: «v» — вертикально, «h» — горизонтально. |
Методы
| Метод | Тип возврата | Описание |
|---|---|---|
draw(data, options) | никто | Рисует диаграмму. |
getSelection() | Массив элементов выбора | Возвращает индексы выбранных диаграмм в виде массива объектов. У каждого объекта есть свойство столбца, содержащее номер столбца выбранной спарклайна. Может возвращать более одного выбранного столбца. |
setSelection(selection) | никто | Выбирает указанные спарклайны и отменяет выбор всех неуказанных спарклайнов. выделение — это массив объектов, каждый из которых имеет числовое свойство column , которое является индексом выбранной спарклайна. см. setSelection() для получения дополнительной информации. |
События
| Имя | Описание | Характеристики |
|---|---|---|
| выбирать | Стандартное событие выбора. | Никто |