雷达图

   

本文档介绍了如何使用 Chart API 创建雷达图表。

目录

图表专属功能

  1. 概览
  2. 图表类型 (cht)
  3. 系列颜色 (chco)

标准功能

  1. 图表标题chttchts
  2. 图表图例文本和样式chdlchdlp chdls
  3. 图表边距 (chma)
  4. 轴样式和标签
    1. 可见轴 (chxt)
    2. 轴范围 (chxr)
    3. 自定义轴标签 (chxl)
    4. 轴标签位置 (chxp)
    5. 轴标签样式 (chxs)
    6. 轴刻度线 (chxtc)
  5. 背景填充 (chf)
    1. 纯色填充 (chf)
    2. 渐变填充 (chf)
    3. 条纹填充 (chf)
  6. 网格线 (chg)
  7. 动态标记 (chem)
  8. 线条样式 (chls)
  9. 行填充 (chm)
  10. 形状标记 (chm)
  11. 文本和数据值标记 (chm)
  12. 范围标记 (chm=r|R)
  13. 线条标记 (chm=D)
  14. 数据函数 (chfd)

概览

在雷达图表中,各数据点在图表周围顺时针以相等的间距绘制。该点的值表示为到图表中心的距离,其中中心表示最小值,图表边缘表示最大值。每个系列在图表中绘制为一个完整的环路。该图表将这些点用直线或曲线连接(您指定了)。因此,雷达图表实质上就是环绕成一个圆圈的折线图,其中 y 轴从图表中心延伸到周长,x 轴是图表的周长,起始和结束于 12:00 线。

一个图表会均匀地分为多个相等的细分,细分的数量取以下两个值中的较大者:

  • 标签数量 + 1(由 chxl 指定,如果存在),
  • 数据值的数量。

例如,如果您的图表包含 8 个数据点,但没有标签,则两个数据点之间将相隔 45 度 (360 / 8)。

如果您有多个系列,系统会统计点数最多的系列。细分的数量不少于 4 个;如果标签或数据点少于 4 个,则图表默认包含 4 个细分。您需要 n+1 个数据点才能绘制出完整的图表,其中 n 是线段的数量。数据点越多,图表的粒度越大。 您的数据最多只能绕图表一周。

雷达图可以支持多个系列。每个系列为图表上的一条线。

说明 示例

 

对于 r 类型的图表,各点以直线连接。

此示例展示了一个简单的雷达图表,其中包含一个数据系列。这些值是逐渐递增的,呈现出蜗牛壳的外观。

雷达图表
cht=r
chd=t:10,20,30,40,50,60,70,80,90

当雷达图表中包含 x 轴标签时,图表周围的数据点的间距由标签数量或数据点数量决定(以较大者为准)。在这两个图表中,数据点的数量相同(五个),但第一个图表的标签数较少,第二个图表的标签较多。第一个图表根据数据点的数量分配数据位置,第二个图表根据标签数量分配。请注意,第二个图表有六个线段,这样就提供了 7 个点画出一个完整的圆。


chd=t:10,20,30,40,50
chxl=0:|1|2|3|4

包含 5 个数据点、4 个标签的图表。
数据间隔为 360/5=72 度



chd=t:10,20,30,40,50
chxl=0:|1|2|3|4|5|6

包含 6 个标签、5 个数据点的图表。
数据间隔为 360/6=60 度。

您可以通过添加颜色、线条样式和轴标签,让雷达图表的信息更加丰富、清晰。

本示例展示了一个更为复杂的雷达图表,其中包含两个数据系列。每个数据系列的颜色使用 chco 指定,如系列颜色中所述。

线条样式通过 chls 指定,如线条样式中所述。

轴标签使用 chxtchxlchxr 指定,如轴样式和标签中所述。对于雷达图表,x 轴围绕图表的边界绘制成一个圆圈,y 轴和 r 轴从图表中心向顶部绘制。t 轴将被忽略。 此图表包含 x 轴标签,这些标签可能表示各个罗盘位置的值(例如风速)。

 

雷达图表
chco=FF0000,FF9900
chls=2.0,4.0,0.0|2.0,4.0,0.0
chxt=x
chxl=0:|0|45|90|135|180|225|270|315
chxr=0,0.0,360.0

rs 类型的图表中,多个点以曲线连接。

此示例使用与上一示例相同的参数,但为两个数据系列指定了换行

此示例包括网格线

 

采用折线填充的雷达图表
chg=25.0,25.0,4.0,4.0
chm=
B,FF000080,0,1.0,5.0|
B,FF990080,1,1.0,5.0

在雷达图表中,水平线标记弯成了圆形,而垂直线标记则从中心向外辐射,如下所示。

  • chm=h,0000FF,... - 深蓝色圆圈。请注意水平线形标记在雷达图上如何生成圆形。
  • chm=V,00FF0080,... - 6:00 处的绿线。

如需详细了解可用的形状,请参阅形状标记

雷达图表
chm=
h,0000FF,0,1.0,4.0
V,00FF00,0,4.0,5.0

返回页首

图表类型 (cht)

雷达图有两种类型:直线图 (cht=r) 和曲线图 (cht=rs)。

参数 说明 示例
r

 

对于 r 类型的图表,各点以直线连接。

雷达图表
cht=r
chd=t:10,20,30,40,50,60

rs 图表类型 rs 用曲线连接点。 雷达图表
cht=rs
chd=t:10,20,30,40,50,60,70,80,90

返回页首

系列颜色 chco

(可选)使用 chco 参数指定线条的颜色。

语法

chco=<color_1>,...,<color_n>
<color>
RRGGBB 十六进制格式指定一种或多种行颜色,各行颜色之间用英文逗号分隔。如果线条数量多于颜色数量,额外的线条将从头开始在颜色列表之间循环。

标准功能

此网页上的其他功能均为标准图表功能。

图表标题 chttchts [所有图表]

您可以为图表标题指定文字、颜色和字体大小。

语法

chtt=<chart_title>
chts=<color>,<font_size>,<opt_alignment>

 

chtt - 指定图表标题。

<chart_title>chart_title
要为图表显示的标题。您无法指定它显示在何处,但可以选择指定字体大小和颜色。使用 + 号表示空格,使用竖线字符 ( |) 表示换行。

 

chts [可选] - chtt 参数的颜色和字体大小。

<color>
标题颜色,采用 RRGGBB 十六进制格式默认颜色为黑色
<font_size>
标题的字体大小(以点为单位)。
<opt_alignment>
[可选] 标题的对齐方式。请选择以下某个区分大小写的字符串值:“l”(左侧)、“c”(居中)“r”(右侧)。默认值为“c”。

 

示例

说明 示例

标题、默认颜色和字体大小的图表。

使用加号 (+) 指定一个空格。

使用竖线字符 (|) 强制换行。

此处未指定 chts

包含标题的纵向条形图表
chtt=Site+visitors+by+month|
January+to+July

标题颜色为蓝色,右侧对齐,20 点的图表。

包含 20 像素的蓝色标题的纵向条形图表
chtt=Site+visitors
chts=FF0000,20,r

返回页首

图表图例文字和样式 chdlchdlpchdls [所有图表]

图例是图表的一侧,用于为每个数据系列提供一小段文字说明。您可以指定图例中与每个系列相关联的文本,并指定图例在图表上的显示位置。

另请参阅 chma,了解如何设置图例周围的外边距。

关于字符串值的说明:标签字符串中仅允许使用安全的网址字符。为安全起见,如果字符串中包含不在字符集 0-9a-zA-Z 中的字符,您应对此类字符串进行网址编码。 您可以在 Google 可视化文档中找到网址编码器。

语法

chdl=<data_series_1_label>|...|<data_series_n_label>
chdlp=<opt_position>|<opt_label_order>
chdls=<color>,<size>

 

chdl - 要在图例中显示的每个系列的文本。

<data_series_label>
图例条目的文本。每个标签都会应用于 chd 数组中的相应序列。使用“+”号表示空格。如果您不指定此参数,则图表将不会有图例。无法在标签中指定换行符。图例通常会扩展以容纳图例文本,而图表区域会缩小以容纳图例。

chdlp - [可选] 图例的位置和图例条目的顺序。您可以指定 <position> 和/或 <label_order>。如果同时指定,请使用竖条字符分隔。如果您希望在图例中跳过 chdl 中的空图例条目,则可以向任何值添加一个“s”。示例:chdlp=bvchdlp=rchdlp=bv|rchdlp=bvs|r

<opt_position>
[可选] 指定图例在图表上的位置。如需指定图例与图表区域或图片边框之间的额外内边距,请使用 chma 参数。从下列值中选择一个:
  • b - 图例位于图表底部,横向显示图例条目。
  • bv - 图例位于图表底部,纵向显示图例条目。
  • t - 图例位于图表顶部,横向显示图例条目。
  • tv - 图例位于图表顶部,纵向显示图例条目。
  • r - [默认] 图例位于图表右侧,纵向列显示图例条目。
  • l - 图例位于图表左侧,纵向显示图例条目。
<opt_label_order>
[可选] 标签在图例中的显示顺序。从下列值中选择一个:
  • l - [垂直图例的默认选项] 按指定给 chdl 的顺序显示标签。
  • r - 按照为 chdl 指定的反向顺序显示标签。在堆叠条形图中,这有助于按照条形的显示顺序
    显示图例。
  • a - [水平图例的默认选项] 自动排序:大致表示按长度排序,由短到短首先以 10 像素块为单位。当两个元素的长度相同(分成 10 个像素的块)时,首先列出的元素会最先显示。
  • 0,1,2... - 自定义标签顺序。这是 chdl 中从零开始的标签索引的列表,以英文逗号分隔。

chdls - [可选] 指定图例文本的颜色和字体大小。

<color>
图例文字颜色,采用 RRGGBB 十六进制格式
<size>
图例文字的点大小。

 

示例

说明 示例

关于图例的两个示例。按照与数据系列相同的顺序指定图例文本。

包含红色、蓝色和绿色三条折线以及相应图例的折线图表

chdl=NASDAQ|FTSE100|DOW
chco=FF0000,00FF00,0000FF

一个大圆圈中包含两个小圆圈的文氏图


chdl=First|Second|Third
chco=ff0000,00ff00,0000ff

第一个图表演示水平图例条目(chdlp=t,默认布局为水平布局),第二个图表演示底部垂直图例条目 (chdlp=bv)。

一个大圆圈中包含两个小圆圈的文氏图
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=t


一个大圆圈中包含两个小圆圈的文氏图
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=bv

此示例演示了如何更改字体大小。

一个大圆圈中包含两个小圆圈的文氏图
chdls=0000CC,14

返回页首

图表边距 chma [所有图表]

您可以指定图表边距的大小(以像素为单位)。从指定的图表尺寸 (chs) 向内计算外边距;增加外边距不会增加总图表尺寸,而是会根据需要缩小图表区域。

默认情况下,边距为计算图表大小后剩余的外边距。此默认值因图表类型而异。您指定的外边距是一个最小值;如果图表区域为外边距留出了空间,则外边距大小将为剩余大小;您不能挤压小于任何图例和标签所要求的外边距。下图显示了图表的基本组成部分:

图表边距、图例区域和图表区域

