Начало работы с диаграммами

На этой странице описываются основы использования Chart API для создания диаграмм.

Политика использования диаграмм Google

Количество вызовов в день к API Google Chart не ограничено. Однако мы оставляем за собой право блокировать любое использование, которое мы считаем оскорбительным.

Обзор

Просмотр графиков в этой документации

Все изображения диаграмм в этой документации создаются в реальном времени с использованием 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|Мир

Предыдущая ссылка является примером базового URL-адреса Chart 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-адрес

Составные части

https://chart.googleapis.com/chart? cht=p3& chs=250x100& chd=t:60,40& chl=Hello|World

https://chart.googleapis.com/chart? Это базовый URL для всех запросов диаграмм. cht=p3 Тип диаграммы: здесь трехмерная круговая диаграмма. chs=250x100 Размер диаграммы ( ширина x высота ) в пикселях. Смотрите максимальные значения здесь . chd=t:60,40 Данные диаграммы. Эти данные представлены в простом текстовом формате, но есть и другие форматы . chl=Hello|World Метки среза . & Параметры разделяются амперсандом. Примечание. При внедрении URL-адреса в HTML, например, в качестве атрибута src тега <img>, вы должны заменить параметры & between на символы &amp; Это включает в себя создание страницы HTML с помощью PHP или другого языка. Однако при вводе URL-адреса в браузере или при вызове URL-адреса в коде, например при получении URL-адреса в PHP или Perl, вы должны использовать знак & .

Скопируйте и вставьте этот URL-адрес в адресную строку браузера и попробуйте внести несколько изменений: добавьте дополнительные значения к данным (не забывайте ставить запятую перед каждым новым значением данных). Добавьте новые метки (поставьте знак | перед каждым новым значением). Сделайте диаграмму больше.

Вернуться к вершине

Как сделать диаграмму

Вот как создать диаграмму изображений:

1. Определитесь с типом диаграммы. См. галерею для списка графиков; тип графика задается параметром cht . Набросайте все компоненты, которые вы хотите иметь на диаграмме (оси, метки, фон и т. д.), и, если необходимо, определите размеры в пикселях для различных компонентов (общий размер диаграммы, размер легенды и т. д.). Сначала вам следует внимательно прочитать документацию для вашего типа диаграммы, иначе вы можете столкнуться с разочарованием.
2. Создайте и отформатируйте данные диаграммы . Данные задаются с помощью параметра chd . Вам нужно будет решить, какой формат использовать для ваших данных:
   • Выберите формат данных. Вы можете использовать простой текстовый формат для данных диаграммы, который легко читается, но требует больше места для отправки, или использовать один из типов кодирования, который меньше для отправки, но ограничивает диапазон значений, которые вы можете отправить.
   • Решите, должны ли ваши данные масштабироваться, чтобы соответствовать вашей диаграмме. Различные форматы поддерживают разные диапазоны значений. Возможно, вы захотите масштабировать свои данные, чтобы они охватывали весь диапазон значений, разрешенных вашим форматом, чтобы сделать различия более очевидными. Это можно сделать либо путем масштабирования данных в соответствии с используемым форматом данных, либо с помощью форматирования текста с пользовательским масштабированием .
   • Кодируйте свои данные, если это необходимо. Если вы выбрали закодированный формат, мы предлагаем немного JavaScript, чтобы помочь с другими типами кодирования.
