动态图标

   等同于独立图片的动态图标标记。
信息图动态图标参考页面介绍了所有可用的动态标记类型。

本页介绍了如何创建各种标注、气泡、图钉和其他图形，这些图形可通过网址请求，或作为标记添加到其他图表上方。

目录

  1. 简介
    1. 独立图标
    2. 动态标记
  2. 常见图标功能
    1. 文本字符串
    2. 阴影
  3. 上下文图标

简介

您可以使用 Chart API 创建各种混合文字和图片的有趣宣传信息、图钉或气泡。这些项称为“动态图标”。您可以创建独立的动态图标图片，也可以使用 chem 参数将动态图标作为标记类型放置在图表顶部。本页将介绍如何以独立图片或其他图表上的标记形式创建动态图标。信息图动态图标参考页面介绍了所有可用的动态标记类型。

创建动态图标的语法取决于您是需要独立图标，还是其他图表中的动态标记。

独立图标

您可以请求动态图标图片，方法与请求任何其他图表相同。独立动态图标支持的参数集与其他图表不同：

参数 必填还是选填 说明
chst=<icon_string_constant> 必需

说明要创建的图标类型。

  • icon_string_constant - 一个字符串常量，用于描述要创建的图标类型。要选择图标，请参阅下文的图标选择。
chld=<icon_data> 必需

用于描述图标大小、旋转角度、文本和其他必要数据的具体数据。

  • 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=
  y;s=cm_size;ds=0;...;
  d=maps_pin,0,10,50,10,8F8,000,hb
  • ds=0 - 在系列 0 上呈现（红线）
  • d=maps_pin,0,... - 数据系列 0
 chem=
  y;s=cm_size;ds=1;...;
  d=maps_pin,0,10,50,10,8F8,000,hb
  • ds=1 - 在系列 1 上呈现（蓝线）
  • d=maps_pin,0,..。- 数据系列 0
 chd=t1:
  10,20,30,5,10,60
  10,20,30,70,60,5
chem=
  y;s=cm_size;ds=0;dp=all;
  d=disk,1,5,20,5,FFFF10,000
  • t1: - 显示第一个数据系列并使用线条数据。 所有后续的系列都将隐藏。
  • ds=0 - 在系列 0 上渲染的标记。
  • d=disk,1,... - 磁盘数据来自隐藏序列 1。

上下文标记类型

标记类型 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>
一个可选字符串，用于描述图标对齐方式和偏移量。

示例

  • s=cm_color - 颜色变化图标
  • ds=0 - 在数据系列 0 上呈现
  • dp=all - 在所有点上放置图标。
  • d 值：
    • petrol - 图标标识符
    • 0 - 数据系列 0 中的颜色
    • 000,0FF,F55 - 色标的定义
    • 24 - 图标大小
    • 000 - 黑色轮廓
    • hv - 在水平和垂直方向上将图标居中对齐。
chem=y;s=cm_color;
  ds=0;
  dp=all;
  d=petrol,0,000,0FF,F55,24,000,hv

返回页首

 

 

尺寸变体 (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=y;s=cm_size;ds=0;dp=all;py=-1;d=maps_pin,0,30,100,10,8F8,000,hb

在此示例中，图标从黄线获取其尺寸数据，但呈现在蓝线上。

  • chem=y - 动态标记
  • s=cm_size - 大小差异
  • ds=1 - 在数据系列 1 上呈现（蓝线）
  • dp=all - 在所有点上渲染。
  • d=
    • maps_pin - 使用地图图钉图标
    • 0 - 根据数据系列 0（黄线）缩放大小
    • 10 - 值为 0 的图钉大小
    • 90 - 尺寸调节系数
    • 10 - 大小下限
    • 8F8 - 填充颜色
    • 000 - 轮廓颜色
    • hb - 使其在图钉底部水平居中。

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 - 第一个系列用于绘制黄线并确定图钉颜色。第二个系列用于绘制蓝线和图钉大小。
  • chem=y - 呈现动态图标
  • s=cm_color_size - 使用颜色和尺寸的变体上下文图标。
  • ds=1 - 渲染数据系列 1（蓝线）上的项。
  • dp=all - 将图标放在所有点上。
  • d=
    • maps_pin - 使用地图图钉符号。
    • 1 - 使用数据系列 1 作为图钉颜色。
    • 000,0FF,F55 - 低、中和高颜色。
    • 0 - 使用数据系列 0 作为图钉大小。
    • 10 - 图钉为 10 像素，值为 0。
    • 90 - 尺寸调节系数为 90。
    • 10 - 图钉大小下限为 10 像素。
    • 000 - 黑色轮廓颜色。
    • hb - 将图钉沿底部边缘水平居中到各个数据点。

chd=s:0akAZtnkmi,nbMPJOKXXS
chem=y;s=cm_color_size;ds=1;dp=all;d=maps_pin,1,000,0FF,F55,0,10,90,10,000,hb

返回页首

 

 

堆叠变体 (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 - 第一个系列用于绘制线条并确定堆栈高度。第二个用途是指定每个图标堆栈的基线，值为 0。
  • chem=y - 呈现动态图标
  • s=cm_repeat - 使用堆叠变体上下文图标。
  • ds=1 - 在数据系列 1 上呈现商品。
  • dp=all - 将图标放在所有点上。
  • d=
    • d=petrol - 使用汽油符号。
    • 0 - 使用数据系列 0 作为重复计数。
    • 9 - 使用缩放比例 6。
    • V - 垂直堆叠。
    • 16 - 将每个标记的高度设置为 16 像素。
    • F00 - 图标的填充颜色。
    • 000 - 图标轮廓颜色。
    • 2 - 堆栈中每个图标之间间隔 2 个像素。
    • hb - 将堆叠放置在底部居中

chd=s1:0akAZtnkmi,AAAAAAAAAA
chem=
  y;s=cm_repeat;ds=1;dp=all;
  d=petrol,0,9,V,16,F00,000,2,hb

返回页首

 




 

堆叠和颜色变化 (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=y - 呈现动态图标
  • s=cm_repeat_color - 使用堆叠和颜色变体上下文图标。
  • ds=0 - 在数据系列 0 上呈现商品。
  • dp=all - 将图标放在所有点上。
  • d=
    • petrol - 使用汽油符号。
    • 0 - 使用数据系列 0 作为重复计数。
    • 6 - 使用缩放比例 6。
    • V - 垂直堆叠。
    • 12 - 将每个标记的高度设置为 12 像素。
    • 0 - 使用系列 0 指定颜色。
    • F00,0F0,00F - 低、中、高颜色值。
    • 000 - 图标轮廓颜色。
    • 2 - 堆栈中每个图标之间间隔 2 个像素。
    • hv - 使堆栈在每个数据点上垂直和水平居中。
chem=
  y;s=cm_repeat_color;ds=0;dp=all;
  d=petrol,0,6,V,12,0,F00,0F0,00F,000,2,hv

返回页首