图表外边距包括轴标签图例区域。除非您使用 chma 指定较大的宽度,否则图例区域会自动调整大小以精确适应文本,在这种情况下,它会将边距尺寸扩展得更宽,将图表区域压缩得更小。您无法通过指定过小的大小来剪裁图例,但您可以让图例占据的空间超过实际需求。

提示:在条形图中,如果条形具有固定大小(默认设置),则图表区域宽度无法缩小。您必须使用 chbh 指定更小或可调整大小的条形。

 

语法

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>
<left_margin>、<right_margin>、<top_margin>、<bottom_margin>
图表区域周围的最小外边距尺寸(以像素为单位)。请提高此值以添加一些内边距,以防止轴标签触碰图表的边界。
<opt_legend_width>、<opt_legend_height>
[可选] 图例周围的外边距宽度(以像素为单位)。使用此方法可避免图例触碰到图表区域或图片边缘。

 

示例

说明 示例

在此示例中,图表每边的最小外边距为 30 像素。由于图表图例的宽度超过 30 像素,因此右侧的外边距会设置为图表图例的宽度,并且与其他外边距不同。

轴标签位于图表区域之外,因此在边缘空间内绘制。

包含灰色背景和各边边距的折线图表。
chma=30,30,30,30

如需在图例周围添加外边距,请为 <opt_legend_width><opt_legend_height> 形参设置值。

在本例中,图例的宽度约为 60 像素。如果您将 <opt_legend_width> 设置为 80 像素,则外边距会延长到图例之外 20 像素。

包含灰色背景和各边边距的折线图表。
chma=20,20,20,30|80,20

返回页首

轴样式和标签 [线条、条形图、Google-o-meter、雷达、散点图]

您可以指定要在图表上显示的轴,并为它们提供自定义标签以及位置、范围和样式。

默认情况下,并非所有图表都会显示轴线。您可以使用 chxt 参数精确指定图表应显示哪些轴。默认轴线不显示数字;您必须在 chxt 参数中指定轴才能显示数字。

您可以选择让轴显示反映数据值的数字,也可以指定自定义轴。 默认设置是显示数值,其值会调整为 0—100 之间的值。 不过,您可以使用 chxr 更改该范围以显示任何范围,还可以使用 chxs 设置值的样式(例如,显示货币符号或小数位)。

如果您选择使用自定义值(例如“周一,周二,周三”),则可以使用 chxl 参数。如需将这些标签放置在轴上的特定位置,请使用 chxp 参数。

最后,您可以使用 chxschxtc 参数指定自定义轴标签和数字轴标签的颜色、尺寸、对齐方式和其他属性。

关于字符串值的说明:标签字符串中仅允许使用安全的网址字符。为安全起见,如果字符串中包含不在字符集 0-9a-zA-Z 中的字符,您应对此类字符串进行网址编码。 您可以在 Google 可视化文档中找到网址编码器。

本部分包含以下主题:


可见轴 chxt

条形图、折线图、雷达图和散点图默认显示一条或两条轴线,但这些轴线不包含值。 如需在轴线上显示值或更改显示的轴,您必须使用 chxt 参数。 默认情况下,轴值的范围是 0-100,除非您使用 chxr 属性明确进行缩放。若要隐藏折线图中的所有轴线,请在 cht 参数中的图表类型值之后指定 :nda(例如:cht=lc:nda)。

默认情况下,顶部轴和底部轴不会在值旁边显示刻度线,而左侧和右侧轴则会显示刻度线。您可以使用 chxs 参数更改此行为。

语法

chxt=
  <axis_1>
    ,...,
  <axis_n>
<axis>
要在图表中显示的轴。可用的轴包括:
  • x - 底部 x 轴
  • t - 顶部 x 轴 [Google-o-Meter 不支持]
  • y - 左侧 y 轴
  • r - 右侧 y 轴 [Google-o-Meter 不支持]

您可以指定多个相同类型的轴,例如 cht=x,x,y。此操作会沿着图表底部堆叠两组 x 轴。这在沿显示数值的轴添加自定义标签时非常有用(请参见下面的示例)。轴是从内向外绘制的,因此,如果您设置了 x,x,则第一个 x 是指最内层的副本,下一个 x 是指下一个向外的副本,依此类推。

 

示例

说明 示例

此示例展示了一个带有 x 轴、y 轴、顶部轴 (t) 和右侧轴 (r) 的折线图。

由于未指定标签,因此图表的所有轴的范围都默认为 0 到 100。

请注意,默认情况下,顶部轴和底部轴不会显示标签旁的刻度线。

此折线图表左侧和右侧带有标签:0、20、40、60、80 和 100,上方和下方带有标签:0、25、50、75 和 100
chxt=x,y,r,t

您可以通过多次添加同一值来为每个轴添加多组标签。本示例显示了两组 x 轴和两组 y 轴。如此处所示,这在仅使用默认轴标签时并不特别有用。不过,您可以使用 chxl 参数为每个轴指定自定义标签。

<img <code="" dir="ltr" src="/static/chart/image/images/chart_41.png" title="chxt=x,x,y,y&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200x1" />x1"}





此示例展示了一个水平条形图,包含一条 x 轴、一条 y 轴、一条顶部 t 轴和一条右侧 r 轴。

由于省略了轴标签,因此 Chart API 为 x 轴和 t 轴显示了 0 到 100 的范围。

y 轴和 r 轴的范围取决于条形的数量。本例中有五个条形,因此 Chart API 显示了 0 到 4 的范围。第一个标签位于第一个条形底部的中心,第二个标签位于第二个条形底部的中心,以此类推。

此折线图表左侧和右侧带有标签:0、20、40、60、80 和 100,上方和下方带有标签:0、25、50、75 和 100
chxt=x,y,r,t

您可以通过在图表类型后面指定 :nda 来禁止折线图中的默认轴。 带有隐藏轴的折线图表
cht=lc:nda

返回页首

轴范围 chxr

您可以使用 chxr 参数分别指定显示在每条轴上的值的范围。请注意,这不会更改图表元素的缩放比例,而只会更改轴标签的缩放比例。 如果您希望轴上的数字描述实际的数据值,请将 <start_val> 和 <end_val> 分别设置为数据格式范围的下限值和上限值。如需了解详情,请参阅轴缩放

如果您想指定轴的范围,则必须使用 chxt 参数将其设为可见。

若要指定自定义轴值,请使用 chxl 参数。

语法

请使用竖线字符 ( |) 分隔多个轴标签范围。

chxr=
  <axis_index>,<start_val>,<end_val>,<opt_step>
    |...|
  <axis_index>,<start_val>,<end_val>,<opt_step>
<axis_index>
要应用标签的轴。这是 chxt 指定的轴数组中的从零开始的索引。例如,在 chxt=x,r,y 中,r 轴为 1。
<start_val>
一个数字,用于定义此轴的最低值。
<end_val>
一个数字,用于定义此轴的最大值。
<opt_step>
[可选] 轴上刻度之间的计数步骤。没有默认的步长值;计算步长以尝试显示一组间隔合理的标签。

 

示例

说明 示例

此示例显示了左右 y 轴(yr)和一条 x 轴(x)。

每条轴都有一个定义的范围。由于未指定标签或位置,因此值将取自指定范围,并在该范围内以相等的间距排列。在该折线图表中,这些值以相等的间距沿 x 轴排列。

r 轴的方向相反(索引 2),因为第一个值 (1000) 大于最后一个值 (0)。


chxt=x,y,r
chxr=
  0,0,500|
  1,0,200|
  2,1000,0

此例已为 x 轴指定了值。

轴标签以相等的间距沿轴排列。<opt_step> 参数的值指定为五 (5)。

x 轴上带有标签 200、300 和 400 的条形图表 chxt=x
chxr=0,10,50,5

返回页首

自定义轴标签 chxl

您可以使用 chxl 参数在任意轴上指定自定义字符串轴标签。您可以根据需要指定任意数量的标签。如果您(使用 chxt 参数)显示一条轴,但未指定自定义标签,则将应用标准的数字标签。若要指定自定义数字范围,请改用 chxr 参数。

如需为标签设置轴的具体位置,请使用 chxp 参数。

语法

请为您想要加标签的每个轴指定一个参数集。请使用竖线字符 (|) 分隔多组标签。

chxl=
  <axis_index>:|<label_1>|...|<label_n>
    |...|
  <axis_index>:|<label_1>|...|<label_n>
<axis_index>
要应用标签的轴。这是 chxt 参数数组的索引。例如,如果您有 chxt=x,x,y,y,则索引 0 为第一个 x 轴,1 为第二个 x 轴。
<label_1>| ... |<label_n>
要沿此轴放置的一个或多个标签。这些标记可以是字符串或数值;字符串不需要用引号括起来。label_1 显示在轴的最低位置,而 label_n 显示在最高位置。其他标签则以相等的间距排列在这两个标签之间。使用 + 号表示空格。无法在标签中指定换行符。请使用竖线字符分隔标签。注意 :请勿在 chxl 参数中的最后一个标签之后放置竖线。

 

示例

说明 示例

此图表展示了如何向两条轴添加自定义标签。请注意这些值是如何均匀分布的,以及最后一个 chxl 值如何不以竖线结尾。

带有以下标签的折线图表:左侧的 0 和 100,右侧的 A、B 和 C,x 轴上的 1 月、7 月、1 月、7 月和 1 月以及下方的 2005、2006 和 2007
chxt=x,y
chxl=
0:|Jan|Feb|March|April|May|
1:|Min|Mid|Max

此示例包含左右 y 轴的轴标签(yr),并且还包含两组 x 轴值 (x)。您可以考虑使用 chxs 在 y 轴上添加刻度线。

带有以下标签的折线图表:左侧的 0 和 100,右侧的 A、B 和 C,x 轴上的 1 月、7 月、1 月、7 月和 1 月以及下方的 2005、2006 和 2007
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|50|100|
2:|A|B|C|
3:|2005|2006|2007

此示例包含左侧和右侧 y 轴上的轴标签(yr)。它还包含两组 x 轴值 (x)。请注意,较低 x 轴集合的空标签,用于将值隔开。

此例左侧 y 轴上的轴标签采用了默认值。

带有以下标签的条形图表:左侧的 0 和 100,右侧的 A、B 和 C,x 轴上的 1 月、7 月、1 月、7 月和 1 月以及下方的 2005、2006 和 2007
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
2:|A|B|C|
3:|2005||2006||2007

如果您想添加一个通用标签来描述整个轴(例如,将一条轴标记为“费用”,另一条轴标记为“学生”),请使用 chxt 属性在每条边上再添加一个轴,然后使用 chxl 向每边添加一个自定义标签,并使用 chxp 将其设在轴的中间位置。


chxt=x,x,y,y
chxl=1:|Martinis|3:|Score
chxp=1,50|3,50

返回页首

轴标签位置 chxp

您可以指定要显示的轴标签,无论是使用默认标签,还是使用通过 chxl 指定的自定义标签。如果您没有使用此参数指定确切位置,则标签将沿轴等距离以默认步长值均匀分布。如果未指定 chxl,则刻度线标签将采用默认值(通常是数据值,或条形图中的条形数字)。

语法

请使用竖线字符 (|) 分隔多个定位集。

