Важно! Хотя динамические и интерактивные диаграммы Google активно поддерживаются, мы официально объявили устаревшими статические диаграммы изображений Google еще в 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 > | Необходимый | Конкретные данные, используемые для описания размера значка, поворота, текста и других необходимых данных.
|
Типы значков
| Тип | Примеры |
|---|---|
| Пузыри . Выбирайте маленькие или большие текстовые пузырьки со значками или без них. |     |
| Булавки . Типы булавок могут быть простыми, со звездочкой или наклонными и могут иметь значок, одну букву или более длинные текстовые строки. |       |
| Заметки в забавном стиле с текстом и необязательным заголовком |  |
| Заметки о прогнозе погоды с заголовком, текстом и значком погоды |  |
| Многострочный текстовый блок, без значка |  |
| Текстовый блок в одну строку со значком |   |
Пузыри
Пузыри бывают различных комбинаций функций: большого или маленького размера, со значком или без него, однострочным или многострочным текстом. В следующей таблице описаны типы пузырьков и синтаксис каждого из них. Описание каждого значения параметра приведено под таблицей.
Несколько дополнительных примечаний:
- Размер всех пузырьков изменяется в соответствии с шириной и высотой введенного вами текста.
- Константа bubble поддерживает вариант, заканчивающийся на
_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 |
Синтаксис
- < строка_значка >
- Строка, определяющая один из значков , описанных в конце этого документа.
- < стиль_фрейма >
- Направление хвоста. Выберите одну из следующих констант направления хвоста:
-
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
-
pin_star
-
pin_sleft
-
pin_sright
-
- < строка_значка >
- [ Значки ] Строка, определяющая один из значков , описанных в конце этого документа.
- < персонаж >
- [ Текстовые булавки ] Одиночный текстовый символ.
- < цвет_заливки >
- Цвет пузырьковой заливки в виде шестизначного шестнадцатеричного цвета 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 — вдвое больше и так далее.
- < градус_вращения >
- Вращение штифта в градусах. Допускаются положительные и отрицательные значения. Укажите 0 для вертикального штифта.
- < цвет_заливки >
- Цвет пузырьковой заливки в виде шестизначного шестнадцатеричного цвета HTML.
- < размер_шрифта >
- Размер шрифта текста в пикселях.
- < стиль_шрифта >
- Либо «_» (подчеркивание) для обычного текста, либо «b» для полужирного текста.
- < text_ line_1 >...< text_ line_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 - По центру
- г — выравнивание по правому краю
- < text_line_1 >| ...| < text_line_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>
- < цвет_текста_заполнения >
- Цвет заливки текста. Это шестизначный шестнадцатеричный цвет; альфа-значения не принимаются.
- < размер_шрифта >
- Число, определяющее размер шрифта в пикселях.
- < выравнивание_текста >
- Выравнивание всего текста, включая заголовок. Выберите одно из следующих значений:
- l - ('L')выравнивание по левому краю
- h - По центру
- г — выравнивание по правому краю
- < цвет_контура >
- Цвет контура текста. Это шестизначный шестнадцатеричный цвет; альфа-значения не принимаются.
- < вес_шрифта >
- Обычный или жирный текст. Подчеркните «_» для обычного текста и «b» для полужирного текста.
- < text_line_1 >| ...| < text_line_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>
- < icon_position_string >
- Указывает, где в текстовом поле появится значок. Выберите одно из следующих значений:
-
d_simple_text_icon_below— размещает значок внизу поля:
-
d_simple_text_icon_above— размещает значок в верхней части поля:
-
d_simple_text_icon_left— размещает значок слева от поля:
-
d_simple_text_icon_right— размещает значок справа от поля:
-
- < текст >
- Текст, который нужно показать. Только одна линия; используйте + для пробелов.
- < размер_шрифта >
- Число, определяющее размер шрифта в пикселях.
- < цвет_шрифта_заполнения >
- Цвет заливки текста в виде шестизначной строки. Альфа-значения не поддерживаются.
- < имя_значка >
- Одно из названий значков, перечисленных внизу этого документа.
- < размер_значка >
- Высота значка в пикселях. Поддерживаются следующие значения: 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 .
Flags
Here are flags for some countries and territories.
Текстовые строки
All display text sent in the request must be UTF-8 encoded and then URL-encoded. Это касается только символов, не безопасных для URL-адресов (символами, безопасными для URL-адресов, в основном являются английские буквы в верхнем и нижнем регистре, а также небольшой набор знаков препинания). Например, значение в кодировке UTF-8 и URL-адреса для буквы «è» — « %C3%A8 », а для китайского символа 駅 — « %E9%A7%85 ». Большинство браузеров позволяют использовать незакодированное значение в строке URL-адреса (например, 駅) и незаметно закодируют его. However, it is possible that someone viewing your image URL is using a browser that doesn't do this, so it is usually best to UTF-8 and URL-encode all non-ASCII characters in text strings. Обратите внимание, что это относится только к тексту, показанному в пузырьках или булавках, а не к символам &, | или другим символам, которые являются частью синтаксиса 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 |
Отдельно стоящие тени 
Некоторые типы значков позволяют рисовать их тень самостоятельно. You might want to do this if you are using several overlapping shadowed icons on a graphic, and they are so close that the shadow from one falls across another graphic. См. документацию по вашему конкретному типу значков, чтобы узнать, можете ли вы нарисовать только их тень.
Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2023-11-16 UTC.