Важно! С 20 апреля 2012 года функция графических диаграмм в Google Charts Tools официально объявлена устаревшей . Она продолжит работать в соответствии с нашей политикой прекращения поддержки .
Обзор
Generic Image Chart — это универсальная оболочка для всех диаграмм, созданных API Google Chart . Прежде чем использовать эту визуализацию, прочтите документацию по API Chart. Обратите внимание, что с помощью этой визуализации вы можете отправлять до 16 КБ данных, в отличие от ограничения в 2 КБ при прямых вызовах Chart API.
Все данные передаются на диаграммы с помощью DataTable или DataView. Кроме того, некоторые метки передаются как столбцы в таблице данных.
Все остальные параметры URL-адреса Chart API (кроме chd ) передаются как опции.
Автор: Google
Примеры
Вот примеры нескольких различных типов диаграмм.
Линейный график
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
Вертикальная гистограмма
Обратите внимание, что в обернутых гистограммах вам не нужно указывать chxt='x', как если бы вы сами вызывали диаграмму; если вы не укажете ось, общая диаграмма изображений попытается правильно настроить диаграмму по умолчанию.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
Загрузка
Имя пакета google.charts.load — «imagechart».
google.charts.load('current', {'packages': ['imagechart']});
Имя класса визуализации — google.visualization. ImageChart
var visualization = new google.visualization.ImageChart(container_div);
Формат данных
Существует два обобщенных формата данных: один для картографических диаграмм и один для всех остальных диаграмм. Обратите внимание, что единственным числовым форматом, поддерживаемым для данных, является числовой тип JavaScript.
Примечание . Не следует кодировать URL-адресом любые строковые значения, передаваемые как данные или параметры.
Карта Диаграммы
Диаграмма карты использует таблицу данных с двумя обязательными столбцами:
- Первый столбец — [ строка ] Код страны или штата/провинции .
- Второй столбец — [ число ] Значение для этой страны или штата.
Дополнительную информацию см. в документации по диаграмме карты .
Карты без карты
Диаграммы без карты используют таблицу данных с двумя необязательными столбцами (один в начале, один в конце) и одним или несколькими столбцами данных между ними:
- Первый столбец — [ необязательный, строка ] Каждая запись представляет собой метку, используемую на оси X (эквивалентно параметру
chlилиchxl) для поддерживающих ее диаграмм. - Следующие столбцы — любое количество числовых столбцов, каждый из которых представляет серию данных.
- Последние столбцы — [ необязательный, строка ] любое количество строковых столбцов после столбцов данных, где каждая запись представляет собой метку точки данных для поддерживающих ее диаграмм. Если вы хотите использовать этот столбец, вы должны указать параметр
annotationColumns.
Данные будут отображаться по-разному, в зависимости от типа диаграммы. См. документацию к вашей диаграмме.
Примечание об индексах столбцов. Визуализация Generic Image Chart удаляет строковые столбцы из таблицы данных перед отправкой таблицы в службу Chart API. Таким образом, индексы столбцов в параметрах, методах и событиях, определенных на этой странице, включают строковые столбцы в число индексов; но индексы столбцов в любых параметрах, обрабатываемых службой Chart API (например, в параметре chm ), игнорируют строковые столбцы в подсчете индексов.
Параметры конфигурации
Для этой визуализации определены следующие параметры. Определите их в объекте параметров, переданном в метод визуализации draw() . Не все из следующих параметров поддерживаются для всех типов диаграмм; см. документацию для вашего типа диаграммы статического изображения. Вы можете передать любой параметр URL-адреса Chart API в качестве опции. Например, параметр URL chg=50,50 из визуализации диаграммы будет указан следующим образом: options['chg'] = '50,50' .
Примечание о цветах. Параметры цвета, такие как colors , color и backgroundColor , указываются в цветовом формате Chart API . Этот формат аналогичен формату #RRGGBB, за исключением того, что он включает необязательное четвертое шестнадцатеричное число для обозначения прозрачности. Удобочитаемые цвета, такие как «красный», «зеленый», «синий» и т. д., не поддерживаются. Цветовой формат Chart API не включает начальный символ #, но общие параметры визуализации диаграммы изображения будут принимать цветовые коды с символом # или без него.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| аннотацияСтолбцы | Массив<объект> | никто | Метки точек данных для различных типов диаграмм. Это массив объектов, каждый из которых назначает форматированную метку одной точке данных на диаграмме. Этот параметр доступен только для диаграмм, которые поддерживают точки данных (см. связанный раздел, чтобы узнать, какие из них), а таблица данных должна иметь хотя бы один из столбцов строковых меток. Каждый объект в массиве имеет следующие свойства:
Пример . Этот фрагмент определяет черную 12-пиксельную текстовую метку с текстом, взятым из столбца 0 и назначенным точке данных в столбце 2 той же строки: |
| фоновый цвет | нить | '#FFFFFF' (белый) | Цвет фона диаграммы в цветовом формате Chart API . |
| цвет | нить | Авто | Указывает базовый цвет для использования во всех сериях; каждая серия будет градацией указанного цвета. Цвета задаются в цветовом формате Chart API . Игнорируется, если указаны colors . |
| цвета | Массив<строка> | Авто | Используйте это, чтобы назначить определенные цвета для каждой серии данных. Цвета задаются в цветовом формате Chart API . Цвет i используется для столбца данных i, переходя к началу, если столбцов данных больше, чем цветов. Если вариации одного цвета допустимы для всех серий, вместо этого используйте вариант color . |
| enableEvents | логический | ЛОЖЬ | Заставляет диаграммы генерировать инициированные пользователем события, такие как щелчок или наведение указателя мыши. Поддерживается только для определенных типов диаграмм. См. События ниже. |
| наполнять | логический | ЛОЖЬ | Если true, заполняет область под каждой строкой. Доступно только для линейных диаграмм. |
| первая скрытая колонка | количество | никто | Индекс столбца данных. Перечисленный столбец, а также все последующие столбцы не будут использоваться для рисования основных элементов серии диаграммы (например, линий на линейной диаграмме или столбцов на гистограмме), а вместо этого используются в качестве данных для маркеров и других аннотаций. . Обратите внимание, что строковые столбцы включены в этот индекс. |
| высота | количество | 200 | Высота диаграммы в пикселях. Если отсутствует или не находится в допустимом диапазоне, используется высота содержащего элемента. Если это также выходит за пределы допустимого диапазона, будет использоваться высота по умолчанию. |
| этикетки | нить | 'никто' | [ Только круговая диаграмма ] Какую метку (если она есть) отображать для каждого фрагмента. Выберите одно из следующих значений:
|
| легенда | нить | 'Правильно' | Где отображать легенду диаграммы относительно диаграммы. Укажите одно из следующего: «сверху», «снизу», «слева», «справа», «нет». Игнорируется в диаграммах, не содержащих легенд (например, картографических диаграммах). |
| Максимум | количество | Максимальное значение данных | Максимальное значение, отображаемое на шкале. Игнорируется для круговых диаграмм. По умолчанию используется максимальное значение данных, за исключением столбчатых диаграмм, где по умолчанию используется максимальное значение данных. Это игнорируется для линейчатых диаграмм, когда таблица содержит более одного столбца данных. |
| мин | количество | Минимальное значение данных | Минимальное значение, отображаемое на шкале. Игнорируется для круговых диаграмм. По умолчанию используется минимальное значение данных, за исключением столбчатых диаграмм, где значение по умолчанию равно нулю. Это игнорируется для линейчатых диаграмм, когда таблица содержит более одного столбца данных. |
| showCategoryLabels | логический | истинный | Должны ли метки появляться на оси категорий (то есть строк). Доступно только для линейных и столбчатых диаграмм. |
| показатьвалуелейблс | логический | истинный | True отображает метку на оси значений. Доступно только для линейных и столбчатых диаграмм. |
| singleColumnDisplay | количество | никто | Отображает только указанный столбец данных. Это число является отсчитываемым от нуля индексом в таблице, где ноль — это первый столбец данных. Цвет, назначенный одному столбцу, такой же, как и при отображении всех столбцов. Нельзя использовать с круговыми или картографическими диаграммами. |
| заглавие | нить | Пустой строки | Название диаграммы. Если не указано, заголовок отображаться не будет. Эквивалентный параметр диаграммы — chtt . |
| значениеLabelsInterval | количество | Авто | Интервал, с которым отображаются метки оси значений. Например, если min равно 0, max равно 100, а valueLabelsInterval равно 20, на диаграмме будут отображаться метки осей (0, 20, 40, 60, 80 100). |
| ширина | количество | 400 | Ширина диаграммы в пикселях. Если отсутствует или не находится в допустимом диапазоне, используется ширина содержащего элемента. Если это также выходит за пределы допустимого диапазона, будет использоваться ширина по умолчанию. |
Методы
| Метод | Тип возврата | Описание |
|---|---|---|
draw(data, options) | Никто | Рисует карту. |
getImageUrl() | Нить | Возвращает URL-адрес Google Chart API, используемый для запроса диаграммы. Обратите внимание, что это может быть более 2000 символов. Дополнительные сведения см. в Google Chart API . |
События
Если вы установите для свойства enableEvents значение true, тогда поддерживающие диаграммы будут создавать события для пользовательских событий, перечисленных в таблице ниже. Все эти события возвращают объект event со следующими свойствами:
-
type— строка, представляющая тип события. -
region— идентификатор затронутого региона. Добавьте параметрchof=jsonк необработанному типу диаграммы, чтобы увидеть список доступных имен. См.chof=jsonдля более подробной информации.
| Имя | Описание | тип Значение |
|---|---|---|
error | Запускается, когда возникает ошибка при попытке отобразить диаграмму. | идентификатор, сообщение |
onmouseover | Запускается, когда пользователь наводит указатель мыши на элемент диаграммы. | "навести курсор мыши" |
onmouseout | Запускается, когда пользователь уводит мышь от элемента диаграммы. | "мышь" |
onclick | Запускается, когда пользователь щелкает элемент диаграммы. | "щелкнуть" |
Какие графики поддерживают события?
Любые диаграммы, поддерживающие параметр chof=json , поддерживают генерирующие события (то есть все диаграммы, кроме специальных диаграмм, например QR-кодов).
Пример обработки событий
Вот пример, показывающий панель, которая записывает щелчки мыши.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>Политика данных
Данные отправляются в службу Google Chart API .
Локализация
Эта визуализация поддерживает любую локализацию, поддерживаемую службой Google Chart.