chxp=
  <axis_1_index>,<label_1_position>,...,<label_n_position>
    |...|
  <axis_m_index>,<label_1_position>,...,<label_n_position>
<axis_index>
您要为其指定位置的轴。这是 chxt 参数数组中的索引。例如,如果您有 chxt=x,x,y,y,则索引 0 为第一条 x 轴,1 为第二条 x 轴,以此类推。
<label_1_position>,...,<label_n_position>
:标签沿轴的位置。这是以英文逗号分隔的数值列表,其中每个值用于设置 chxl 数组中相应标签的位置:第一个条目适用于第一个标签,依此类推。位置是该轴范围内的值。请注意,除非您使用 chxr 指定了自定义范围,否则此值将始终为 0—100。位置的数量必须与该轴的标签数量相同。

 

示例

说明 示例

此例在图表的指定位置添加了 r 轴标签。标签文本使用 chxl 参数指定。

指定位置为 0 的标签位于 y 轴或 r 轴的底部,或者位于 x 轴或 t 轴的左侧。

指定位置为 100 的标签位于 y 轴或 r 轴的顶部,或者位于 x 轴或 t 轴的右侧。

Line chart with min, average, and max on the right, 20, 40, 60, 80, and 100 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y,r
chxl=2:|min|average|max
chxp=2,10,35,75

此示例演示了如何仅在指定位置显示默认标签值。

chxp=1,10,35,75 - y 轴应仅显示三个标签:10、35 和 75。由于未指定自定义标签文本,因此会显示这些轴值。请注意,在使用 chxp 时,您不需要以均匀的方式间隔标签。如果此处未指定 chxp,则 y 轴上的默认标签值距离为每 20 个单位,如第二张图表所示。

Line chart with 10, 35, and 75 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y
chxp=1,10,35,75

轴位置为默认的折线图表。
chxt=x,y
未指定 chxp

返回页首

轴标签样式 chxs

您可以为轴标签(自定义标签和默认标签值)指定字体大小、颜色和对齐方式。同一条轴上的所有标签格式相同。如果一条轴有多个副本,则可以为每个副本设置不同的格式。您还可以指定标签字符串的格式,例如显示货币符号或尾随零。

默认情况下,顶部轴和底部轴不会在值旁边显示刻度线,而左侧和右侧轴则会显示刻度线。

语法

应使用竖线字符 (|) 分隔多个轴的值。

chxs=
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
   |...|
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
<axis_index>axis_index
此属性适用的轴。这是 chxt 参数中的从零开始的索引。
<opt_format_string>opt_format_string
[可选] 这是一个可选的格式字符串,如果使用,紧跟在轴索引编号后面,中间不加英文逗号。它以字母 N 开头,后面都是可选值: 格式字符串语法如下:
       N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>
每个元素的含义如下:
  • <preceding_text> - 每个值前面的字面量文本。
  • *...* - 用星号括起来的可选块,您可以在该块中指定数字的格式详细信息。以下值均受支持且均为可选:
    • <number_type> - 数值的数字格式。选择以下任一选项:
      • f - [默认] 浮点格式。 也可以考虑使用 <小数位数> 值指定精度。decimal_places
      • p - 百分比格式。系统会自动附加 % 符号。注意:使用此格式时,从 0.0 到 1.0 的数据值会映射到 0 到 100%(例如,0.43 将显示为 43%)。
      • e - 科学记数法格式。
      • c<CUR> - 使用相应的货币标记将数字设置为指定的货币格式。将 <CUR> 替换为由三个字母组成的货币代码。示例:cEUR 表示欧元。 您可以在 ISO 网站上找到一系列代码,不过并非所有符号都受支持。
    • <decimal_places> - 一个整数,用于指定要显示的小数位数。该值会四舍五入(非截断)到此长度。默认值为 2
    • z - 显示尾随零。默认值为“否”
    • s - 显示组分隔符。默认值为“否”
    • xy - 按指定方式显示 x 坐标或 y 坐标中的数据。x 数据的含义因图表类型而异:请使用您的图表进行实验以确定其含义。默认值为 'y'
  • <following_text> - 每个值后面的字面量文本。
<opt_label_color>
应用于轴文本(但不是轴线)的颜色,采用 RRGGBB 十六进制格式。轴线颜色是使用 opt_axis_color 单独指定的。默认值为灰色
<opt_font_size>
[可选] 指定字体大小(以像素为单位)。此参数是可选的。
<opt_alignment>
[可选] 标签对齐方式。对于顶部轴或底部轴,这说明标签如何与其上方或下方的刻度线对齐;对于左侧轴或右侧轴,这说明标签如何在其边界框内(与轴接触)对齐。指定以下某个数字:
  • -1 - 顶部或底部:标签位于刻度线的右侧;左侧或右侧:标签在其区域中左对齐。r 轴标签的默认值
  • 0 - 顶部或底部:标签位于刻度线的中心;左侧或右侧:标签在其区域内居中。x 轴和 t 轴标签的默认值
  • 1 - 顶部或底部:标签位于刻度线的左侧;左侧或右侧:标签在其区域中右对齐。y 轴标签的默认值
<opt_axis_or_tick>
[可选;Google-o-meter 不支持] 是否显示此轴的刻度线和/或轴线。刻度线和轴线仅适用于最内层的轴(例如,不支持两个 x 轴最外侧的轴)。请使用以下某个值:
  • l(小写“L”)- 仅绘制轴线。
  • t - 仅绘制刻度线。刻度线是轴标签旁边的小线条。
  • lt - [默认] 同时绘制轴线和所有标签的刻度线。
  • _ -(下划线)既不绘制轴线,也不绘制刻度线。 如果您要隐藏轴线,请使用此值。
<tick_color>tick_color
[可选;Google-o-meter 不支持] 刻度线颜色,采用 RRGGBB 十六进制格式默认值为灰色
<opt_axis_color>opt_axis_color
[可选] 此轴线的颜色,采用 RRGGBB 十六进制格式默认值为灰色

 

示例

说明 示例

为第二条 x 轴(1 月、2 月、3 月)指定了字体大小和颜色。

带有以下标签的折线图表:左侧的最小、平均和最大,右侧的 0、1、2、3 和 4,沿 x 轴的 0 到 100 以及下方的 1 月、2 月和 3 月

chxt=x,y,r,x
chxr=2,0,4
chxl=3:|Jan|Feb|Mar|
     1:|min|average|max
chxp=1,10,35,75
chxs=3,0000DD,13,0,t

为右侧 y 轴指定了字体大小、颜色和对齐方式。已绘制刻度线,但未绘制轴线。

带有以下标签的折线图表:沿 x 轴的 0 到 100,下方的 1 月、2 月和 3 月,y 轴上的 0 到 4,右侧的红色刻度线和蓝色的文字最小、平均和最大。

chxt=x,y,r,x
chxl=3:|Jan|Feb|Mar|
     2:|min|average|max
chxp=2,10,35,95
chxs=2,0000DD,13,-1,t,FF0000

此图表包含三个数据集,并显示了三组轴标签,每个系列一个。每组标签都使用自定义格式字符串设置格式,如下所述:

  • 0N*e,000000|
    • 0 表示第一个数据系列
    • N 表示格式字符串
    • * 表示格式说明符的开头
    • e 表示科学记数法
    • * 表示格式说明符的结尾
    • 000000 表示黑色文本。
  • 1N*cUSD*Mil,FF0000|
    • 1 表示第二个系列
    • N 表示格式字符串
    • * 表示格式说明符的开头
    • c 表示货币标记
    • USD 指定美元作为要使用的货币标记
    • * 表示格式说明符的结尾
    • Mil 是跟在字符串后面的字面量
    • FF0000 表示红色文本。
  • 2N*sz2*,0000FF
    • 2 表示第三个系列
    • N 表示格式字符串
    • * 表示格式说明符的开头
    • s 表示显示分组说明符(在美国英语语言区域,即每三个零一个英文逗号)
    • z2 表示显示两个尾随零
    • 0000FF 表示蓝色文本。

轴标签范围是使用 chxr 参数(axis_indexstartendstep)设置的。 如果未设置,则此值的默认值为 0—100。


chd=s:
  984sttvuvkQIBLKNCAIi,
  DEJPgq0uov17zwopQODS,
  AFLPTXaflptx159gsDrn
chxr=
  0,0,1000000,250000|
  1,0,60|
  2,0,5000
chxs=
  0N*e,000000|
  1N*cUSD*Mil,FF0000|
  2N*sz2*,0000FF

返回页首

轴刻度线样式 chxtc

您可以为特定轴指定长刻度线。通常,这用于在图表的整个长度上扩展刻度线。使用 chxs 参数可更改刻度线颜色。

应使用竖线字符 (|) 分隔多个轴的值。一系列的值应以英文逗号分隔。

语法

chxtc=
  <axis_index_1>,<tick_length_1>,...,<tick_length_n>
    |...|
  <axis_index_m>,<tick_length_1>,...,<tick_length_n>
<axis_index>axis_index
此属性适用的轴。这是 chxt 参数中的从零开始的索引。请使用竖线分隔符分隔不同轴的值。
<tick_length_1>,...,<tick_length_n>
相应轴上的刻度线长度,以像素为单位。如果指定了单个值,则该值将应用于所有值;如果指定了多个值,轴刻度线将循环显示该轴的值列表。正值绘制在图表区域外部,并会被图表边界裁剪。最大正值为 25。负值会在图表区域内部绘制,并会被图表区域边界裁剪。

 

示例

说明 示例

使用 chxtc 创建红色长刻度线的示例。此处的刻度线长度超过了图表区域宽度,但系统为了适应图表而剪裁了刻度线。

  • chxt=x,y,r,x - 显示一条左轴、一条右轴和两条底部轴。
  • chxl=2:|min|average|max|3:|Jan|Feb|Mar - 分配给“r”(右侧)和外侧 x 轴的标签文本。
  • chxp=2,10,35,95 - 三个标签沿 r 轴(索引=2)的自定义标签位置。
  • chxs=2,0000dd,13,-1,t,FF0000 - r 轴的轴标签样式:文本颜色、文本大小、左对齐、带红色刻度线。
  • chxtc=1,10|2,-180 - y 轴和 r 轴的轴刻度线长度。 第一个值指定轴外侧长度为 10 像素的刻度线。第二个值指定了轴内长 180 像素的刻度线;负数表示刻度线位于轴内侧,并且系统会对刻度线进行剪裁以适应图表。

带有以下标签的折线图表:沿 x 轴的 0 到 100,下方的 1 月、2 月和 3 月,y 轴上的 0 到 4,右侧的红色长刻度线和蓝色的文字最小、平均和最大。

chxt=x,y,r,x
chxl=
  2:|min|average|max|
  3:|Jan|Feb|Mar
chxp=2,10,35,95
chxs=
  2,0000dd,13,-1,t,FF0000
chxtc=1,10|2,-180

此图表展示了交替的刻度线长度。chxtc 为 y 轴指定了两个刻度线长度值(5 和 15),图表上绘制的刻度线会在这两个值之间切换。
chxt=x,y
chxtc=
  1,5,15

返回页首

背景填充 chf [所有图表]