3. Укажите размер диаграммы. Размер диаграммы указывается с помощью параметра chs . См. документацию по формату и максимальным значениям.
4. Добавьте дополнительные параметры. В документации к каждой диаграмме перечислены доступные необязательные параметры. Типичные параметры включают метки, заголовки и цвета. Обратите внимание, что весь текст метки или заголовка должен быть закодирован в кодировке UTF-8. Обратите внимание, что многие параметры позволяют вводить несколько значений. Например, параметр chm позволяет поместить фигуру в одну точку данных на диаграмме. Вы можете размещать фигуры в нескольких точках данных, используя параметр chm , но для этого не нужно указывать параметр chm несколько раз в URL-адресе (например, НЕПРАВИЛЬНО : chm= square & chm= circle &chm= triangle ). Вместо этого параметры, принимающие несколько значений, используют разделитель , например запятую или вертикальную черту, между несколькими значениями одного и того же параметра. Для chm это полоса, поэтому у вас будет что-то вроде этого: RIGHT : chm= square | circle | triangle . См. сведения о каждом параметре, чтобы узнать, как указать несколько параметров.
5. Создайте строку URL. URL-адрес начинается с https://chart.googleapis.com/chart? и за ним следуют все необходимые ( cht , chd , chs ) и необязательные параметры. Примечание. Если вы используете свой URL-адрес в <img> , вам придется заменить все ваши символы & на & в вашей ссылке. Пример: <img src="https://chart.googleapis.com/chart?chs=250x100&amp;chd=t:60,40&amp;cht=p3&amp;chl=Hello|World" /> .
6. Используйте GET или POST, чтобы получить изображение. GET — либо когда вы вводите URL-адрес непосредственно в браузере, либо используете его в <img> . Однако длина URL-адресов ограничена 2 КБ, поэтому, если у вас больше данных или вы любите кровь, вам следует вместо этого использовать POST, как описано здесь .
7. Создавайте интерактивные области. При желании вы можете создать карту изображения для диаграммы, которая позволит вам добавлять гиперссылки или щелкать элементы к определенным элементам диаграммы. Дополнительные сведения см. в разделе Создание карты изображения диаграммы .

Вернуться к вершине

Глоссарий терминов диаграммы

Вот несколько важных терминов, которые мы используем в этой документации:

Серии

Связанный набор данных на диаграмме. Что представляет собой серия, зависит от типа диаграммы: на линейной диаграмме серия представляет собой одну линию; в круговой диаграмме каждая запись представляет собой срез, а все срезы вместе представляют собой ряд. На гистограмме ряд — это все столбцы из одного и того же набора данных; различные серии либо сгруппированы рядом, либо расположены друг над другом, в зависимости от типа гистограммы. На следующей диаграмме показана сгруппированная гистограмма с двумя рядами, один темно-синий, другой светло-синий:

Метки осей

Числовые или текстовые значения вдоль каждой оси. На предыдущей диаграмме это были бы метки «Янв», «Фев», «Мар», «0», «50», «100».

Компоненты диаграммы

Вот некоторые компоненты диаграммы:

Область диаграммы

Зона показа серии артов. Дополнительные сведения см. на боковой панели «Компоненты диаграммы».

Легенда

Небольшая область на графике, описывающая серию. На приведенной выше диаграмме это раздел, в котором перечислены «Кошки» и «Собаки».

Параметр

Пара ключ = значение, используемая в URL-адресе. Например: chxt=x , где chxt — имя параметра, а x — значение параметра.

ПОЛУЧИТЬ и ОТПРАВИТЬ

Два способа отправки URL-адреса диаграммы. GET обычно выполняется либо путем ввода URL-адреса в браузере, либо путем указания его как источника <img> . Запросы POST более сложны в исполнении, но могут включать гораздо больше данных. Основная причина использования POST вместо GET заключается в том, что запрос POST может принимать гораздо больше данных, чем запрос GET (16K символов против 2K символов). POST рассматривается здесь .

Характер трубы

| символ, часто используемый в качестве разделителя значения параметра, т. е. символ для разделения нескольких значений. Запятые и амперсанд (&) также используются в качестве разделителей в URL диаграммы.

Составные диаграммы

Диаграмма, представляющая собой комбинацию двух разных типов диаграмм: например, гистограмма с линией или линейная диаграмма с маркерами свечей. См. составные диаграммы .

Вернуться к вершине

Оптимизации

Теперь, когда вы изучили основы создания диаграммы, вот несколько оптимизаций, которые вы можете использовать.

Использование ПОСТ

Длина URL-адресов ограничена 2 КБ, поэтому, если на диаграмме больше данных, вам придется использовать POST вместо GET, как описано здесь . GET — это когда вы вводите URL-адрес диаграммы в адресную строку браузера или используете его в качестве источника элемента <img> на веб-странице. POST требует дополнительного программирования на другом языке, таком как PHP или PERL.

Создание диаграмм в JavaScript

Вы можете использовать Google Visualization API для создания диаграмм изображений. Google Visualization API — это API на основе JavaScript, который предоставляет вам инструменты для создания, фильтрации и обработки данных, а также для запроса данных в таблицах Google или на других сайтах. Вы можете использовать API визуализации для создания данных, а затем вызывать API диаграмм изображений для отображения диаграммы на странице. Для получения дополнительной информации см. документацию по универсальной диаграмме изображений или просмотрите в галерее визуализаций любые диаграммы Google с пометкой (Изображение).