Важно! Хотя динамические и интерактивные Google Charts активно поддерживаются, мы официально объявили устаревшими статические Google Image Charts еще в 2012 году. Они были отключены 18 марта 2019 года.
На этой странице описывается, как создавать различные выноски, пузыри, булавки и другую графику, которую можно создать с помощью URL-адреса.
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
- Введение
- Синтаксис
- Типы значков
- Пузыри
- Пины
- Примечания к забавному стилю
- Примечания к прогнозу погоды
- Контурные текстовые блоки шрифта (только текст)
- Контурные текстовые блоки шрифта (текст + значок)
- Список доступных флагов и значков
- Текстовые строки
- Тени
Введение
Вы можете создавать различные интересные выноски, булавки или пузыри, которые смешивают текст и изображения. Эти элементы называются динамическими значками .
Синтаксис
Корневой URL: https://chart.googleapis.com/chart?
Динамические значки поддерживают следующие параметры после ? в корневом URL:
| Параметр | Обязательный или необязательный | Описание |
|---|---|---|
chst=< icon_string_constant > | Необходимый | Описывает, какой значок нужно создать.
|
chld=< icon_data > | Необходимый | Конкретные данные, используемые для описания размера значка, поворота, текста и других необходимых данных.
|
Типы значков
| Тип | Примеры |
|---|---|
| Пузыри — выберите маленькие или большие текстовые пузыри со значками или без них. | |
| Пины. Типы булавок могут быть простыми, звездчатыми или наклонными, а также могут иметь значок, одну букву или более длинные текстовые строки. | |
| Заметки в забавном стиле с текстом и необязательным заголовком | |
| Заметки о прогнозе погоды с заголовком, текстом и значком погоды | |
| Блок текста с многострочным контуром, без значка | |
| Однострочный текстовый блок с иконкой |
Пузыри
Пузыри могут иметь различные комбинации функций: большой или маленький размер, со значком или без него, с однострочным или многострочным текстом. В следующей таблице описаны типы всплывающих окон и синтаксис для каждого из них. Описание каждого значения параметра приведено под таблицей.
Несколько дополнительных замечаний:
- Размер всех пузырьков изменяется в соответствии с шириной и высотой вводимого текста.
- Константа пузырька поддерживает вариант, оканчивающийся на
_withshadow. Если вы используете вариант_withshadow, он добавляет тень под вашим пузырем.
| Текст | Значок | Синтаксис | Только тень | Пример |
|---|---|---|---|---|
| Одна линия | Нет | chst= | chst= | chst=d_bubble_text_small |
| Одна линия | Да | chst= | chst= | chst=d_bubble_icon_text_small |
| Одна линия | Да | chst= | chst= | chst=d_bubble_icon_text_big |
| Многострочный | Нет | chst= | chst= | chst=d_bubble_texts_big |
| Многострочный | Да | | chst= | chst=d_bubble_icon_texts_big |
Синтаксис
- < значок_строка >
- Строка, определяющая один из значков , описанных в конце этого документа.
- < frame_style >
- Хвостовое направление. Выберите одну из следующих констант направления хвоста:
-
bb- Каркас шара, хвост внизу слева -
bbtl- Каркас воздушного шара, хвост вверху слева -
bbtr- Каркас воздушного шара, хвост вверху справа -
bbbr- Каркас воздушного шара, хвост внизу справа -
bbT- Каркас из воздушного шара, без хвоста -
edge_bl— крайняя рамка, хвост у нижнего края, левый конец -
edge_bc- Крайняя рамка, хвост у нижнего края, по центру -
edge_br- Крайняя рамка, хвост у нижнего края, правый конец -
edge_tl— крайняя рамка, хвост на верхнем краю, левый конец -
edge_tc- Крайняя рамка, хвост по верхнему краю, по центру -
edge_tr- Крайняя рамка, хвост на верхнем краю, правый конец -
edge_lt— крайняя рамка, хвост у левого края, верхний конец -
edge_lc- Крайняя рамка, хвост у левого края, по центру -
edge_lb— крайняя рамка, хвост у левого края, нижний конец -
edge_rt— крайняя рамка, хвост у правого края, верхний конец -
edge_rc- Крайняя рамка, хвост у правого края, по центру -
edge_rb— крайняя рамка, хвост у правого края, нижний конец
-
- < заливка_цвет >
- Цвет заливки пузырьков в виде шестизначного шестнадцатеричного цвета HTML.
- < цвет_текста >
- Цвет текста в виде шестизначного шестнадцатеричного цвета HTML.
- < текст >
- Одна строка всплывающего текста для однострочных всплывающих окон. Пробелы должны быть + знаки.
- < text_line_1 >|...|< text_line_n >
- Одна или несколько строк текста для многострочных текстовых пузырей. Каждая строка отделяется символом | отметка. Первая строка будет показана крупнее и жирнее. Пробелы должны быть заменены на +.
Только тень
Для пузырьков вы также можете нарисовать отдельно стоящую тень, используя синтаксис, показанный в таблице выше. Примеры:
chst= | chst= | chst= | chst= | chst= |
Пины
Вы можете создавать различные пины с иконками и/или короткими текстовыми строками. Вот доступные типы контактов.
| Тип контакта | Константа пузыря | Примеры |
|---|---|---|
| Обычная булавка с одной буквой или значком | | |
| Наклонный/звездчатый значок с одной буквой или значком | | |
| Масштабируемый, вращающийся, многострочный контакт | chst=d_map_spin |
Обычная булавка с одной буквой или значком 
Это небольшая вертикальная булавка, которая может содержать либо небольшую иконку, либо одну букву.
Буквенный синтаксис
chst=d_map_pin_letter[_withshadow] chld=<character>|<fill_color>|<text_color>
Синтаксис значка
chst=d_map_pin_icon[_withshadow] chld=<icon_string>|<fill_color>
- < персонаж >
- [ Только текстовые булавки ] Один текстовый символ.
- < значок_строка >
- [ Только булавки значков ] Строка, определяющая один из значков , описанных в конце этого документа.
- < заливка_цвет >
- Цвет заливки пузырьков в виде шестизначного шестнадцатеричного цвета HTML.
- < цвет_текста >
- [ Только текстовые булавки ] Цвет текста в виде шестизначного шестнадцатеричного цвета HTML.
Только тень
Чтобы нарисовать тень только для этого типа булавки, используйте этот синтаксис:
chst=d_map_pin_shadow
Параметр chld не требуется только для тени.
Примеры
chst=d_map_pin_letter_withshadow | chst=d_map_pin_letter | chst=d_map_pin_icon | chst=d_map_pin_shadow |
Наклонный/звездчатый значок с одной буквой или значком 
Это небольшая булавка, которую можно наклонять влево или вправо или иметь перекрытие в виде звезды. Содержимым булавки может быть как один символ, так и маленькая иконка.
Буквенный синтаксис
chst=d_map_xpin_letter[_withshadow] chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>
Синтаксис значка
chst=d_map_xpin_icon[_withshadow] chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>
- < pin_style >
- Стиль булавки. Выберите одну из следующих констант:
-
pin -
pin_star -
pin_sleft -
pin_sright
-
- < значок_строка >
- [ Icon pins ] Строка, определяющая один из значков , описанных в конце этого документа.
- < персонаж >
- [ Текстовые булавки ] Отдельный текстовый символ.
- < заливка_цвет >
- Цвет заливки пузырьков в виде шестизначного шестнадцатеричного цвета HTML.
- < цвет_текста >
- [ Текстовые булавки ] Цвет текста в виде шестизначного шестнадцатеричного цвета HTML.
- < цвет_заполнения_звезды >
- [ Значки звезды ] Цвет заливки звезды в виде шестизначного шестнадцатеричного цвета HTML.
Только тень
Чтобы нарисовать тень только для этого типа булавки, используйте этот синтаксис:
chst=d_map_xpin_shadow chld=<pin_style>
Примеры
chst=d_map_xpin_letter | chst=d_map_xpin_letter | chst=d_map_xpin_icon | chst=d_map_xpin_shadow |
Текстовая булавка с масштабированием и вращением 
Это булавка, которую вы можете вручную масштабировать, чтобы включить более длинные текстовые строки. Вы также можете повернуть булавку на произвольную величину и контролировать размер и цвет шрифта.
Синтаксис
chst=d_map_spin chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>
- < масштабный_коэффициент >
- Масштабный коэффициент для указания размера вывода. Это положительное число с плавающей запятой, где 0,5 — размер немасштабированных выводов. 0,25 будет вдвое меньше, 1 — в два раза больше и так далее.
- < rotation_deg >
- Поворот штифта, в градусах. Допускаются положительные и отрицательные значения. Укажите 0 для вертикальной булавки.
- < заливка_цвет >
- Цвет заливки пузырьков в виде шестизначного шестнадцатеричного цвета HTML.
- < размер_шрифта >
- Размер шрифта текста в пикселях.
- < стиль_шрифта >
- Либо '_' (подчеркивание) для обычного текста, либо 'b' для полужирного текста.
- < текст_строка_1 >... < текст_строка_n >
- Одна или несколько строк текста, разделенных символом | персонажи.
Примеры
chst=d_map_spin | chst=d_map_spin | chst=d_map_spin |
Примечания к забавному стилю
Вы можете создавать различные текстовые заметки в шаблонах новинок, например заметки или пузыри с мыслями. При желании вы можете включить строку заголовка в заметку.
Эти заметки имеют фиксированный размер; они не будут увеличиваться или уменьшаться в соответствии с размером вашего текста.
Синтаксис
chst=d_fnote_title OR chst=d_fnote chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>
- чст
- Укажите либо
d_fnote_titleдля заметки с заголовком, либоd_fnoteдля заметки без заголовка. В заметке с заголовком первая строка текста будет отформатирована как заголовок (крупнее и жирнее). - < тип_заметки >
- Строка, описывающая форму ноты. Выберите одну из строк типа примечания в таблице ниже .
- < размер_заметки >
- 1 (один) для большой заметки или 2 для маленькой заметки. Размеры шаблонов фиксированы; шаблоны не увеличиваются и не уменьшаются, чтобы соответствовать тексту. Поэкспериментируйте с обоими размерами, чтобы увидеть, какой из них лучше держит текст.
- < цвет_текста >
- Цвет текста в виде шестизначного шестнадцатеричного цвета; альфа-значения не принимаются.
- < выравнивание_текста >
- Выравнивание всего текста, включая заголовок. Выберите одно из следующих значений:
- l - ('L') Выровнено по левому краю
- h - выравнивание по центру
- r - Выровнено по правому краю
- < текстовая_строка_1 >| ...|< текст_ строка_n >
- Текст для заметки. Используйте | символ для обозначения новой строки. Когда
chst=d_fnote_title, первая строка текста форматируется как заголовок.
Шаблоны типов заметок
Следующие шаблоны поддерживаются для шаблонов заметок. Строка note_type для каждого показана под шаблоном.
Примечание. В текстовых строках учитывается регистр!
arrow_d | balloon | pinned_c | sticky_y | taped_y | thought |
Примеры
| Описание | Пример |
|---|---|
Примечание с заголовком: chst=d_fnote_title . В качестве заголовка используется первая строка текста. Размер большой Примечание (1). | chst=d_fnote_title |
Примечание без заголовка: chst=d_fnote. Текст центрирован. | chst=d_fnote |
Полезный шаблон для старой шутки. | |
Примечания к прогнозу погоды
Вы можете создать заметку со значком индикатора погоды. Макет похож на забавные заметки, но цвет текста всегда черный, текст всегда выравнивается по левому краю, и вы можете иметь только от одной до трех строк текста.
Эти заметки имеют фиксированный размер; они не будут увеличиваться или уменьшаться в соответствии с размером вашего текста.
Синтаксис
chst=d_weather chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
- чст
-
d_weatherуказывает заметку о погоде. - < тип_заметки >
- Шаблон для этой заметки. Используйте одну из строк заметок, перечисленных в списке заметок забавного стиля выше.
- < погодный_значок >
- Одна из строк значка погоды в таблице ниже. Заметка может содержать один значок погоды.
- < название >|< строка_2 >|< строка_3 >
- Заголовок, а также до двух дополнительных строк текста (эти дополнительные текстовые строки необязательны). Название крупнее и жирнее.
Иконки погоды
Вот список поддерживаемых значков погоды, показывающий строку Weather_icon для каждого.
Примечание. В текстовых строках учитывается регистр!
clear-night-moon | cloudy-heavy | cloudy-sunny | cloudy | rain |
rainy-sunny | snow | snowflake | snowy-sunny | sunny-cloudy |
sunny | thermometer-cold | thermometer-hot | thunder | windy |
Примеры
| Описание | Пример |
|---|---|
Заметка о погоде с заголовком и двумя строками на шаблоне в стиле taped_y . | |
| Заветная мысль на зиму. |
|
Контурные текстовые блоки шрифта (только текст)
Вы можете создать блок контурного текста с белым фоном. Если вам нужен текст + значок, рассмотрите возможность использования однострочного варианта , который поддерживает значок.
Синтаксис
chst=d_text_outline chld=<text_fill_color>|<font_size>|<text_alignment>|<outline_color>|<font_weight>|<text_line_1>|...|<text_line_n>
- < text_fill_color >
- Цвет заливки текста. Это шестизначный шестнадцатеричный цвет; альфа-значения не принимаются.
- < размер_шрифта >
- Число, указывающее размер шрифта в пикселях.
- < выравнивание_текста >
- Выравнивание всего текста, включая заголовок. Выберите одно из следующих значений:
- l - ('L') с выравниванием по левому краю
- h - выравнивание по центру
- r - Выровнено по правому краю
- < контур_цвет >
- Цвет контура текста. Это шестизначный шестнадцатеричный цвет; альфа-значения не принимаются.
- < вес_шрифта >
- Обычный или полужирный текст. Подчеркните «_» для обычного текста и «b» для полужирного текста.
- < текстовая_строка_1 >| ...|< текст_ строка_n >
- Текст для заметки. Используйте | символ для обозначения новой строки. Когда
chst=d_fnote_title, первая строка текста форматируется как заголовок.
Примеры
chst=d_text_outline | chst=d_text_outline |
Контурные текстовые блоки шрифта (текст + значок) 
Вы можете создать одну строку контурного текста, а также значок сверху, слева, снизу или справа от блока. Если вам не нужен значок, используйте текстовый блок с контурным шрифтом .
Синтаксис
chst=<icon_position_string> chld=<text>|<font_size>|<font_fill_color>|<icon_name>|<icon_size>|<icon_fill_color>|<icon_and_text_border_color>
- < значок_позиция_строка >
- Указывает, где значок появляется в текстовом поле. Выберите одно из следующих значений:
-
d_simple_text_icon_below— помещает значок в нижнюю часть поля: -
d_simple_text_icon_above— помещает значок в верхнюю часть поля: -
d_simple_text_icon_left— помещает значок слева от поля: -
d_simple_text_icon_right— помещает значок справа от поля:
-
- < текст >
- Текст для отображения. Только одна линия; используйте + для пробелов.
- < размер_шрифта >
- Число, указывающее размер шрифта в пикселях.
- < font_fill_color >
- Цвет заливки текста в виде строки из шести цифр. Альфа-значения не поддерживаются.
- < значок_имя >
- Одно из названий значков, перечисленных в нижней части этого документа.
- < значок_размер >
- Высота значка в пикселях. Поддерживаются следующие значения: 12, 16, 24.
- < icon_fill_color >
- Цвет значка в виде строки из шести цифр. Альфа-значения не поддерживаются.
- < icon_and_text_border_color >
- Цвет рамки вокруг значка и текста в виде строки из шести цифр. Альфа-значения не поддерживаются.
Список доступных флагов и значков
Следующие изображения можно использовать в динамических значках с помощью соответствующего параметра.
Примечание. Текстовые строки чувствительны к регистру.
Примечание. Иконки доступны только в следующих размерах: 12, 16, 24.
Основные значки
Иконки с Glyphish.com
Эти значки созданы Джозефом Уэйном / glyphish.com . Эта работа находится под лицензией Creative Commons Attribution 3.0 United States License .
Флаги
Вот флаги некоторых стран и территорий.
Текстовые строки
Весь отображаемый текст, отправляемый в запросе, должен быть закодирован в UTF-8, а затем в URL-кодировке. Это влияет только на небезопасные для URL-адреса символы (безопасные для URL-адреса символы — это в основном английские буквы az в верхнем и нижнем регистре, а также небольшой набор знаков препинания). Например, значение в кодировке UTF-8 и URL для буквы «è» — « %C3%A8 », а для китайского символа 駅 — « %E9%A7%85 ». Большинство браузеров позволяют использовать незакодированное значение в строке URL-адреса (например, 駅) и закодируют его для вас за кулисами. Однако возможно, что кто-то, просматривающий URL-адрес вашего изображения, использует браузер, который этого не делает, поэтому обычно лучше использовать UTF-8 и URL-кодирование всех символов, отличных от ASCII, в текстовых строках. Обратите внимание, что это относится только к тексту, отображаемому в кружках или булавках, а не к символам &, | или другим символам, которые являются частью синтаксиса URL-адреса.
Тени
Вы можете добавлять тени ко многим значкам или даже рисовать тени для некоторых значков без самого значка!
Затененные значки 
Многие из этих значков можно рисовать с тенями или без них. Если затенение является опцией, имя значка будет иметь версию, оканчивающуюся на _withshadow и другую версию без этого окончания. Вы можете указать значок с любым окончанием, в зависимости от того, хотите ли вы тень или нет.
Вот пример среднего текстового пузыря и булавки с тенями и без них:
chst=d_bubble_icon_text_big | chst=d_bubble_icon_text_big_withshadow |
chst=d_map_pin_icon | chst=d_map_pin_icon_withshadow |
Автономные тени
Некоторые типы значков позволяют вам рисовать их тени сами по себе. Это может потребоваться, если вы используете несколько перекрывающихся затененных значков на графике, и они расположены так близко, что тень от одного из них падает на другой рисунок. См. документацию по вашему конкретному типу значка, чтобы узнать, можете ли вы рисовать только его тень.
Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2022-11-01 UTC.