您可以为图表数据区域和/或整个图表背景指定填充颜色和样式。填充类型包括纯色填充、条纹填充和渐变。 您可以为不同区域(例如整个图表区域,或仅数据区域)指定不同的填充。图表区域填充会覆盖背景填充。所有填充均使用 chf 参数指定,您可以在同一图表中混合使用不同的填充类型(纯色、条纹、渐变),只需用竖线字符 ( | ) 分隔值即可。图表区域填充会覆盖图表背景填充。

纯色填充 chf [所有图表]

您可以为背景和/或图表区域指定纯色填充,或者为整个图表指定透明度值。您可以使用竖线字符 (|) 指定多种填充。(地图:仅限背景)。

语法

chf=<fill_type>,s,<color>|...
<fill_type>fill_type
要填充的图表部分。指定以下某个值:
  • bg - 背景填充
  • c - 图表区域填充。不支持地图图表。
  • a - 将整个图表(包括背景)设为透明。 <color> 的前六位数会被忽略,只有最后两位数(透明度值)会应用到整个图表和所有填充。
  • b<index> - 条形纯色填充(仅限条形图)。 将 <index> 替换为条形的系列索引,即可以纯色填充条形。其效果类似于在条形图中指定 chco。有关示例,请参阅条形图系列颜色
表示纯色或透明填充。
<color>
填充颜色,采用 RRGGBB 十六进制格式。对于透明度,前六位数会被忽略,但无论如何都必须将其包含在内。

 

示例

说明 示例

此示例使用浅灰色 (EFEFEF) 填充图表背景。

带有黑色区域填充的红色折线图表。

chf=bg,s,EFEFEF

下例用浅灰色 (EFEFEF) 填充图表背景,并用黑色填充了图表区域 (000000)。

带有黑色图表区域和浅灰色背景的红色折线图表。

chf=c,s,000000|
bg,s,EFEFEF

此示例将整个图表的透明度设为 50%(十六进制格式的 80 表示 128,即约为 50% 的透明度)。请注意,表格单元格背景透过图表显示出来。

包含蓝色散点且透明度为 50% 的散点图表。

chf=a,s,00000080

返回页首

渐变填充 chf [线条、柱形、Google-o-meter、雷达、散点、维恩]

您可以对图表区域或背景应用一种或多种渐变填充。渐变填充是从一种颜色淡出到另一种颜色。(饼图、Google-O-Me 图表:仅限背景。)

每个渐变填充都指定一个角度,然后指定两种或更多颜色锚定到指定位置。颜色会随着从一个锚点移动到另一个锚点而变化。您必须至少具有两种具有不同 <color_centerpoint> 值的颜色,以便一种可以淡入另一种。每个额外的渐变均由 <color>,<color_centerpoint> 对指定。

语法

chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>
<fill_type>fill_type
要填充的图表区域。以下其中一列:
  • bg - 背景填充
  • c - 图表区域填充。
  • b<index> - 条形渐变填充(仅限条形图)。 将 <index> 替换为条形的系列索引,以便用渐变色进行填充。有关示例,请参阅条形图系列颜色
lg
指定渐变填充。
<angle>
一个数字,用于指定从 0(横向)到 90(纵向)的渐变角度。
<color>
填充的颜色,采用 RRGGBB 十六进制格式
<color_centerpoint>
指定颜色的定位点。当该锚点接近另一个锚点时,颜色将从该点开始淡出。值范围是从 0.0(底部或左侧边缘)到 1.0(顶部或右侧边缘),按 <angle> 指定的角度倾斜。

 

示例

说明 示例

图表区域采用角度为零 (0) 的横向线性渐变。

颜色为桃色 (FFE7C6),左侧居中(位置 0.0)和蓝色 (76A4FB) 右侧(位置 1.0)。

图表背景以灰色 (EFEFEF) 绘制。

带有以下填充内容的深灰色折线图表:浅灰色背景和从左至右由白色线性渐变到蓝色的图表区域

chf=
  c,lg,0,
  FFE7C6,0,
(桃红色)
  76A4FB,1
(蓝色)

图表区域采用角度为四十五度 (45) 的对角线(从左下角到右上角)线性渐变。

第一个指定的颜色是粉红色 (FFE7C6)。图表的左下角是纯粉红色。

第二个指定的颜色是蓝色 (6A4FB)。图表的右上角是纯蓝色。请注意我们如何指定 0.75 的偏移量,以提供一个向右上角淡出的蓝色峰值。

图表背景以灰色 (EFEFEF) 绘制。

带有以下填充内容的深灰色折线图表:浅灰色背景和从左侧底部至右侧顶部由白色斜向线性渐变到蓝色的图表区域

chf=
  c,lg,45,
  FFE7C6,0,
(桃红色)
  76A4FB,0.75
(蓝色)

图表区域采用角度为九十度 (90) 的垂直(从上到下)线性渐变。

第一个指定的颜色是蓝色 (76A4FB)。图表顶部是纯蓝色。

第二个指定的颜色是桃红色 (FFE7C6)。图表的底部是纯粉红色。

图表背景以灰色 (EFEFEF) 绘制。

包含浅灰色背景的深灰色折线图表,以及从下到上由白色纵向线性渐变到蓝色的图表区域

chf=
  c,lg,90,
  FFE7C6,0,
(桃红色)
  76A4FB,0.5
(蓝色)

返回页首

 

条纹填充 chf [线条、条形图、Google-o-meter、雷达、散点图、维恩]

您可以为图表区域或整个图表指定条纹背景填充。(饼图、Google-O-Meter 图表:仅限背景。)

语法

chf=
  <fill_type>,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
<fill_type>fill_type
要填充的图表区域。以下其中一列:
  • bg - 背景填充
  • c - 图表区域填充
  • b<index> - 条形条纹填充(仅限条形图)。 将 <index> 替换为条形的系列索引,以便用条纹填充。有关示例,请参阅条形图系列颜色
ls
指定线性条纹填充。
<angle>
所有条纹相对于 y 轴的角度。对竖条纹使用 0,或针对横向条纹使用 90
<color>
此条纹的颜色,采用 RRGGBB 十六进制格式。再为每一个其他条纹重复 <color> 和 <width>。您必须至少有两种条纹。条纹会交替显示,直到图表填满。
<width>
此条纹的宽度,介于 01 之间,其中 1 为图表的全宽。系统会重复使用条纹,直到将图表填满。 再为每一个其他条纹重复 <color> 和 <width>。您必须至少有两种条纹。条纹会交替显示,直到图表填满。

 

示例

说明 示例
  • bg,ls,0 - 背景条纹填充与 y 轴(平行于 y 轴)夹角为零度的条纹。条纹填充了图表背景以及图表区域。
  • CCCCCC,0.15 - 第一种条纹为深灰色,宽度为图表的 15%。
  • FFFFFF,0.1 - 第二条条纹是白色的,宽度为图表的 10%。
带有从左至右交替的灰色和白色条纹的蓝色折线图表
chf=
  bg,ls,0,
  CCCCCC,0.15,
  FFFFFF,0.1
  • c,ls,90 - 带有与 y 轴成九十度角的水平条纹的图表区域。条纹填充了图表区域,但图表背景被忽略。
  • 999999,0.25 - 第一种条纹为深灰色,宽度为图表的 25%。
  • CCCCCC,0.25 - 与第一种条纹相同,但为浅灰色。
  • FFFFFF,0.25 - 与第一种条纹相同,但为白色。
带有从底部至顶部的深灰色、浅灰色、白色和深灰色条纹的蓝色折线图表
chf=
  c,ls,90,
  999999,0.25,
  CCCCCC,0.25,
  FFFFFF,0.25

返回页首

网格线 chg [线条、条形图、雷达图、散点图]

您可以使用 chg 参数在图表上指定实线或虚线网格线。

此参数不能用于指定线条的粗细或颜色。如需了解在图表上绘制线条的更多方法,请参阅形状标记chm 类型 h、H、v 或 V)、范围标记 (chm) 和轴刻度线 (chxtc)。

语法

chg=
  <x_axis_step_size>,<y_axis_step_size>,<opt_dash_length>,<opt_space_length>,<opt_x_offset>,<opt_y_offset>
<x_axis_step_size>、<y_axis_step_size>
用于计算要在图表上显示的 x 或 y 网格线的数量。100 / step_size = 图表上的网格线数量。因此:20,25 表示 5 条垂直网格线和 4 条水平网格线。
<opt_dash_length>、<opt_space_length>
[可选] 用于定义虚线网格线。第一个参数是每条短划线的长度(以像素为单位)。 第二个参数是短划线之间的间距(以像素为单位)。将 <opt_space_length> 指定为 0 可表示实线。默认值为 4,1。
<opt_x_offset>,<opt_y_offset>
[可选] 分别偏移 x 和 y 网格线的单位数(根据图表比例)。 正值或负值。如果您指定此值,则还必须指定前面的所有值。默认值为 0,0。

 

示例

说明 示例

这些示例仅使用 <x_axis_step_size><y_axis_step_size> 参数。默认情况下,Chart API 会显示虚线网格。

带有五条纵向和两条横向浅灰色虚线的网格的折线图表
chg=20,50
带有五条纵向和两条横向浅灰色虚线的网格的折线图表
chg=20,50

此示例使用较大的空间来显示较浅的网格线 (1,5)。

带有五条纵向和两条横向浅灰色模糊虚线的网格的折线图表
chg=20,50,1,5

如需显示实线网格线,请为 <opt_space_length> 参数指定零 (0)。

此图表还指定了 10 的 x 轴偏移。

带有五条纵向和两条横向浅灰色实线的网格的折线图表
chg=20,50,1,0,10

此图表展示了 10 的 x 轴偏移和 20 的 y 轴偏移。

带有五条纵向和两条横向浅灰色实线的网格的折线图表
chg=20,50,3,3,10,20

返回页首

线条样式 chls [线条、雷达]

您可以使用 chls 参数指定线条粗细和实线/虚线样式。此参数只能用于设置折线图或雷达图表中的线条的样式;除非复合图表的基本类型为折线图,否则无法用于设置复合图表中的线条的样式。

语法

请使用竖线字符 ( |) 分隔多个线条样式;第一种样式会应用于第一行,第二种样式会应用于下一行,以此类推。如果样式少于线条数量,系统会将默认样式应用于所有未指定的线条。

chls=
  <line_1_thickness>,<opt_dash_length>,<opt_space_length>
    |...|
  <line_n_thickness>,<opt_dash_length>,<opt_space_length>
<line_1_thicknessline_1_thickness>
线条粗细(以像素为单位)。
<opt_dash_length>、<opt_space_length>
[可选] 用于定义虚线网格线。第一个参数是每条短划线的长度(以像素为单位)。 第二个参数是短划线之间的间距(以像素为单位)。如需实线,请勿指定这两个值。如果仅指定 <opt_dash_length>,则 <opt_space_length> 将设置为 <opt_dash_length>。默认值为 1,0(实线)。

 

示例

说明 示例

此处的虚线由 3,6,3 指定,较粗的实线由 5 指定。

包含一条实线和一条虚线的折线图表
chls=3,6,3|5

返回页首

动态图标标记 chem [条形图、线条、雷达、散点图]

创建图表,然后将一个或多个动态图标指定为 chem 值。chem 的语法如下所示。所有以英文分号分隔的紫色项都是可选的,可以在网址中完全省略其中任何一项。您可以添加多个标记,方法是加入多个以 | 字符分隔的语法字符串。您可以在“动态图标”页面上详细了解动态图标。

