重要提示:虽然我们积极维护动态和交互式 Google 图表,但我们早早在 2012 年就正式弃用了静态 Google 图片图表。它已于 2019 年 3 月 18 日关闭。
本页介绍了如何创建各种可通过网址创建的出价邀约、气泡、置顶以及其他图形。
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
简介
您可以创建各种将文字和图片相结合的有趣宣传信息、图钉或消息气泡。这些项称为动态图标。
语法
根网址:https://chart.googleapis.com/chart?
动态图标支持在 ?在根网址中:
参数 | 必填还是选填 | 说明 |
---|---|---|
chst=<icon_string_constant> |
必需 | 说明要创建的图标类型。
|
chld=<icon_data> |
必需 | 用于描述图标大小、旋转角度、文本和其他必需数据的具体数据。
|
图标类型
类型 | 示例 |
---|---|
气泡 - 选择带有或不带图标的小或大文本气泡。 | |
固定 - 图钉类型可以是普通、加星标或倾斜的,可以包含图标、单个字母或较长的文本字符串。 | |
包含文本和可选标题的趣味样式便笺 | |
包含标题、文本和天气图标的天气预报备注 | |
多行框状文本块,无图标 | |
含图标的单行框框文本块 |
对话泡
气泡具有多种特征组合:大号或小号、带有或不带图标、单行或多行文本。下表介绍了气泡的类型以及每种气泡的语法。表格下方介绍了每个参数值。
另外几个注意事项:
- 所有气泡都会调整大小,以适应您输入的文本的宽度和高度。
- 气泡常量支持以
_withshadow
结尾的变体。如果您使用_withshadow
变体,它会在气泡下方添加阴影。
文本 | Icon | 语法 | 仅显示阴影 | 示例 |
---|---|---|---|---|
单行 | 否 | chst= |
chst= |
chst=d_bubble_text_small |
单行 | Yes | chst= |
chst= |
chst=d_bubble_icon_text_small |
单行 | Yes |
chst= |
chst= |
chst=d_bubble_icon_text_big |
多行 | 否 | chst= |
chst= |
chst=d_bubble_texts_big |
多行 | Yes |
|
chst= |
chst=d_bubble_icon_texts_big |
语法
- <icon_string>icon_string
- 一个字符串,用于指定本文档末尾所述的某个图标。
- <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
- 边框,尾部位于右边缘、下端
- <fill_colorfill_color>
- 气泡的填充颜色,采用 6 位 HTML 十六进制颜色。
- <text_color>
- 文本颜色,采用 6 位 HTML 十六进制颜色。
- <text>
- 单行气泡文本,表示单行气泡。空格必须是“+”号。
- <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>
- <字符>
- [仅限文本固定] 单个文本字符。
- <icon_string>icon_string
- [仅适用于图标图钉] 一个字符串,用于指定本文档末尾所述的某个图标。
- <fill_colorfill_color>
- 气泡的填充颜色,采用 6 位 HTML 十六进制颜色。
- <text_color>
- [仅限文本图钉] 文本颜色,采用 6 位 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_string>icon_string
- [图标图钉] 一个字符串,用于指定本文档末尾所述的某个图标。
- <字符>
- [文本图钉] 单个文本字符。
- <fill_colorfill_color>
- 气泡的填充颜色,采用 6 位 HTML 十六进制颜色。
- <text_color>
- [文本图钉] 文本颜色,采用 6 位 HTML 十六进制颜色。
- <star_fill_colorstar_fill_color>
- [星标图钉] 星标的填充颜色,采用 6 位 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>
- <scale_factor>scale_factor
- 用于指定图钉大小的缩放比例。这是一个正浮点数,其中 0.5 表示未缩放的图钉的大小。0.25 将是大小的一半,1 将是大小的两倍,依此类推。
- <rotation_deg>
- 图钉的旋转度(以度为单位)。正值和负值均可使用。 要绘制直立的图钉,请将该值指定为 0。
- <fill_colorfill_color>
- 气泡的填充颜色,采用 6 位 HTML 十六进制颜色。
- <font_size>
- 文本字体大小(以像素为单位)。
- <font_style>
- “_”(下划线)表示普通文本,“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>
- chst
- 为带有标题的记事指定
d_fnote_title
,或为没有标题的记事指定d_fnote
。在带标题的记事中,文本的第一行将设置为标题(以粗体显示)。 - <note_typenote_type>
- 描述便笺形状的字符串。从下表中选择一个记事类型字符串。
- <note_size>note_size
- 1 表示大号便笺,2 表示小号便笺。模板大小是固定的;模板不会为了适应文本而放大或缩小。请尝试使用这两种尺寸,看看哪种尺寸更能容纳您的文字。
- <text_color>
- 文本颜色,采用 6 位十六进制颜色;不接受 Alpha 值。
- <text_alignment>text_alignment
- 所有文本(包括页眉)的对齐方式。从下列值中选择一个:
- l -(“L”)左对齐
- h - 居中对齐
- r - 右对齐
- <text_line_1>| ...|<line_n>text_line_1text_line_1text_line_1
- 备注的文本。使用 | 字符表示换行符。如果为
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 |
适用于讲述老笑话的实用模板。 |
|
天气预报便笺
您可以创建带有天气指示图标的便笺。布局与趣味样式便笺类似,但文本颜色始终为黑色,文本始终左对齐,并且您只能有 1-3 行文本。
这些备注有固定的尺寸,不会根据文本大小而缩放。
语法
chst=d_weather chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>
- chst
d_weather
表示天气便笺。- <note_typenote_type>
- 用于此记事的模板。使用上面趣味风格的记事列表中列出的任一记事字符串。
- <weather_icon>
- 下表中的一个天气图标字符串。一条记事可以只包含一个天气图标。
- <title>|<line_2>|<line_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_colortext_fill_color>
- 文本的填充颜色。这是 6 位十六进制颜色;不接受 Alpha 值。
- <font_size>
- 一个数字,用于指定字体大小(以像素为单位)。
- <text_alignment>text_alignment
- 所有文本(包括页眉)的对齐方式。从下列值中选择一个:
- l -(“L”)左对齐
- h - 居中对齐
- r - 右对齐
- <outline_color>
- 文本轮廓颜色。这是 6 位十六进制颜色;不接受 Alpha 值。
- <font_weight>
- 普通或粗体文字。使用下划线“_”表示普通文本,使用“b”表示粗体文本。
- <text_line_1>| ...|<line_n>text_line_1text_line_1text_line_1
- 备注的文本。使用 | 字符表示换行符。如果为
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>icon_position_string
- 指定图标在文本框中的显示位置。从下列值中选择一个:
d_simple_text_icon_below
- 将图标置于文本框底部:d_simple_text_icon_above
- 将图标置于文本框顶部:d_simple_text_icon_left
- 将图标放置在框的左侧:d_simple_text_icon_right
- 将图标放置在框的右侧:
- <text>
- 要显示的文本。仅限一行;使用“+”代替空格。
- <font_size>
- 一个数字,用于指定字体大小(以像素为单位)。
- <font_fill_colorfont_fill_color>
- 文本的填充颜色,采用 6 位字符串表示。不支持 Alpha 值。
- <icon_name>icon_name
- 本文档底部列出的其中一个图标名称。
- <icon_size>
- 图标的高度(以像素为单位)。支持以下值:12、16、24。
- <icon_fill_coloricon_fill_coloricon_fill_color>
- 图标的颜色,用 6 位字符串表示。不支持 Alpha 值。
- <icon_and_text_border_color>
- 图标和文本周围边框的颜色,以 6 位字符串表示。不支持 Alpha 值。
可用标记和图标列表
您可以通过相应的参数在动态图标中使用以下图片。
注意:文本字符串区分大小写
注意:图标仅支持以下尺寸:12、16、24。
基本图标
来自 Glyphish.com 的图标
这些图标由 Joseph Wain / glyphish.com 提供。此作品已获得知识共享署名 3.0 美国许可。
标志
以下提供了一些国家和地区的旗帜。
文本字符串
请求中发送的所有显示文字都必须采用 UTF-8 编码,然后再进行网址编码。
这只会影响非网址安全字符(安全网址字符大多是大小写英文字母 a-z,以及一小组标点符号)。例如,字母“è”的 UTF-8 和网址编码值为“%C3%A8
”,中文字符“駅”的值为“%E9%A7%85
”。大多数浏览器都允许在网址字符串中使用未编码的值(例如“駅”),并在后台对该值进行编码。
不过,查看图片网址的用户使用的浏览器可能不支持此功能,因此通常最好对文本字符串中的所有非 ASCII 字符进行 UTF-8 编码和网址编码。请注意,这仅适用于气泡或图钉中显示的文本,而不适用于 &、| 或网址语法中的其他字符。
阴影
您可以为许多图标添加阴影,甚至可以在不使用图标的情况下为某些图标绘制阴影!
被覆盖的图标
其中许多图标都可以在绘制时带阴影,也可以不带阴影。如果可以选择阴影,则图标名称将以 _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 |
自立阴影
某些图标类型允许您单独绘制阴影。如果您在一个图形上使用多个重叠的带阴影图标,并且它们之间的距离太近,以至于一个图形的阴影落入另一个图形,则可能需要这样做。请参阅特定图标类型的文档,了解是否可以仅绘制阴影。