Визуализация: общая диаграмма изображений

Важно! Часть «Диаграммы изображений» в Google Chart Tools официально объявлена ​​устаревшей с 20 апреля 2012 г. Она продолжит работать в соответствии с нашей политикой прекращения поддержки .

  1. Обзор
  2. Примеры
  3. Загрузка
  4. Формат данных
  5. Параметры конфигурации
  6. Методы
  7. События
  8. Политика данных
  9. Локализация

Обзор

Generic Image Chart — это общая оболочка для всех диаграмм, созданных с помощью Google Chart API . Прежде чем использовать эту визуализацию, прочтите документацию по Chart API. Обратите внимание, что с помощью этой визуализации вы можете отправлять до 16 КБ данных, в отличие от ограничения в 2 КБ при прямых вызовах 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. Таким образом, индексы столбцов в параметрах, методах и событиях, определенных на этой странице, включают строковые столбцы в число индексов; но индексы столбцов в любых параметрах, обрабатываемых службой API диаграмм (например, параметр chm ), игнорируют строковые столбцы в счетчике индексов.

Параметры конфигурации

Для этой визуализации определены следующие параметры. Определите их в объекте параметров, переданном в метод draw() визуализации. Не все следующие параметры поддерживаются для всех типов диаграмм; см. документацию для вашего типа диаграммы статических изображений. В качестве опции можно передать любой параметр URL-адреса Chart API. Например, параметр URL-адреса chg=50,50 из визуализации диаграммы будет указан следующим образом: options['chg'] = '50,50' .

Примечание о цветах. Параметры цвета, такие как colors , color и backgroundColor , указаны в цветовом формате Chart API . Этот формат аналогичен формату #RRGGBB, за исключением того, что он включает необязательное четвертое шестнадцатеричное число для обозначения прозрачности. Читаемые человеком цвета, такие как «красный», «зеленый», «синий» и т. д., не поддерживаются. Цветовой формат Chart API не включает начальный символ #, но общие параметры визуализации диаграммы изображений принимают цветовые коды с # или без него.

Имя Тип По умолчанию Описание
аннотацииСтолбцы Массив<объект> никто

Метки точек данных для различных типов диаграмм. Это массив объектов, каждый из которых присваивает форматированную метку одной точке данных на диаграмме. Этот параметр доступен только для диаграмм, которые поддерживают точки данных (см. связанный раздел, чтобы узнать, какие именно), а таблица данных должна содержать хотя бы один из столбцов строковых меток.

Каждый объект в массиве имеет следующие свойства:

  • column [ число ] — индекс столбца, начинающийся с нуля, который содержит текст, используемый в аннотации. Вам не нужны значения в каждой строке этого столбца.
  • positionColumn [ число ] — отсчитываемый от нуля индекс столбца, в котором содержится помеченная точка данных. По умолчанию используется первый столбец данных.
  • color [ строка ] — цвет текста аннотации в цветовом формате Chart API . По умолчанию — «#000000» (черный).
  • size [ число ] — размер шрифта аннотации в пикселях.
  • priority [ строка ] — «низкий», «средний» или «высокий», определяющий слой, в котором должна отображаться метка. По умолчанию установлено значение «средний», что означает, что метка отображается после полос и линий, но перед другими метками.
  • type [ строка ] — либо «текст», либо «флаг». «текст» создает обычную текстовую аннотацию, а «флаг» создает всплывающую аннотацию.

Пример. Этот фрагмент определяет черную текстовую метку размером 12 пикселей с текстом, взятым из столбца 0 и присвоенным точке данных в столбце 2 той же строки: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];

фоновый цвет нить '#FFFFFF' (белый) Цвет фона диаграммы в цветовом формате Chart API .
цвет нить Авто Указывает базовый цвет для использования во всех сериях; каждая серия будет представлять собой градацию указанного цвета. Цвета указываются в цветовом формате Chart API . Игнорируется, если указаны colors .
цвета Массив<строка> Авто Используйте это, чтобы назначить определенные цвета каждому ряду данных. Цвета указываются в цветовом формате Chart API . Цвет i используется для столбца данных i, переносясь к началу, если столбцов данных больше, чем цветов. Если вариации одного цвета приемлемы для всех серий, используйте вместо этого вариант color .
EnableEvents логическое значение ЛОЖЬ Заставляет диаграммы генерировать события, инициируемые пользователем, такие как щелчок или наведение указателя мыши. Поддерживается только для определенных типов диаграмм. См. «События» ниже.
наполнять логическое значение ЛОЖЬ Если это правда, заполняет область под каждой строкой. Доступно только для линейных диаграмм.
первый скрытый столбец число никто

Индекс столбца данных. Перечисленный столбец, а также все последующие столбцы не будут использоваться для рисования основных элементов серии диаграмм (например, линий на линейной диаграмме или столбцов на гистограмме), а вместо этого используются в качестве данных для маркеров и других аннотаций. . Обратите внимание, что строковые столбцы включены в этот индекс.

высота число 200 Высота диаграммы в пикселях. Если значение отсутствует или не находится в допустимом диапазоне, используется высота содержащего элемента. Если это значение также выходит за пределы допустимого диапазона, будет использоваться высота по умолчанию.
этикетки нить 'никто'

[ Только круговая диаграмма ] Какую метку, если таковая имеется, отображать для каждого фрагмента. Выберите одно из следующих значений:

  • 'none' — меток нет.
  • «значение» — показать значение среза в виде метки.
  • «имя» — отображать имя фрагмента (имя столбца) в качестве метки.
легенда нить 'верно' Где отображать легенду диаграммы относительно диаграммы. Укажите одно из следующих значений: «сверху», «снизу», «слева», «справа», «нет». Игнорируется в диаграммах, не содержащих легенды (например, в картах).
Макс число Максимальное значение данных Максимальное значение, отображаемое на шкале. Игнорируется для круговых диаграмм. По умолчанию используется максимальное значение данных, за исключением гистограмм, где значением по умолчанию является максимальное значение данных. Это игнорируется для гистограмм, если в таблице имеется более одного столбца данных.
мин число Минимальное значение данных Минимальное значение, отображаемое на шкале. Игнорируется для круговых диаграмм. По умолчанию используется минимальное значение данных, за исключением гистограмм, где значение по умолчанию равно нулю. Это игнорируется для гистограмм, если в таблице имеется более одного столбца данных.
showCategoryLabels логическое значение истинный Должны ли метки появляться на оси категорий (т. е. строк). Доступно только для линейных и гистограмм.
showValueLabels логическое значение истинный 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 символов. Дополнительную информацию см. в API Google Chart .

События

Если для свойства 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.