您还可以将某个图表作为动态图标嵌入另一个图表中。请参阅下文的嵌入式图表子部分。

chem=
  y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
|...| y;s=<icon_string_constant>;d=<marker_data_string>;ds=<which_series>;dp=<which_points>;py=<opt_z_order>;po=<x,y>;of=<x_offset,y_offset>
s=<icon_string_Constant>icon_string_constant
来自动态图标页面的动态图标的字符串标记常量。此常量与独立图标的 chst 参数几乎相同。但是,独立图标字符串以“d_”开头的地方,您应移除该前缀,以获取等效的动态图标标记。示例:独立式图标:d_bubble_icon_text_small;等效的动态图标标记:bubble_icon_text_small
d=<marker_data_string>marker_data_string
这种特定标记类型所需的数据。此字符串包含将在 chld 参数中用于等效独立图标的字符串,但所有 | 分隔符都应替换为英文逗号(请注意,对于多行文本,应使用英文逗号,而不是竖线标记!)。 请注意,在数据字符串中,您还必须使用 @ 符号转义以下字符:竖线 ( | ) , at ( @ ) , 等于 ( = )、英文逗号 ( , )、分号 ( ; )。示例:hello@,+world5@@10+cents+each
ds=<哪个系列>which_series
[可选] 此标记所属数据系列中从零开始的索引。默认值为 0
dp=<what_points>which_points
[可选] 指定用于绘制标记的数据点。默认值为 0(序列中的第一个点)。使用以下任一格式:
  • n.d - 要在哪个数据点上绘制标记,其中 n.d 是数据系列中从零开始的索引。n.d如果您指定的是非整数值,则小数点表示计算出的中间点。例如,3.5 表示点 3 和点 4 之间的一半。
  • range,<start>,<end>,<step> - 在起始和结束之间(包括起始值和结束值)的每个步骤数据点上绘制标记。start 和 end 是索引值,并且可以是浮点数以表示中间值。所有值均为可选;默认值为:start=0、end=last 项、step=1。如果您跳过某个值,仍必须包含所有中间英文逗号,但不必在结尾处添加英文逗号。示例:dp=range,0,4 会在元素 0 到 4 上绘制标记;dp=range,5,10,2 会在元素 5、7 和 9 上绘制标记;dp=range,2 会在第三个点及之后的点上绘制点;dp=range,3,,1.5 会在从第四项到最后一项时每 1.5 个数据点上绘制标记。
  • all - 在每个元素上绘制标记。效果等同于 range,0,end_index。示例:dp=all
  • every,n - 每第 n 个标记绘制一个标记。示例:dp=every,2 会在项 0、2 和 4 上绘制标记。
py=<z_order>
[可选] 表示要在哪个图层上绘制标记(与其他标记和所有其他图表元素相比)。这是一个从 -1.0 到 1.0(包括 -1.0 和 1.0)的浮点数,其中 -1.0 表示底部,1.0 表示顶部。图表元素(折线和条形)正好在零以下。如果两个标记具有相同的值,则系统会按照网址指定的顺序绘制它们。默认值为 0.0(正好位于图表元素的上方)。
po=<x,y>
[可选] 图表中绘制标记的绝对位置。x 和 y 是两个浮点数,其中 0.0,0.0 表示左下角,1.0,1.0 表示右上角。
of=<x_offset,y_offset>
[可选] 图标从其正常位置偏移的像素数。x_offsety_offset 为正整数或负整数。务必在嵌入式动态图标中指定此值,因为标记将在该点上垂直和水平居中,这意味着该点可能不会与数据标记对齐。对于直立的图钉,合适的偏移为 of=0,22;对于倾斜的图钉,合适的偏移为 of=-12,20of=12,20,具体取决于倾斜的方向,但您可能需要尝试一下。默认值为 0,0。

 

示例

说明 示例
下面的示例展示了以独立图片形式创建并用作折线图中的标记的动态图标。

图表 1: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

图表 2:https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

带有动态图标标记的折线图表。
chem=
  y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0


等同于独立图片的动态图标标记。


chst=
  d_bubble_icon_text_small
chld=
  ski|bb|Wheeee!|FFFFFF|000000

请注意,动态图标标记将在水平和垂直方向上居中放置。因此,如果您使用带尾部的动态图标,则尾部不会显示在图表点上,而是标记中心。 第一个图表将标记的中心放在数据点 3 上,这实际上会使尾部略微靠近线条上的标记右侧。

第二个图表使用 of 值将标记的尾部移到所需数据点上。对于倾斜的图钉,合适的偏移为 -12,20。


chem=y;
  s=map_xpin_letter;
  d=pin_sleft,A,FF0000;
  dp=3;
  ds=1



chem=y;
  s=map_xpin_letter;
  d=pin_sleft,A,FF0000;
  dp=3;
  ds=1;
  of=-12,0

如需添加多个动态图标,请重复该语法字符串,并以 | 字符分隔。

此例展示了一系列范围标记以及两个单独的标记。

请注意,垂直图钉的偏移值为 0,22 时,倾斜的图钉的偏移为 12,20,以使图钉点与其描述的系列对齐。


chem=
  y;s=map_xpin_letter;d=pin_sright,A,FF0000;dp=4;ds=0;py=1;of=12,20|
  y;s=map_pin_icon;d=baby,FF5555;ds=1;dp=6;of=0,22|
  y;s=map_pin_icon;d=camping,DEF763;ds=2;dp=range,2,5
此示例展示了一个多行文本标记。添加文本后必须偏移标记,因为气泡会调整大小以适应文本,导致其在图表上重新居中。请注意,文本中的换行符在 d 数据字符串中以英文逗号表示。
chem=y;
  s=bubble_texts_big;
  d=bbbr,FFC6A5,000000,Outlier,Forgot+to+feed;
  ds=0;
  dp=13;
  of=-120,2

嵌入式图表

您可以使用动态图标语法将一个图表嵌入另一个图表中。

嵌入式图表标记有两种样式:气泡中的嵌入式图表和无气泡的嵌入式图表。这两者的示例如下:

无提示框的图表
带气泡的图表
无气泡的图表

对于非气泡式图表和气泡式嵌入式图表,以下是 s=<icon_string_constant>;d=<marker_data_string> 参数的具体信息(此处不再描述上面介绍的参数):

语法

Non-bubble:
  chem=y;s=ec;d=<alignment_string>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>

Bubble:
  chem=y;s=ecb;d=<frame_type>,<padding>,<frame_color>,<fill_color>,<chart_data>;ds=<which_series>;dp=<which_points>;py=<z_order>;po=<x,y>;of=<x_offset,y_offset>
alignment_string
[仅限非气泡] 无气泡的嵌入式图表的哪个部分固定在数据点。选择下图中的两个字母字符串常量之一:对齐字符串
chart_data
嵌入式图表的数据。这是要嵌入的图表的网址中 https://chart.googleapis.com/chart? 之后的所有内容。使用下面的工具,或遵循工具下方列出的规则。
frame_type
[仅限气泡] 动态图标帧样式常量之一。
内边距
[仅限气泡] 气泡内的内边距(以像素为单位)。
frame_color
[仅气泡] 帧的颜色,表示为不带 # 标记的 6 位 HTML 颜色字符串。示例:FF00FF
fill_color
[仅限气泡] 气泡填充颜色,表示为六位数的 HTML 颜色字符串,不带 # 标记。示例:FF00FF

嵌入式图表数据

使用以下转换工具帮助您生成图表字符串,或者按照该工具后给定的规则手动生成图表字符串。

手动转化规则

1. 首先,请按所示顺序将参数和值对中的以下所有字符替换为以下值:

替换 目标值
%7C 或 %7c
|
@
@@
%
%25
,
@,
|
@|
;
@;
&
%26
=
%3D

2. 然后将 parameter1=value1&parameter2=value2... 对中的所有 &= 值替换为英文逗号。

返回页首

线条填充 chm [线条、雷达]

您可以使用单色填充数据折线下方的区域。

您可以将线条填充与任何其他 chm 参数结合使用,并使用竖线字符 ( |) 来分隔 chm 参数。

语法

chm=
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
    |...|
  <b_or_B>,<color>,<start_line_index>,<end_line_index>,<0>
<b_or_B>b_or_B
是填充到图表底部,还是仅填充到下一条折线。
  • B - 从 <start_line_index> 填充到图表底部。<end_line_index> 支持一种特殊语法,可让您填充图表的某一部分。如果您的图表中只包含一条您想要填充的线条,这是最简单的方法。
  • b - 在多折线图的两条折线之间填充。起始线和结束线由 <start_line_index><end_line_index> 指示。
<color>
填充颜色的 RRGGBB 格式的十六进制数字
<start_line_index>start_line_index
填充开始处的行的索引。chd 中指定的第一个数据系列的索引为零 (0),第二个数据系列的索引为 1,依此类推。
<end_line_index>
  • 填充类型“b”- 停止填充的线条。此行必须位于当前行下方。
  • 填充类型“B”- 以下选项之一:
    • any value - 此参数中的任何单个数字都将被忽略,并且填充将从指定的线条延伸到图表的底部
    • start:end - 要填充图表下方的纵向切片,请指定 start:end,其中这些数据点索引用于描述填充开始和结束的位置。这两个值都是可选的,默认值为 first_point:last_point。(请参见下方示例)。
<0>
预留 - 必须为零。

 

示例

说明 示例

对于单个系列,使用 chm=B 最为简单。 这会填充折线下的整个区域。

这是雷达图表唯一可用的填充区域类型。chm=b 不适用于雷达图表。


chm=B,76A4FB,0,0,0

此图表包含两条折线和两种填充。填充底部线以下和顶线上方的区域需要一种特殊方法,详见下文。


chd=s:
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,

chm=
b,224499,0,1,0|(蓝色)
b,FF0000,1,2,0|(红色)

在多折线图表中,如需从图表顶部填充到第一行,请添加一个数据系列,其中包含该数据格式的最高数据值的两个副本。例如,“....”表示扩展编码,“100,100”表示基本文本格式,依此类推。系统会从此数据系列填充到最顶端的折线。

如需从最后一条线填充到图表底部,请添加一个数据系列,其中包含该数据格式最低数据值的两份副本。例如,扩展编码为 AAAA,基本文本格式为 0,0,以此类推。

线条本身使用 chco 以黑色绘制。

图表上有三条折线;图表底部到第一条折线间为绿色底纹,第一条到第二条折线间为红色底纹,第二条到第三条折线间为深蓝色底纹,且第三条折线到图表顶部间为浅蓝色底纹
chd=e:
  ....,
(最高值)
  cefhjkqwrlgYcfgc,
  QSSVXXdkfZUMRTUQ,
  HJJMOOUbVPKDHKLH,
  AAAA
(零值)
chm=
  b,76A4FB,0,1,0|
(浅蓝色)
  b,224499,1,2,0|(蓝色)
  b,FF0000,2,3,0|(红色)
  b,80C65A,3,4,0(绿色)
chco=000000

