На этой странице описаны основы использования Chart API для создания диаграмм.
Политика использования диаграмм Google
Нет ограничений на количество вызовов в день, которые вы можете сделать к API Google Chart. Однако мы оставляем за собой право блокировать любое использование, которое мы считаем неправомерным.
Обзор
Просмотр диаграмм в этой документации
Все изображения диаграмм в этой документации создаются в реальном времени с использованием API диаграмм. Чтобы просмотреть URL-адрес любого изображения, выполните следующие действия:
- Если вы используете Firefox, щелкните правой кнопкой мыши и выберите «Просмотреть изображение» или «Свойства».
- Если вы используете Internet Explorer, щелкните правой кнопкой мыши и выберите «Свойства».
Чтобы URL-адрес было легче читать, в этом документе он часто отображается в несколько строк. Когда вы используете Google Chart API, вы должны указать URL-адрес в одной строке.
Google Chart API возвращает изображение диаграммы в ответ на URL-запрос GET или POST. API может создавать различные виды диаграмм: от круговых или линейных диаграмм до QR-кодов и формул. Вся необходимая информация о диаграмме, например данные диаграммы, размер, цвета и метки, является частью URL-адреса. (Для POST-запросов все немного по-другому, но сейчас не беспокойтесь об этом).
Чтобы создать простейшую диаграмму, все, что нужно указать в URL-адресе, — это тип диаграммы, данные и размер. Вы можете ввести этот URL-адрес непосредственно в браузере или указать на него с помощью тега <img> на своей веб-странице. Например, перейдите по этой ссылке для круговой диаграммы:
https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World
Предыдущая ссылка представляет собой пример базового URL-адреса API диаграмм. Все URL-адреса диаграмм имеют следующий формат:
https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...
Все URL-адреса начинаются с https://chart.googleapis.com/chart? за которыми следуют параметры, определяющие данные и внешний вид диаграммы. Параметры представляют собой пары имя = значение , разделенные символом амперсанда ( & ), и параметры могут быть в любом порядке после ? . Для всех диаграмм требуются как минимум следующие параметры: cht (тип диаграммы), chd (данные) и chs (размер диаграммы). Однако для дополнительных опций существует гораздо больше параметров, и вы можете указать столько дополнительных параметров, сколько поддерживает диаграмма.
Давайте рассмотрим URL-адрес выше более подробно:
| URL-адрес | Компоненты |
|---|---|
|
|
Скопируйте и вставьте этот URL-адрес в свой браузер и попробуйте внести несколько изменений: добавьте к данным дополнительные значения (не забудьте ставить запятую перед каждым новым значением данных). Добавьте новые метки (поставьте знак | перед каждым новым значением). Увеличьте диаграмму.
Как сделать диаграмму
Вот как создать диаграмму изображений:
- Определитесь с типом диаграммы. См. галерею со списком диаграмм; тип диаграммы задается параметром
cht. Нарисуйте все компоненты, которые вы хотите, чтобы ваша диаграмма имела (оси, метки, фон и т. д.), и при необходимости определите размеры в пикселях для различных компонентов (общий размер диаграммы, размер легенды и т. д.). Сначала вам следует внимательно прочитать документацию для вашего типа диаграммы, иначе вы можете столкнуться с неприятностями. - Создайте и отформатируйте данные диаграммы . Данные указываются с помощью параметра
chd. Вам нужно будет решить, какой формат использовать для ваших данных:- Выберите формат данных. Вы можете использовать простой текстовый формат для данных диаграммы, который легко читается, но требует больше места для отправки, или использовать один из типов кодировки, который меньше при отправке, но ограничивает диапазон значений, которые вы можете отправить.
- Решите, нужно ли масштабировать ваши данные, чтобы они соответствовали вашей диаграмме. Различные форматы поддерживают разные диапазоны значений. Возможно, вам захочется масштабировать данные так, чтобы они охватывали весь диапазон значений, разрешенных вашим форматом, чтобы различия были более очевидными. Это можно сделать либо путем масштабирования данных в соответствии с используемым форматом данных, либо с помощью форматирования текста с настраиваемым масштабированием .
- При необходимости закодируйте свои данные. Если вы выбрали закодированный формат, мы предлагаем немного JavaScript, который поможет с другими типами кодирования.
- Укажите размер диаграммы. Размер диаграммы задается с помощью параметра
chs. См. документацию по формату и максимальным значениям. - Добавьте дополнительные параметры. В документации каждой диаграммы перечислены доступные дополнительные параметры. Типичные параметры включают метки, заголовки и цвета. Обратите внимание, что весь текст метки или заголовка должен быть в кодировке UTF-8. Обратите внимание, что многие параметры позволяют вводить несколько значений. Например, параметр
chmпозволяет поместить фигуру в одну точку данных на диаграмме. Вы можете поместить фигуры в несколько точек данных, используя параметрchm, но для этого вам не нужно указывать параметрchmнесколько раз в URL-адресе (например, НЕПРАВИЛЬНО :chm= square & chm= circle &chm= triangle). Вместо этого в параметрах, принимающих несколько значений, между несколькими значениями одного и того же параметра используется разделитель , например запятая или вертикальная черта. Дляchmэто полоса, поэтому у вас будет что-то вроде этого: RIGHT :chm= square | circle | triangle. Просмотрите подробную информацию о каждом параметре, чтобы узнать, как указать несколько параметров. - Создайте строку URL. URL-адрес начинается с
https://chart.googleapis.com/chart?за ним следуют все обязательные (cht,chd,chs) и необязательные параметры. Примечание. Если вы используете свой URL-адрес в теге<img>, вам придется изменить все символы&на&в вашей ссылке. Пример:<img src="https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" />. - Используйте GET или POST, чтобы получить изображение. GET — это либо ввод URL-адреса непосредственно в браузер, либо использование его в теге
<img>. Однако длина URL-адресов ограничена 2 КБ, поэтому, если у вас больше данных или вы любите кровь, вам следует рассмотреть возможность использования вместо этого POST, как описано здесь . - Создайте интерактивные области. При желании вы можете создать карту изображений для диаграммы, которая позволит вам добавлять гиперссылки или элементы щелчка к определенным элементам диаграммы. Подробности см. в разделе Создание карты-изображения диаграммы .
Глоссарий терминов диаграмм
Вот несколько важных терминов, которые мы используем в этой документации:
- Ряд
- Связанный набор данных на диаграмме. Что представляет собой серия, зависит от типа диаграммы: на линейной диаграмме серия представляет собой одну линию; в круговой диаграмме каждая запись представляет собой срез, а все срезы вместе представляют собой серию. В гистограмме серия — это все столбцы из одного и того же набора данных; разные серии либо группируются рядом, либо накладываются друг на друга, в зависимости от типа гистограммы. На следующей диаграмме показана сгруппированная гистограмма с двумя рядами: один темно-синий, другой светло-синий:
- Метки осей
- Числовые или текстовые значения вдоль каждой оси. На предыдущей диаграмме это были бы метки «Январь», «Февраль», «Март», «0», «50», «100».
Компоненты диаграммы
Вот некоторые из компонентов диаграммы:
- Область диаграммы
- Область, показывающая арты из сериала. Дополнительную информацию см. на боковой панели «Компоненты диаграммы».
- Легенда
- Небольшая область на диаграмме, описывающая серию. На диаграмме выше в этом разделе перечислены «Кошки» и «Собаки».
- Параметр
- Пара ключ = значение , используемая в URL-адресе. Например:
chxt=x, гдеchxt— имя параметра, аx— значение параметра. - ПОЛУЧИТЬ и отправить
- Два метода отправки URL-адреса диаграммы. GET обычно выполняется либо путем ввода URL-адреса в браузере, либо путем назначения его источником тега
<img>. POST-запросы сложнее выполнять, но они могут включать гораздо больше данных. Основная причина использования POST вместо GET заключается в том, что запрос POST может принять гораздо больше данных, чем запрос GET (16 000 символов против 2 000 символов). POST рассматривается здесь . - Символ трубы
-
|символ, часто используемый в качестве разделителя значений параметра, то есть символ для разделения нескольких значений. Запятые и амперсанды (&) также используются в качестве разделителей в URL-адресе диаграммы. - Составные диаграммы
- Диаграмма, представляющая собой комбинацию двух разных типов диаграмм: например, гистограмму с линией или линейную диаграмму с маркерами свечей. См. Составные диаграммы .
Оптимизации
Теперь, когда вы изучили основы создания диаграмм, вот несколько оптимизаций, которые вы можете использовать.
Использование POST
Длина URL-адресов ограничена 2 КБ, поэтому, если в вашей диаграмме больше данных, вам придется использовать POST вместо GET, как описано здесь . GET — это когда вы вводите URL-адрес диаграммы в адресную строку браузера или используете его в качестве источника элемента <img> на веб-странице. POST требует дополнительного программирования на другом языке, например PHP или PERL.
Создание диаграмм в JavaScript
Вы можете использовать API визуализации Google для создания диаграмм изображений. API визуализации Google — это API на основе JavaScript, который предоставляет вам инструменты для создания, фильтрации и управления данными, а также для запроса данных в таблицах Google или на других сайтах. Вы можете использовать API визуализации для создания данных, а затем вызвать API диаграмм изображений для отображения диаграммы на странице. Для получения дополнительной информации см. документацию по общей диаграмме изображений или найдите в галерее визуализаций диаграммы Google с пометкой (Изображение).