本页介绍了如何创建各种标注、气泡、图钉和其他图形,这些图形可通过网址请求,或作为标记添加到其他图表上方。
目录
简介
您可以使用 Chart API 创建各种混合文字和图片的有趣宣传信息、图钉或气泡。这些项称为“动态图标”。您可以创建独立的动态图标图片,也可以使用 chem
参数将动态图标作为标记类型放置在图表顶部。本页将介绍如何以独立图片或其他图表上的标记形式创建动态图标。信息图动态图标参考页面介绍了所有可用的动态标记类型。
创建动态图标的语法取决于您是需要独立图标,还是其他图表中的动态标记。
独立图标
您可以请求动态图标图片,方法与请求任何其他图表相同。独立动态图标支持的参数集与其他图表不同:
参数 | 必填还是选填 | 说明 |
---|---|---|
chst=<icon_string_constant> |
必需 | 说明要创建的图标类型。
|
chld=<icon_data> |
必需 | 用于描述图标大小、旋转角度、文本和其他必要数据的具体数据。
|
cht |
未使用 | 独立动态图标图表不使用 cht 参数。 |
chs |
未使用 | 独立动态图标图表不使用 chs 参数。 |
chd |
未使用 | 使用 chld 参数可向独立动态图标传递数据。 |
示例
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
动态标记
您可以使用 chem
参数在多种不同类型的图表上嵌入动态图标作为标记类型。如需了解具体方法,请参阅 chem
文档。
示例
https://chart.googleapis.com/chart?
chs=300x140
cht=lc&chco=FF9900,224499
chd=t:75,74,66,30,10,5,3,1
chls=1|1
chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0
chm=v,ccccFF,0,::.2,2
常见图标功能
大多数图标都可以有关联的文本字符串或阴影。
文本字符串
所有传递到 Chart API 的显示文本都必须先采用 UTF-8 编码,然后再进行网址编码。
这只会影响非网址安全字符(网址安全字符主要是大小写英文字母 a-z,以及一小组标点符号)。例如,字母“è”的 UTF-8 和网址编码值为“%C3%A8
”,汉字“駅”为“%E9%A7%85
”。大多数浏览器都允许您在网址字符串中使用未编码的值(例如“駅”),并在后台为您进行编码。
但是,某些查看图表网址的用户使用的浏览器不会执行此操作,因此通常最好使用 UTF-8 编码,并对文本字符串中的所有非 ASCII 字符进行网址编码。请注意,这仅适用于气泡或图钉中显示的文本,而不适用于 &、| 或网址语法中包含的其他字符。
使用 chem
参数指定动态图标标记时,您还必须对文本中的某些字符进行转义,如 chem
文档中所述。
阴影
您可以向多个图标添加阴影,甚至可以在不使用图标本身的情况下为某些图标绘制阴影!
被覆盖的图标
其中许多图标都可以绘制有阴影或不带阴影。如果可以选择阴影,则图标名称将具有一个以 _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 |
独立阴影
某些图标类型允许您单独绘制阴影。如果您在一个图形上使用多个重叠且带阴影的图标,并且这些图标因距离过近而使一个图标的阴影落在另一个图标上,则可能需要执行此操作。例如,以下是两个带阴影的气泡,首先绘制的是 Robert,然后是 Alice:
请注意 Alice 的阴影部分覆盖了 Robert。如需解决此问题,您可以先绘制 Alice 阴影,然后绘制 Robert 气泡,再绘制 Alice 而不绘制阴影。或许在光照和阴影方面并不完全真实,但可以避免一个气泡被另一个气泡的阴影遮挡:
chem=
y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice, no shadow
y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice shadow
所有标记都指定相同的 Z 轴顺序 1 (py=1
),因此它们会按照所列顺序在图表元素(图表线)之上绘制。首先绘制 Alice 阴影,然后在其上绘制 Robert 气泡,最后在顶部绘制 Alice 气泡。
如需了解您是否可以单独绘制阴影,请参阅特定图标类型的文档。
上下文图标
您可以根据系统分配给图标的点,指定一个颜色、大小或堆叠方式不同的图标。这些图标类型只能用作动态图标标记(chem
参数),但不能用作独立图标。
这些图标可以呈现在用于指定其颜色、大小或堆叠信息的系列以外的系列上。也就是说,chem
参数的 ds
值指定了在哪个系列上呈现图标,但用于确定图标大小或颜色的值则通过下面提供的参数指定。此方法的一个有效用途是,针对图标数据使用隐藏的数据系列,但将图标呈现在可见的线条或条形上。下面是一些示例:
在源系列上呈现的图标 | 在非源代码系列上呈现的图标 | 使用隐藏系列的图标 |
---|---|---|
chem=
|
chem=
|
chd=t1:
|
上下文标记类型
标记类型 | chem 秒值 |
示例 |
---|---|---|
颜色变化 | s=cm_color |
|
尺码变化 | s=cm_size |
|
颜色和尺寸变体 | s=cm_color_size |
|
堆叠变体 | s=cm_repeat |
|
堆叠和颜色变化 | s=cm_repeat_color |
上下文图标支持可选的对齐字符串,用于指定图标与数据点的对齐方式和偏移量。该字符串具有以下语法:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- alignment
- 两个字母,用于描述图标与点的对齐方式。示例包括
tl
(左上角)和rb
(右下角)。如需查看完整列表和说明,请参阅chem
参数的 alignment_string 参数说明。 - h_anchor_offset
- [可选] 定位点的水平偏移量(以像素为单位)。包含 0 的值前面必须加上 + 或 -。重要提示:您必须对 + 进行网址编码,将其变为 %2B。
- v_anchor_offset
- [可选] 定位点的垂直偏移量(以像素为单位)。包含 0 的值前面必须加上 + 或 -。重要提示:您必须对 + 进行网址编码,将其变为 %2B。
请注意,您还可以使用 chem
参数的 of
组件指定水平和垂直偏移。如果您同时指定 of
组件和 h_anchor_offset v_anchor_offset
值,则所有偏移值都将应用于图标。
示例:
hb-0-0 水平居中、底部 无偏移 |
lb-0-0 左下角 无偏移 |
rb-0-0 右下角 无偏移 |
ht-0-0 水平顶部 无偏移 |
hb-20-0 水平居中底部 -20 水平方向 0 垂直 |
hb%2b20-0 水平居中底部 +20 水平方向 0 垂直方向 |
hb-0%2b10 水平居中、底部 0 水平 +10 垂直(垂直) |
hb-0-20 水平居中底部 0 水平 -20 垂直 |
颜色变化 (cm_color
)
您可以根据上下文图表标记所代表的点来改变其颜色。您必须指定一个颜色范围,而数据值会缩放至该范围内的相应颜色。
语法
chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>
- <icon_shapeicon_shape>
- 要使用的图标。指定一个 ID 字符串,用于标识网页末尾列出的某张图片。
- <color_data_series>
- 用于改变图标颜色的数据系列中从零开始的索引。
- <low_color>low_color
- 范围内的低颜色值,采用 3 位或 6 位 HTML 十六进制颜色(不带 # 标记)。此值与可用数据范围内可能的最低值相关联。
- <medium_color>middle_color
- 范围中的中间颜色值,采用 3 或 6 位 HTML 十六进制颜色(不带 # 标记)。这与可用数据范围内的中间值相关联。
- <high_color>high_color
- 范围内的高颜色值,采用 3 或 6 位 HTML 十六进制颜色(不带 # 标记)。此值与可用数据范围内可能的最高值相关联。
- <icon_size>
- 图标的大小(以像素为单位)。支持以下值:12、16、24。
- <outline_color>
- 图标的轮廓颜色,采用 3 位或 6 位 HTML 十六进制颜色(不带 # 标记)。
- <alignment>
- 一个可选字符串,用于描述图标对齐方式和偏移量。
示例
|
chem=y;s=cm_color; |
尺寸变体 (cm_size
)
根据所选择的数据系列,您可以仅改变上下文图表标记的大小。
语法
chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>
- <icon_type>icon_type
- 图标的形状。选择以下某个值:
maps_pin
、disk
或square
。 - <size_data_seriessize_data_series
- 用于改变图标大小的数据系列的索引(从零开始)。
- <zero_value_size>zero_value_size
- 图标的基本尺寸,达到相应系列的最小数据值。
- <size_multiplier>
- 尺寸缩放比例。将此值乘以每个图标的数据值与最小系列值之间的差值,计算出最终的图标大小。因此,数据值为 0 的图标不会受此调节系数的影响。
- <min_size>min_size
- 任何图标的最小尺寸,以像素为单位。
- <outline_color>
- 图标的轮廓颜色,采用 3 位或 6 位 HTML 十六进制颜色(不带 # 标记)。
- <fill_color>fill_color
- 图标的填充颜色,采用 3 位或 6 位 HTML 十六进制颜色(不带 # 标记)。
- <alignment>
- 一个可选字符串,用于描述图标对齐方式和偏移量。
示例
一个基本示例。值为零的图标以零值大小渲染,即 30 像素。大小随数据一起增加。 | chd=t:0,10,20,30,40,50,60,70 |
在此示例中,图标从黄线获取其尺寸数据,但呈现在蓝线上。
|
chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
颜色和尺寸变体 (cm_color_size
)
您可以根据所选择的数据系列,更改上下文图表标记的颜色和大小。
语法
chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>
- <icon_type>icon_type
- 图标的形状。选择以下某个值:
maps_pin
、disk
或square
。 - <color_data_series>
- 用于改变图标颜色的数据系列中从零开始的索引。
- <low_color>low_color
- 范围内的低颜色值,采用 3 位或 6 位 HTML 十六进制颜色(不带 # 标记)。此值与可用数据范围内可能的最低值相关联。
- <medium_color>middle_color
- 范围中的中间颜色值,采用 3 或 6 位 HTML 十六进制颜色(不带 # 标记)。这与可用数据范围内的中间值相关联。
- <high_color>high_color
- 范围内的高颜色值,采用 3 或 6 位 HTML 十六进制颜色(不带 # 标记)。此值与可用数据范围内可能的最高值相关联。
- <size_data_seriessize_data_series
- 用于改变图标大小的数据系列的索引(从零开始)。
- <zero_value_size>zero_value_size
- 图标的基本尺寸,达到相应系列的最小数据值。
- <size_multiplier>
- 尺寸缩放比例。将此值乘以每个图标的数据值与最小系列值之间的差值,计算出最终的图标大小。因此,数据值为 0 的图标不会受此调节系数的影响。
- <min_size>min_size
- 任何图标的最小尺寸,以像素为单位。
- <outline_color>
- 图标的轮廓颜色,采用 3 位或 6 位 HTML 十六进制颜色(不带 # 标记)。
- <alignment>
- 一个可选字符串,用于描述图标对齐方式和偏移量。
示例
此示例使用两行代码。图钉使用渲染它们的系列中的颜色数据,但使用其他系列的尺寸数据。
|
chd=s:0akAZtnkmi,nbMPJOKXXS |
堆叠变体 (cm_repeat
)
您可以根据特定点的数据值来改变一个堆叠的图标的高度。
语法
chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>
- <icon_shapeicon_shape>
- 要使用的图标。指定一个 ID 字符串,用于标识网页末尾列出的某张图片。
- <repeat_series_indexrepeat_series_index>
- 数据系列中从零开始的索引,用于计算在此位置放置的图标数量。
- <scale_factor>scaling_factor
- 源数据系列值会调整为 0 到 1 之间的值,并乘以此值,以确定要在此点放置的标记数量。部分值会被截断。
- <stacking_direction>stacking_direction
- 堆叠方向:“h”(小写)表示水平或“V”(大写)表示垂直。
- <icon_size>
- 每个标记的大小(以像素为单位)。支持以下值:12、16、24。
- <fill_color>fill_color
- 图标的填充颜色,采用 3 位或 6 位 HTML 十六进制颜色(不带 # 标记)。
- <outline_color>
- 图标的轮廓颜色,采用 3 位或 6 位 HTML 十六进制颜色(不带 # 标记)。
- <spacing>
- 堆叠中各个标记之间留出的间距(以像素为单位)。
- <alignment>
- 一个可选字符串,用于描述图标对齐方式和偏移量。
示例
此示例使用了第二个虚拟数据系列。它不会渲染在图表上,而是用于从图表底部开始以均匀的方式间隔所有堆叠空间。
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
堆叠和颜色变化 (cm_repeat_color
)
您可以根据特定点的数据值,改变图标堆栈的高度和颜色。
语法
chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>
- <icon_shapeicon_shape>
- 要使用的图标。指定一个 ID 字符串,用于标识网页末尾列出的某张图片。
- <repeat_series_indexrepeat_series_index>
- 数据系列中从零开始的索引,用于计算在此位置放置的图标数量。
- <scale_factor>scaling_factor
- 源数据系列值会调整为 0 到 1 之间的值,并乘以此值,以确定要在此点放置的标记数量。部分值会被截断。
- <stacking_direction>stacking_direction
- 堆叠方向:“h”(小写)表示水平或“V”(大写)表示垂直。
- <icon_size>
- 每个标记的大小(以像素为单位)。支持以下值:12、16、24。
- <color_data_series>
- 用于改变图标颜色的数据系列中从零开始的索引。
- <low_color>low_color
- 范围内的低颜色值,采用 3 位或 6 位 HTML 十六进制颜色(不带 # 标记)。此值与可用数据范围内可能的最低值相关联。
- <medium_color>middle_color
- 范围中的中间颜色值,采用 3 或 6 位 HTML 十六进制颜色(不带 # 标记)。这与可用数据范围内的中间值相关联。
- <high_color>high_color
- 范围内的高颜色值,采用 3 或 6 位 HTML 十六进制颜色(不带 # 标记)。此值与可用数据范围内可能的最高值相关联。
- <outline_color>
- 图标的轮廓颜色,采用 3 位或 6 位 HTML 十六进制颜色(不带 # 标记)。
- <spacing>
- 堆叠中各个标记之间留出的间距(以像素为单位)。
- <alignment>
- 一个可选字符串,用于描述图标对齐方式和偏移量。
示例
|
chem= |