此折线图包含纵向填充切片。使用线条填充类型“B”为 <end_line_index> 指定 start:end 对,即可实现此目的。

  • B,76A4FB,0,0:3,0 - 线 0 下的蓝色垂直填充,以数据点 0—3 为边界。
  • B,990000,0,7:10,0 - 线条 0 下的红色垂直填充,以数据点 7-10 为边界。
  • B,DEDC06,0,12:,0 - 线条 0 下的黄色纵向填充,范围为从数据点 12 到数据系列末尾。

chm=
  B,76A4FB,0,0:3,0|
  B,990000,0,7:10,0|
  B,DEDC06,0,12:,0

此例展示了如何在雷达图表中使用折线填充。

雷达图表
chm=
  B,FF000080,0,1.0,5.0|
  B,FF990080,1,1.0,5.0

返回页首

形状标记 chm [条形图、折线图、雷达图、散点图]

您可以为图表上的所有或单个数据点指定图形标记。如果两个或多个标记占据同一点,则会按照标记在 chm 参数中的显示顺序绘制这些标记。您还可以在数据点上创建文本标记,数据点标记中对此进行了介绍。

您可以将形状标记与任何其他 chm 参数结合使用,并使用竖线字符 ( |) 来分隔 chm 参数。

语法

为要标记的每个系列指定以下一组参数。如需标记多个系列,请创建额外的参数集,并以竖线字符分隔。您无需标记所有系列。如果您不为数据系列分配标记,则该数据系列将不会收到任何标记。

散点图中,形状标记的行为方式略有不同。如需了解详情,请参阅该文档。

chm=
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
    |...|
  [@]<marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_offset>
@
[可选] 如果您在标记类型前面加上可选的 @ 字符,则 <opt_ which_points> 应使用 x:y 格式。
<marker_type>
要使用的标记类型。指定以下某种类型:
  • a - 箭头
  • c - 十字
  • C - 矩形。如果是矩形标记,则必须至少有两个数据系列,数据系列 0 指定下边缘,数据系列 1 指定上边缘。<size> 指定矩形的宽度(以像素为单位)。
  • d - 钻石级
  • E - 错误栏标记 ( ) 此标记需要创建两个数据系列:一个值用于底部,第二个数据系列中的对应点用于顶部。此外,它还公开了一个扩展的 <size> 语法:line_thickness[:top_and_bottom_width],其中 top_and_bottom_width 是可选的。请参阅下面的示例。
  • h - 在指定高度上横跨图表的水平线。 (<opt_which_points> 参数的唯一有效格式为 opt_which_points。)
  • H - 穿过指定数据标记的水平线。这支持扩展的 <size> 语法,该语法可让您指定确切的线条长度:line_thickness[:length],其中 :length 是可选的,默认值为图表区域的完整宽度。
  • o - 圈子
  • s - 方形
  • v - 从 x 轴到数据点的竖线
  • V - 长度可调的竖线。这支持扩展的 <size> 值语法,该语法可让您指定确切的线条长度:line_thickness[:length],其中 :length 是可选的,默认值为图表区域的完整高度。该标记会居中于相关数据点上。
  • x - 一个 X
<color>
:此系列的标记的颜色,采用 RRGGBB 十六进制格式
<series_index>
:绘制标记时所依据的数据系列中从零开始的索引。h 标记以及按 x/y 位置指定位置的标记(以 @ 字符开头)会被忽略。您可以使用隐藏的数据系列作为标记来源;有关详情,请参阅复合图表。分组垂直条形图支持特殊的扩展语法,以便将标记与特定条形对齐。
<opt_ which_points>opt_which_points
[可选] 要在哪个/哪些点上绘制标记。默认值为所有标记。请使用以下某个值:
  • n.d - 绘制标记的位置。其含义因标记类型而异:
    • 除 h 以外的所有类型 - 要在哪个数据点上绘制标记,其中 n.d 是数据系列中从零开始的索引。如果您指定非整数值,则小数表示计算出的中间点。例如,3.5 表示点 3 和点 4 之间的一半。
    • h - 一个介于 0.0 到 1.0 之间的数字,其中 0.0 表示图表的底部,1.0 表示图表的顶部。
  • -1 - 在所有数据点上绘制标记。此外,您也可以将此参数留空,以便在所有数据点上进行绘制。
  • -n - 在每 n 个数据点上绘制一个标记。n浮点值;如果 n 小于 1,则图表会为您计算额外的中间点。例如,-0.5 表示放置的标记数量将是数据点的两倍。
  • start:end:n - 在范围中的第 n 个数据点上绘制一个标记(索引值介于 start 到 end 之间(包括这两个值)。nnn所有参数都是可选的(可以不存在),因此 3::1 表示从第四个元素到最后一个元素,即第 1 步,如果完全省略此参数,则默认采用 first:last:1。所有值都可以是浮点数。startend 可以为负值,以便从最后一个值开始反向计数。如果 startend 均为负数,请确保它们以递增值列出(例如,-6:-1:1)。 如果 n 步值小于 1,它将通过插值给定的数据值来计算其他数据点。n默认值为 first:last:1
  • x:y - 在图表上的特定 x/y 点绘制标记。 此点不必在线。如需使用此选项,请在标记类型之前添加 @ 字符。以浮点值指定坐标,其中 0:0 为图表的左下角,1:1 为图表的右上角。例如,如需向图表中心添加 15 像素的红色菱形,请使用 @d,FF0000,0,0.5:0.5,15
<size>
标记的大小(以像素为单位)。大多数标记会为此参数采用单个数字值;V、H 和 S 标记支持语法 <size>[:width],其中可选的第二部分用于指定线条或标记的长度。
<opt_z_order>
[可选] 表示要在哪个图层上绘制标记(与其他标记和其他所有图表元素相比)。这是一个从 -1.0 到 1.0(包括 -1.0 和 1.0)的浮点数,其中 -1.0 表示底部,1.0 表示顶部。图表元素(折线和条形)正好低于零。如果两个标记具有相同的值,则系统会按照网址指定的顺序绘制它们。默认值为 0.0(正好位于图表元素的上方)。
<opt_offset>
[可选] 可让您指定相对于指定位置的水平和垂直偏移。以下语法使用 : 分隔符:reserved:<horizontal_offset>:<vertical_offset>。 如果指定,则可以在 <opt_z_order> 的 chm 参数字符串中添加空值。示例:o,FF9900,0,4,12,,:10 o,FF9900,0,4,12.0,,:-10:20 o,FF9900,0,4,12,1,::20
  • reserved - 留空。
  • <horizontal_offset> - 一个正数或负数,用于指定水平偏移量(以像素为单位)。可选;如果未使用,请留空。
  • <vertical_offset> - 一个正数或负数,用于指定垂直偏移量(以像素为单位)。可选;如果未使用,请留空。

 

示例

说明 示例

下面列举了几个形状和线条标记的示例。

  • a,990066,0,0.0,9.0 - 紫色箭头,第一个数据系列,位于第一个点,大小为 9。
  • c,FF0000,0,1.0,20.0 - 红色十字,第一个数据系列,位于第二个点,尺寸 9。
  • d,80C65A,0,2,20.0 - 绿色菱形,第一个数据系列,第三个点,尺寸 9。
  • H,000000,0,3,1:40 - 黑色水平线,第一个数据系列,数据点 3,宽 1 像素,长 40 像素。
  • o,FF9900,0,4.0,12.0 - 橙色圆形,第一个数据系列,位于第五点,大小 12。
  • s,3399CC,0,5.0,11.0 - 蓝色方形,第一个数据系列,位于第六点,大小 11。
  • v,BBCCED,0,6.0,1.0 - 向上指向某个点的垂直线,第一个数据系列,第七点,宽 1 像素。
  • V,3399CC,0,7.0,1.0 - 从图表底部到顶部的竖线,第一个数据系列,第八点,宽 1 像素。
  • x,FFCC33,0,8.0,20.0 - 黄色“X”,第一个数据系列,第九点,大小 20。
  • H,FFFF00,0,9,2 - 黄色水平线,与数据点 9 处的图表宽度相同。
  • h,FF0000,0,0.5,1 - 位于指定高度的红色横线,第一个数据系列,位于图表高度的一半,宽 1 像素。
带有标记的折线图表
chm=
  a,990066,0,0.0,9.0|
  c,FF0000,0,1.0,20|
  d,80C65A,0,2.0,20.0|
  H,000000,0,3,1:40|
  o,FF9900,0,4.0,12.0|
  s,3399CC,0,5.0,11.0|
  v,BBCCED,0,6,1.0|
  V,3399CC,0,7,1.0|
  x,FFCC33,0,8,20|
  H,FFFF00,0,9,2|
  h,FF0000,0,0.5,1

下例对一个数据系列使用菱形,对另一个数据系列使用圆形。

如果两个或多个标记占据同一点,则会按照标记在 chm 参数中的显示顺序绘制这些标记。在这里,圆形是第一个使用 chm 指定的标记,因此首先绘制了圆形。先指定并绘制菱形,这样就会将其绘制在圆形上。

折线图:一条折线的每个数据点上有 15 个像素的圆圈,另一条折线包含 10 个像素的菱形。一个菱形绘制在两条折线的公共点上
chm=
  o,FF9900,0,-1,15.0|
  d,FF0000,1,-1,10.0

此折线图的每秒数据点上带有一个标记(-2 表示每隔一个点)。

每两个数据点上带有一个标记的折线图表
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-2,6
此折线图使用的标记数量是数据点的两倍(-0.5 表示每半个点)。 每两个数据点上带有一个标记的折线图表
chd=t:
  0,20,20,50,40,70,70,90,85,45,40,50
chm=
  o,0066FF,0,-.5,6
以下示例展示了如何使用 hv 标记创建自定义颜色和粗细的网格线。将 z-order 值(最后一个值)设置为 -1,以便在数据线下方绘制网格线。
每两个数据点上带有一个标记的折线图表
chm=
  h,76A4FB,0,0:1:.2,2,-1|
  V,76A4FB,0,::2,0.5,-1

此例向折线图表添加了纵向填充线:

  • v - 向图表添加竖线
  • FF0000 - 红线
  • 0 - 序列索引
  • : :.5 - 范围说明符:从 start 到 end,每 0.5 个点。
  • 2 - 厚度为 2 像素。
每两个数据点上带有一个标记的折线图表
chm=
  v,FF0000,0,::.5,2
此示例使用确切坐标向图表添加了箭头和文本标记。第一个标记 D 是条形下方的轨迹线。第二个标记是箭头,第三个标记是箭头文本。
chm=
  D,003971,1,0,3|
  @a,000000,0,.25:.75,7|
  @tExpected,000000,0,.35:.85,10
固定在特定数据点上的水平线 (H) 可用于显示相对值,或强调图表上数据值的高度。
chm=H,FF0000,0,18,1

此图表演示的标记可以在 <size> 参数中指定线段粗细和长度。

  • E,000000,0,6,1:20 - 黑色错误栏,线条宽 1 像素,顶部和底部栏长 20 像素。底部固定在数据系列 0 的点 8 上,顶部固定在数据系列 1 的点 8 上。
  • H,990066,1,2,5:50 - 紫色水平线,宽 5 像素,长 50 像素,居中于数据点 2。
  • V,3399CC,0,8,3:50- 蓝色竖线 宽 3 像素,长 50 像素,以数据点 8 为中心。
title="cht=lc&chd=s:2gounjqLaCf,jqLaCf2goun&chco=008000,00008033&chls=2.0,4.0,1.0&chs=250x150&chm=H,990066,1,2,5,30"chm=
  E,000000,0,6,1:20|
  H,990066,1,2,5:50|
  V,3399CC,0,8,3:50

返回页首

文本和数据值标记 chm [条形图、折线图、雷达图、散点图]

您可以使用自定义文本或该点的格式化版本数据为图表上的特定点加标签。

您可以使用竖线字符 ( |) 组合任何 chm 标记来分隔 chm 参数集。

关于字符串值的说明:标签字符串中仅允许使用安全的网址字符。为安全起见,如果字符串中包含不在字符集 0-9a-zA-Z 中的字符,您应对此类字符串进行网址编码。 您可以在 Google 可视化文档中找到网址编码器。

语法

为要标记的每个系列指定以下一组参数。如需标记多个系列,请创建其他参数集,并以竖线字符分隔。您无需标记所有系列。如果您不为数据系列分配标记,则该数据系列将不会收到任何标记。

chm=
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
    |...|
  <marker_type>,<color>,<series_index>,<opt_which_points>,<size>,<opt_z_order>,<opt_placement>
<marker_type>
要使用的标记类型。您可以从以下类型中进行选择:
  • f<text> - 包含文本的标记。指定字符“f”,后跟自定义网址编码文本。如需对文本标记中的英文逗号进行转义,请在英文逗号前面加上 \ 标记。示例:fHello\,+World!
  • t<text> - 简单的文本标记。指定字符“t”,后跟自定义网址编码文本。如需对文本标记中的英文逗号进行转义,请在英文逗号前面加上 \ 标记。示例:tHello\,+World!
  • A<text> - 注释标记。这与标志标记类似,但标记会协调其位置,以免重叠。<opt_which_points> 的唯一有效格式是 opt_which_points,用于表示系列中点的索引。
  • N<formatting_string> - 此点的数据值,格式可选。如果您不使用 chds 参数(自定义缩放),则它会提供精确的编码值;如果将该参数与任何格式类型搭配使用,则该值将缩放到您指定的范围。 请参阅下面的带有数字标记的 chds 示例。在堆叠条形图中使用此标记时,如果您为 <series_index> 指定 -1,则会得到一个标记,用于显示此堆叠条形中所有值的总和。series_index格式字符串语法如下:
           <preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>.
    所有这些元素都是可选的。每个元素的含义如下:
    • <preceding_text> - 每个值前面的文本。
    • *...* - 用星号括起来的可选块,您可以在该块中指定数字的格式详细信息。以下值均受支持且均为可选:
      • <number_type> - 数值的数字格式。选择以下任一选项:
        • f - [默认] 浮点格式。 也可以考虑使用 <小数位数> 值指定精度。decimal_places
        • p - 百分比格式。系统会自动附加 % 符号。注意:使用此格式时,0.0 - 1.0 之间的数据值将映射到 0 - 100%(例如,0.43 将显示为 43%)。
        • e - 科学记数法格式。
        • c<CUR> - 使用相应的货币标记将数字设置为指定的货币格式。 将 <CUR> 替换为由三个字母组成的货币代码。示例:cEUR 表示欧元。您可以在 ISO 网站上找到一系列代码,不过并非所有符号都受支持。
      • <decimal_places> - 一个整数,用于指定要显示的小数位数。该值会四舍五入(非截断)到此长度。默认值为 2
      • z - 显示尾随零。默认值为 no
      • s - 显示组分隔符。默认值为“否”
      • xy - 按指定方式显示 x 坐标或 y 坐标中的数据。x 数据的含义因图表类型而异:请使用您的图表进行实验以确定其含义。默认值为 'y'
    • <following_text> - 每个值后面的文本。
<color>
:此集合的标记的颜色,采用 RRGGBB 十六进制格式
<series_index>
:绘制标记时所依据的数据系列中从零开始的索引。如果这是堆叠条形图且标记类型为 N(数据点值),您可以指定 -1,以为每个条形堆叠创建求和值标记。请参阅下文中的示例。
<opt_ which_points>opt_which_points
[可选] 要在哪个/哪些点上绘制标记。默认值为所有标记。请使用以下某个值:
  • n.d - 要在哪个数据点上绘制标记,其中 n.d 是数据系列中从零开始的索引。n.d如果您指定非整数值,则小数表示计算出的中间点。例如,3.5 表示点 3 和点 4 之间的一半。
  • -1 - 在所有数据点上绘制标记。此外,您也可以将此参数留空,以便在所有数据点上进行绘制。
  • -n - 在每 n 个数据点上绘制一个标记。n
  • start:end:n - 在范围中的第 n 个数据点上绘制一个标记,索引值介于 start 到 end 之间(包括这两个值)。nnn所有参数都是可选的(可以不存在),因此 3::1 表示从第四个元素到最后一个元素,即第 1 步,如果完全省略此参数,则默认采用 first:last:1。所有值都可以是浮点数。startend 可以为负值,以便从最后一个值开始反向计数。如果 startend 均为负数,请务必以递增值列出(例如,-6:-1:1)。如果 n 步值小于 1,它将通过插值给定的数据值来计算其他数据点。n默认值为 first:last:1
  • x:y - [不支持 N 型标记] 在图表上的特定 x/y 点绘制标记。此点不必在线。如需使用此选项,请在标记类型之前添加 @ 字符 (@)。以浮点值指定坐标,其中 0:0 为图表的左下角,0.5:0.5 为图表的中心,1:1 为图表的右上角。例如,如需在图表中心添加一个 15 像素的红色菱形,请使用 @d,FF0000,0,0.5:0.5,15
<size>
标记的大小(以像素为单位)。如果这是包含第三个数据系列(用于指定点大小)的散点图,则此值将根据数据范围进行缩放。因此,如果数据范围为 0—100 且 <size> 为 30,则数据值 100 表示宽度为 30 像素,数据值 50 表示宽度为 15 像素,依此类推。
<opt_z_order>
[可选] 表示要在哪个图层上绘制标记(与其他标记和其他所有图表元素相比)。这是一个从 -1.0 到 1.0(包括 -1.0 和 1.0)的浮点数,其中 -1.0 表示底部,1.0 表示顶部。图表元素(折线和条形)正好低于零。如果两个标记的值相同,就会按照网址指定的顺序绘制它们。默认值为 0.0(正好位于图表元素的上方)。
<opt_placement>
[可选] 其他展示位置详情,用于说明此标记相对于数据点的放置位置。您可以指定水平和/或垂直相对定位以及偏移量。展示位置语法是一个带有 : 分隔符的字符串,如此处所示。所有元素均为可选:<horizontal_and_vertical_justification>:<horizontal_offset>:<vertical_offset>。 如果指定,则可以在 <opt_z_order> 的 chm 参数字符串中添加空值。示例:N,000000,0,1,10,,bN,000000,0,1,10,,lvN,000000,0,1,10,,r::10
horizontal_and_vertical_justification
标记的定位点。这与对齐方式相反,因此左侧锚点实际上会将标记放在数据点的右侧。您可以从以下列表中选择一个水平和/或垂直对齐器:
  • 水平放置:“l”“h”或“r”- 水平锚定,靠左、居中或右锚定。默认值为“l”。
  • 垂直放置:“b”“v”“t”- 垂直底部、中间或顶部锚定。默认值为“b”。
  • 条形相对位置 [仅限条形图]:“s”“c”“e”- 条形的底部、中心或顶部。对于堆叠图表,此数值是相对于每个系列的条形部分而言的,而非整个条形。如果给定的系列索引为 -1(堆叠总计),表示相对于整个条形。该值可以与垂直展示位置值结合使用:例如“be”或“vs”。 默认值为“e”。
horizontal_offset
此标记的水平偏移量,以像素为单位。默认值为 0
vertical_offset
此标记的垂直偏移量,以像素为单位。非条形图默认值:15;条形图表默认值:2

说明 示例

下面是一个条形图上的值标签示例。

第一个图表 (N*p0*) 指定一个数据值标记,值以百分比的形式显示,四舍五入到小数点后零,所有值均以 11 点显示。请注意,数据值均介于 0.0 和 1.0 之间,在采用百分比格式时,这些值向上移动了两位小数。

第二个图表 (N*cEUR1*) 以欧元值的格式显示了相同的值,保留一个小数位,黑色,所有值均采用 11 点式文本。

每个条形上带有百分比标签的条形图表
chm=
  N*p0*,000000,0,-1,11
chd=t:
  0.4356,0.3562,0.4834,0.575,0.673,0.6091


每个条形上带有欧元标签的条形图表


chm=
  N*cEUR1*,000000,0,-1,11

您可以使用 chds 参数来缩放显示的数值。您可以对所有数据格式(包括简单编码和扩展编码)使用 chds。这不会影响条形大小或轴标签,而只会影响数据标记值。

此示例展示了一个图表,其中包含简单编码值 46、39、29、30、43、41。简单编码范围为 0—61。chds 参数定义了自定义标记比例 0—1,因此标记值会缩放到此范围,但条形高度不受影响(如果是文本格式数据,条形也会进行缩放)。


chd=s:underp
chm=N,000000,0,-1,11
chds=0,1

下面的图表示例在最低点带有文本标签,并在最高点带有标志标签。

绿色虚线的数据点上绘有以下标记的折线图表:10 点蓝色文字的标签和带有 15 点红色文字的旗帜。
chm=
  tMin,0000FF,0,1,10|
  fMax,FF0000,0,3,15

此示例展示了一个堆叠图表,其中包含各个系列的值以及系列的总计值。要显示堆叠的系列值,我们必须使用“c”定位选项;否则,顶部条形的值会与每个条形顶部的总和值重叠。
chm=
  N,FF0000,-1,,12|
  N,000000,0,,12,,c|
  N,000000,1,,12,,c|
  N,ffffff,2,,12,,c
关于垂直和水平放置方式的更多演示。此示例演示了条形图的锚点值的各种组合(使用 s、c 和 e 表示垂直放置)。请注意,右侧锚点将标记向左移动,顶部锚点将标记向下移动,反之亦然。红点表示每个条形的底部、中心和顶部。 该数字是数据值,对每个条形使用不同的定位值进行固定。
chm=
  N,000000,0,0,10,,rs
  N,000000,0,1,10,,ls
  N,000000,0,2,10,,c
  N,000000,0,3,10,,e
  N,000000,0,4,10,,e::15
  N,000000,0,5,10,,e::-12
注释标记会自动调整标签位置,以免重叠。第一个 chm 值用于线条填充,以下值均为注解标记。
chm=B,C5D4B5BB,0,0,0
  AA,666666,0,3,15
  AB,666666,0,5,15
  AC,666666,0,24,15
  AD,666666,0,25,15
  AE,666666,0,26,15
  AF,666666,0,51,15
  AG,666666,0,60,15
  AH,666666,0,73,15
  AI,666666,0,80,15
  AJ,666666,0,99,15
另一个注释标记示例,展示了瑞士各城市的海拔。

返回页首

范围标记 chm [条形图、K 线图、折线图、雷达图、散点图]

您可以为背景填充的横向或纵向条带着色,以突出显示图表的特定区域。

您可以使用竖线字符 ( |) 组合任何 chm 标记来分隔 chm 参数集。

语法

为要绘制的每个频段指定以下一组参数。如需绘制多个频段,请创建其他参数集,并以竖线字符分隔。范围是按指定顺序绘制的,因此绘制的最后一个范围将绘制在先前的范围之上。

chm=
  <direction>,<color>,0,<start_point>,<end_point>
    |...|
  <direction>,<color>,0,<start_point>,<end_point>
<direction>
指定水平或垂直阴影。r 表示水平范围,R 表示垂直范围。
<color>
范围颜色,采用 RRGGBB 格式的十六进制数字
0
预留 - 必须为零。
<start_point>
范围的起始位置。
  • 对于水平范围标记,这是 y 轴上的位置,其中 0.00 是图表的底部,1.00 是图表的顶部。
  • 对于垂直范围标记,这是 x 轴上的位置,其中 0.00 表示图表的左侧,1.00 表示图表的右侧。
<end_point>
范围的结束位置。
  • 对于水平范围标记,这是 y 轴上的位置,其中 0.00 是图表的底部,1.00 是图表的顶部。
  • 对于垂直范围标记,这是 x 轴上的位置,其中 0.00 表示图表的左侧,1.00 表示图表的右侧。

 

示例

说明 示例

范围标记可以是一条细线,也可以是一条颜色条。

  • r,E5ECF9,0,0.75,0.25 - 范围标记,浅蓝色(预留),图表高度的 0.5。
  • r,000000,0,0.1,0.11 - 范围标记,黑色(预留),从 y 轴向上 0.1 处开始,到 y 轴向上 0.11 处(一条黑色细线)结束。
带有以下范围标记的折线图表:一个从 y 轴向上 25% 处延伸到 75% 处的浅蓝色横向条带和一条位于 y 轴向上 10% 处的横向细线
chm=
  r,E5ECF9,0,0.75,0.25|
  r,000000,0,0.1,0.11

本例显示了垂直范围标记。第一个标记是红线 (FF0000),第二个标记是浅蓝色的条带 (A0BAE9)。

带有以下范围标记的折线图表:一个从 x 轴 25% 处延伸到 75% 处的浅蓝色纵向条带和一条位于 x 轴 10% 处的纵向细线
chm=
  R,FF0000,0,0.1,0.11|
  R,A0BAE9,0,0.75,0.25

标记是按指定顺序绘制的。在本例中,您可以看到红色垂直标记在浅蓝色水平标记之前绘制。

带有一条蓝色纵向条带和浅蓝色横向条形的折线图表,分别从 x 轴和 y 轴的 25% 到 75% 处延伸。一条位于 x 轴 10% 处的红色纵向细线和一条位于 y 轴 10% 处的黑色横向细线
chm=
  R,FF0000,0,0.1,0.11|
  R,A0BAE9,0,0.75,0.25|
  r,E5ECF9,0,0.75,0.25|
  r,000000,0,0.1,0.11

下面的折线图示例使用范围标记在图表的零位线、中点线和顶部绘制了穿过图表的模糊水平线。

带有一条黄色折线和三条等间距横线的折线图表
chm=
  r,000000,0,0.499,0.501|
  r,000000,0,0.998,1.0|
  r,000000,0,0.0,0.002

返回页首

线条标记 chm=D [条形图、K 线图、折线图、雷达图、散点图]

您可以在图表中添加一条用于跟踪数据的线条。最常用于复合图表

要添加多行代码(或将其与任何其他 chm 标记结合使用),请使用竖线 (|) 分隔符分隔 chm 参数集。您不能使用此参数制作虚线标记。

语法

chm=
  D,<color>,<series_index>,<which_points>,<width>,<opt_z_order>
D
表示这是一个线条标记。
<color>
线条的颜色,采用 RRGGBB 十六进制格式
<series_index>
用于绘制线条的数据系列的索引。第一个数据系列的数据系列索引为 0,第二个数据系列的数据系列索引为 1,依此类推。
<what_points>which_points
要用系列中的哪些点来绘制线条。请使用以下某个值:
  • 0 - 使用系列中的所有点。
  • start:end - 使用系列中特定的点范围(从起始值到结束值,含从零开始的索引)。您还可以使用浮点值指定中间点,或将 startend 留空以分别表示第一个或最后一个数据点。startend 可以为负数,作为最后一个值的反向索引。如果 startend 均为负数,请务必以递增值(例如 -6:-1)写出。
<size>
线条的宽度(以像素为单位)。
<opt_z_order>
[可选] 表示要在哪个图层上绘制标记(与其他标记和其他所有图表元素相比)。这是一个从 -1.0 到 1.0(包括 -1.0 和 1.0)的浮点数,其中 -1.0 表示底部,1.0 表示顶部。图表元素(折线和条形)正好低于零。如果两个标记的值相同,就会按照网址指定的顺序绘制它们。默认值为 0.0(正好位于图表元素的上方)。

 

示例

说明 示例

此示例展示了如何在条形图上绘制标记线。 Z 轴顺序设置为 1,因此线条是在条形的顶部绘制的。

此例中的条形和数据折线使用了相同的数据。
带有折线标记的条形图表
chm=D,0033FF,0,0,5,1
chd=s:1XQbnf4

此条形图为同一个条形图,但为折线额外提供了一个数据系列。这是一个复合图表的示例。 复合图表的绘制方式是:向 chd 参数添加额外的数据系列,并向 chd 添加一个值,告知图表“忽略”这些额外的数据系列。

如需了解详情,请参阅复合图表

带有折线标记的条形图表
chm=D,0033FF,1,0,5,1
chd=s1:1XQbnf4,43ksfg6

返回页首

数据函数 chfd [所有chd图表]

您可以使用 muParser 函数语法指定一个自定义函数来针对图表数据运行。函数中使用的数据可出自以下两个来源:

  • 来自 chd 的数据系列 - 数据是从 chd 中的指定系列中提取的。
  • chfd 参数本身中声明的一系列值 - 您可以声明任意数据范围的起始值、停止值和步进值。

请务必注意,在任何情况下,您都必须将输出分配给 chd 中的现有序列;该序列将被函数输出结果覆盖。系统仅在所有函数均处理完毕后才会渲染图表,因此,如果您分配多个函数要输出到同一数据系列,这些函数将按给定顺序运行,但图表上只会绘制最终函数的输出。请注意,您可以链接函数,以便一个函数可以接受上一个函数输出的系列作为输入。

如需为函数行分配颜色或 chm 标记,请为函数系列索引分配颜色或标记。请注意,在函数处理数据后,系统会根据数据放置标记。

语法

chfd=
  <output_series_index>,<function_data>,<function_string>
    |...|
  <output_series_index>,<function_data>,<function_string>
<output_series_indexoutput_series_index>
chd 中数据系列(函数输出将写入的位置)的从零开始的索引。任何现有数据都将被函数输出完全覆盖。如果某个系列未用作函数的输入,则最佳实践是为该系列分配一个虚拟值。
<function_data>
绘制的变量和数据。数据可以来自您定义的范围,也可以来自某个 chd 数据系列。您可以为每个函数指定多个变量,使用 ;(分号)分隔符分隔多个变量。请注意,如果您为单个函数定义了多个变量,并且这些变量的点数不同,则该函数会在到达第一个端点时停止。例如,如果某个函数同时定义了 x=1—5 step 1 和 y=1—10 step 1,则该函数会在到达第五个点时结束。
    <variable_name>,<input_series_index>
        

    <variable_name>,<start>,<end>,<step>
  • variable_name - 变量的任意字符串名称。 在 function_string 定义的函数中使用此字符串。
  • input_series_index - 要用作输入数据的 chd 数据系列的索引。
  • start - 范围的起始数值。
  • end - 范围的结束数值。
  • step - 从 startend 的数值步进值。正值或负值均可,但不可为零。
示例 x,0,100,1 声明了一个名为 x 且值为 0、1、2 ... 100 的变量。x,0,100,1;r,0,3.1,.1 声明相同的 x 变量以及一个名为 r 且值为 0、0.1、0.2、...、3.0、3.1 的变量。x,0 声明了一个名为 x 的变量,该变量使用第一个 chd 系列中的数据。这些变量将供 function_string 使用。 除非您在 function_string 中指定这些参数,否则系统不会将其绘制在图表上。阶值越小,图表越平滑。
<function_string>function_string
您的函数,使用 muParser 语法编写。该函数会应用于 variable_data 中指定的变量和数据。 您只能引用此本地函数集中声明的变量,而不能引用另一个以管道形式表示的 chfd 参数集中的变量。不支持 Summary muParser 函数(min、maxsum、avg)。重要提示:请务必在函数中使用 %2B,而不是 +

 

示例

说明 示例

简单的正弦波。需要注意以下几点:

  • chd=t:-1 - 我们为图表数据使用虚拟变量,因为数据是在 chfd 参数中声明的。
  • chco=FF0000 - 为第一个数据系列指定了红色。即使我们不使用 chd 中的数据,该数据系列的对应颜色将用于绘制的函数。
  • chfd=0,x,0,11,0.1,sin(x)*50%2B50 - 我们声明了一个名为 x 的变量,其值在 0—11 之间,递增 0.1。系统会将该颜色分配给第一个系列,这意味着它将获得第一个系列颜色 (FF0000)。 对 x 应用的函数是 sin(x) * 50 + 50。请注意我们必须如何对该函数中的 + 进行编码。

 

由 chfd 指定的正弦波
cht=lc
chd=t:-1
chco=FF0000
chfd=
  0,x,0,11,0.1,sin(x)*50%2B50
chxt=x,y
此行使用 chd 参数中的数据。
chd=t:5,10
chfd=0,x,0,x*4

函数线和非函数线的组合。

请注意颜色是通过系列颜色参数 chco 指定的。

请注意函数输出中标记的放置;数据点是根据 startendstep 计算得出的,因此,如果您的范围是 0—11 step 0.1,则点 0 为 0,点 1 为 0.1,以此类推,直到点 110,其值为 11。

一个使用 chfd 的数据系列和另一个数据使用 chd 数据系列。
chd=t:
  -1
  15,45
chco=
  FF0000,000000
chfd=
  0,x,0,11,0.1,sin(x)*50%2B50
chm=
  c,00A5C6,0,110,10
  a,00A5C6,0,60,10

如需在二维空间中定义函数,请使用 lxy 图表,分配两个虚拟系列,并为每个系列分配一个函数。

  • 0,x,0,10,0.1,sin(x)*50%2B50 - 序列 0(x 轴值)具有一个名为 x 的变量(值为 0-10,步长为 0.1)和一个函数 sin(x)*50 + 50
  • 0,y,0,10,0.1,sin(y)*50%2B50 - 序列 0(y 轴值)具有一个名为 y 的变量(值为 0—10,步长为 0.1)和一个函数 sin(x)*50 + 50
一个圆形
cht=lxy
chd=t:-1|-1
chfd=
  0,x,0,10,0.1,sin(x)*50%2B50|
  1,y,0,10,0.1,cos(y)*50%2B50

chfd 参数可以真正让您展现创造力。

试着点击这些图片,在图表园地中将其打开并玩一玩;您一定会爱上它!



返回页首