Google Chart API 参考 中文版

文档信息

翻译: Cloudream ，最后修改:02/22/2008 06:11:08

英文版版权归 Google , 转载此中文版必须以链接形式注明原文地址、译者信息及本声明。

API 参考：http://labs.cloudream.name/google/chart/api.html

常见问题：http://labs.cloudream.name/google/chart/faq.html

简介

Google Chart API 为您提供动态创建图表的功能。单击下边的网址查看示例演示：

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

您应该看到如下图表

目录

  1. 目的
  2. 使用方针
  3. 简介
  4. URL格式
  5. 必须、可选参数
  6. 图表尺寸
  7. 图表数据
  8. 图表类型
  9. 颜色
  10. 标注
  11. 样式

目的

本文档为使用 Google Chart API 的开发者提供 API 参考及参数说明。

↑返回目录

使用方针

每位用户每天可发送 50,000 次请求。超过此限制后 Google 将暂时拒绝您的请求，若您继续发送请求，Google 可能会永久拒绝您的服务请求。

↑返回目录

简介

Google Chart API 为每个请求返回一个 PNG 格式图片。目前提供如下类型图表：折线图、柱状图、饼图、维恩图、散点图。您可以设定图表尺寸、颜色和图例。

您可以在网页中使用<img>元素插入图表，当浏览器打开该网页时，Chart API 提供即时图表。

本文档内所有图表由 Chart API 生成，查看某图片方法：

  • 如果您使用 Firefox ，在图片上单击右键，选择“查看图片”或“属性”。
  • 如果您使用 Internet Explorer ，在图片上单击右键，选择“属性”。

本文档将介绍 Chart API 所有参数设置。

↑返回目录

URL格式

所有 Chart API URL 都应使用如下格式：

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

注意：每个 URL 所有字符必须在同一行内。

多个参数间使用 & 作为分隔符，您可以使用任意多个参数，如下图：

http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=s:helloWorld&chxt=x,y&chxl=0:|Mar|Apr|May|June|July|1:||50+Kb

参数解释：

  • http://chart.apis.google.com/chart? Chart API 调用地址。
  • &参数分隔符。
  • chs=200x125图表尺寸。
  • chd=s:helloWorld图表数据值。
  • cht=lc图表类型。
  • chxt=x,y显示 x、y 轴坐标。
  • chxl=0:|Mar|Apr|May|June|July|1:||50+Kbx、y 轴坐标值。

你可以在网页中使用img元素插入图表，如：

<img src="http://chart.apis.google.com/chart?chs=200x125&amp;chd=s:helloWorld&amp;cht=lc&amp;chxt=x,y&amp;chxl=0:|Mar|Apr|May|June|July|1:||50+Kb" alt="Sample chart" />

注意：在HTMLimg元素中，URL 属性中&字符应书写为转义字符&amp;。

↑返回目录

必须、可选参数

所有请求必须包含以下参数：

其它参数均为可选参数，各类型图表有效参数如下：

参数 折线图 散点图 柱状图 维恩图 饼图
图表标题 可用 可用 可用 可用 可用
图表图例 可用 可用 可用 可用 可用
颜色 可用 可用 可用 可用 可用
背景填充 可用 可用 可用 可用 可用
多轴标注 可用 可用 可用    
网格线 可用 可用      
形状标记 可用 可用      
水平区间填充 可用 可用      
垂直区间填充 可用 可用      
折线样式 可用        
数据区块填充 可用        
饼图标注         可用

↑返回目录

图表尺寸

参数格式：chs=<像素宽度>x<像素高度>

例如：chs=300x200，表示一个 300 像素宽、200 像素高的图表。

单个图表最大尺寸为 300,000 平方像素，宽高最大为 1000 像素，以下尺寸均为最大可用尺寸：1000x300，300x1000，600x500，500x600，800x375 和 375x800 等。

↑返回目录

图表数据

图表数据有三种格式：

  • 简单编码 包含 62 个数值，每个数值占据 5 个像素，适用于 300 像素大小的折线图和柱状图，所有图表类型都可以使用简单编码数据。
  • 文本编码 包含 1000 个数值，使用 0.0 至 100.0 的浮点数，每十个数值占据 5 个像素，在仅使用整数的情况下，适用于 500 像素以内的图表。如需要更高精度，可使用一位小数数字（如 92.6）
  • 扩展编码 包含 4096 个数值，适用于高精度或大型图表。

注意：文本编码和扩展编码使用多个字符表示一个数值。简单编码生成图表的效率最高。

↑返回目录

简单编码

简单编码格式为

chd=s:<数值字符串>

其中<数值字符串>可包含a-z、A-Z、0-9、_和,。

含义如下

  • 大写字母A= 0、B= 1，以此类推，Z= 25。
  • 小写字母a= 26、b= 27，以此类推，z= 51。
  • 数字0= 52，以此类推，9= 61.
  • 下划线_表示空值。
  • 逗号,为数据分组符号。

注意：简单编码中，图表底端为 0 ，图表顶端为 61 ，中间数值在垂直方向平均分布。

↑返回目录

文本编码

文本编码格式为

chd=t:<数值字符串>

其中<数值字符串>为0.0至100.0的浮点数、-1（负一）和|（竖线）。

含义如下

  • 浮点数字0.0= 0，以此类推100.0= 100。
  • 负一-1表示空值。
  • 竖线|为数据分组符号。

注意：文本编码中，图表底端为 0.0 ，图表顶端为 100.0 ，中间数值在垂直方向平均分布。

↑返回目录

扩展编码

文本编码格式为

chd=e:<数值字符串>

其中<数值字符串>为A-Z、a-z、0-9、连字符-、小数点.、下划线_和逗号,。

含义如下

  • AA= 0、AZ= 25、Aa= 26、Az= 51、A0= 52、A9= 61、A-= 62、A.= 63、BA= 64、BZ= 89、.A= 4032、.Z= 4057、.a= 4058、.z= 4083、.0= 4084、.9= 4093、.-= 4094、..= 4095。
  • 两个下划线__表示空值。
  • 逗号,为数据分组符号。

注意：文本编码中，图表底端为 0 ，图表顶端为 4095 ，中间数值在垂直方向平均分布。

↑返回目录

JavaScript 数值转换代码

如您所知，使用程序来自动将数值转换为 Chart API 数值比手动转换快捷得多。

下边这段 JavaScript 代码用于将数据转换为简单编码格式。第一个参数需为数据数组，负数将被转换为空值_。

第二个参数为数据中最大值。在折线图和柱状图中，如果您希望图表顶端与最大值间有一定空间，可以使此参数值大于数据中最大值。

var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

function
simpleEncode(values,maxValue) {

var chartData = ['s:'];
  for (var i
= 0; i < values.length; i++) {
    var currentValue = values[i];
    if
(!isNaN(currentValue) && currentValue >= 0)
{
      chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1)
* currentValue / maxValue)));
    }
    else
{
      chartData.push('_');
    }
  }
  return
chartData.join('');
}

↑返回目录

图表粒度指导

不要为图表设定过多数据点。例如，显示布兰妮·斯皮尔斯过去十年的流行程度，如果每天搜索量作为一个数据点的话，将有 3,600 个数据点，对于 URL
来说数据太多了，Chart API 也不会生成粒度如此密的图表—— 1024 像素宽的显示器上每个数据点之占据四分之一个像素。下边的示例解释这个问题。

200x100 像素图，20 个数据点（每个数据点占 10 个像素）

40 个数据点（每个数据点占 5 个像素）

80 个数据点（每个数据点仅占 2.5 个像素）

↑返回目录

图表类型

目前有五种图表类型：

↑返回目录

折线图

折线图参数为

cht=<折线图类型>

<折线图类型>可选择lc或lxy。

  • lc类型图表，多组数据将绘制为多条数据线。
  • lxy类型图表每条数据线需要两组数据。
  • 设置多组数据的方法请参看数据格式
  • 更多可用参数请参看可选参数。
参数 说明 示例
cht=lc 直线图，x 轴方向均匀分布。

cht=lc
cht=lxy 每条数据线使用两组数据，第一组指定 x 轴坐标，第二组指定 y 轴坐标。

第一组数据为空时数据线将在 x
轴均匀分布。因为示例使用文本编码，所以空值为-1。简单编码使用下划线_，扩展编码使用双下划线__表示空值。

数据点形状使用参数chm，请参考形状标记一节。

数据线颜色参考颜色一节。

cht=lxy
chd=t:0,30,60,70,90,95,100|
20,30,40,50,60,70,80|
10,30,40,45,52|
100,90,40,20,10|
-1|
5,33,50,55,7

↑返回目录

柱状图

柱状图参数为

cht=<柱状图类型>

<柱状图类型>可选择bhs、bhg、bvs和bvg。

  • 多组数据将绘制为层叠柱状图。
  • 设置多组数据的方法请参看数据格式
  • 更多可用参数请参看可选参数。
参数 说明 示例
cht=bhs

cht=bvs

 水平（Horizontal）或垂直（Vertical）柱状图。

多组数据将绘制为层叠柱状图，所以必须设置颜色参数，具体参看颜色一节。
cht=bhs
chco=ff0000,00aa00

cht=bvs
chco=cc0000,00aa00
cht=bhg

cht=bvg

 水平（Horizontal）或垂直（Vertical）独立柱状图，可设定颜色，多组数据将分别绘制。
cht=bhg
chco=cc0000,00aa00

cht=bvg
chco=cc0000,00aa00
chbh 柱状图尺寸处理方法与其它类型图表不同。

对于垂直柱状图cht=bvs和cht=bvg、水平柱状图cht=bhs和cht=bhg，图表尺寸由chs参数决定，当该参数过小时，柱状图显示将不完整。

所以您可以指定更细的柱状图图表。
chbh=
<柱宽度>,
<可选的柱组间空白>

注意：第二个参数决定各组数据树状图间空白，组内数据间空白为该值一半。
chbh未设置
cht=bhs

chbh=10
cht=bhs

↑返回目录

饼图

饼图参数为

cht=<饼图类型>

<饼图类型>可选择p或p3。

  • 仅支持一组数据，后续数据将被忽略。
  • 更多可用参数请参看可选参数。

Google Chart API
根据chs参数决定饼图半径。请将宽高比设置为较大比例以使标注能完整显示。当标注不完整时说明宽高比偏小。

参数 说明 示例
cht=p 平面饼图。

使用chl参数设定标注，请参见饼图标注一节。

为设定颜色时，饼图颜色将在橘黄色和浅黄色间插值计算出。设置颜色参数请参看颜色一节。

cht=p
cht=p3 三维饼图。

使用chl参数设定标注，请参见饼图标注一节。

cht=p3

↑返回目录

维恩图

维恩图参数为cht=v

一组数据包含以下七个数值：

  • 前三个数值表示 A、B、C 的相对大小关系。
  • 第四个数值表示 A 和 B 重叠数值。
  • 第五个数值表示 B 和 C 重叠数值。
  • 第六个数值表示 A 和 C 重叠数值。
  • 第七个数值表示 A、B、C 重叠数值。
参数 说明 示例
cht=v 示例中三个圆圈数值分别为 100、80、60，两两间重叠数值为 30。

更多可用参数请参看可选参数。

cht=v
chd=t:100,80,60,30,30,30,10

↑返回目录

散点图

散点图参数为cht=s

参数 说明 示例
cht=s 需要至少两组数据，第一组指定 x 轴坐标，第二组指定 y
轴坐标。

默认数据点形状为圆圈，设定其它形状请使用chm参数，详见形状标记。

默认数据点颜色为蓝色，设置颜色请参看颜色一节。

您可能注意到了，在演示图表中，数据点拥有不同大小。如需此特性，可设置第三组数据。chm参数中指定的形状尺寸将匹配第三组数据中最大值。例如chm中设置形状尺寸为
20 像素，第三组数据中最大值（如 9，26.0 等）将显示为 20 像素大小。

cht=s

↑返回目录

颜色

使用 6 或 8 位的十六进制颜色参数，格式RRGGBB，示例：

  • FF0000= 红色
  • 00FF00= 绿色
  • 0000FF= 蓝色
  • 000000= 黑色
  • FFFFFF= 白色

您可以附加两位来设定透明度，代码00与FF之间，00表示完全透明，FF表示完全不透明。

  • 0000FFFF= 不透明蓝色
  • 0000FF00= 透明蓝色

有效的颜色设定：

↑返回目录

数据颜色

设定折线图、柱状图、维恩图和饼图数据颜色。

chco=
<颜色参数1>,
...
<颜色参数n>

其中<颜色参数1>及后续延续参数均使用十六进制参数。

参数 说明 示例
chco 示例中有三组指定颜色的数据。

chco=ff0000,00ff00,0000ff
同样有三组数据，但只设定了两组颜色，所以最后一组数据使用最后一个颜色设定（红色FF0000）。

chco=ff0000,0000ff
在柱状图中，如果数据组数比颜色组数多，则数据颜色交替使用颜色设定。示例中，第三组数据使用第一个数据颜色，如果只设定了一种颜色，则所有数据都为该颜色。

chco=ff0000,00ff00
chd=s:FOE,THE,Bar
同一组数据，设定了三组颜色。

chco=ff0000,00ff00,0000ff
chd=s:FOE,THE,Bar
在饼图中，如果数据组数比颜色组数多，则数据颜色使用颜色间内插值计算补足。

chco=0000ff
在维恩图中，如果数据组数比颜色组数多，多余数据组使用最后一个颜色。

chco=00ff00,0000ff

↑返回目录

区域填充、背景颜色

设定背景填充：

chf=
<bg 或 c><填充类型>

其中

  • <bg 或 c>中bg表示背景，c表示图表区域。
  • <填充类型>可选
  • 竖线|为填充数据组分隔符，最后一组数据后无需分隔符。

↑返回目录

实心填充

设定参数格式：

chf=
<bg 或
c>,s,<颜色>|
<bg 或 c>,s,<颜色>

其中

  • <bg 或 c>中bg表示背景，c表示图表区域。
  • s代表实心填充。
  • <颜色>为十六进制颜色RRGGBB参数。
  • 竖线|为填充数据组分隔符，最后一组数据后无需分隔符。
参数 说明 示例
chf 示例中使用灰色（EFEFEF）填充背景。

chf=bg,s,efefef
示例中使用灰色（EFEFEF）填充背景，黑色（000000）填充图表区域。您可以为折线图和散点图同时设置背景和图表区域填充。

chf=bg,s,efefef|
c,s,000000
饼图、维恩图、柱状图只能设置背景颜色。

chf=bg,s,FFF2CC

↑返回目录

线性渐变

设定参数格式：

chf=<bg or c>,lg,<angle>,<color 1>,<offset
1>,<color n>,<offset n>

其中

  • <bg 或 c>中bg表示背景，c表示图表区域。
  • lg代表线性渐变。
  • <angle>设定填充旋转角度，值在0垂直与90水平之间。
  • <颜色>为十六进制颜色RRGGBB参数。
  • <offset>表示偏移量，必须在0和1之间，0表示最靠左端，1表示最靠右端。
参数 说明 示例
chf 图表区域填充水平线性渐变（左至右），0度旋转。

蓝色（76A4FB）为第一个颜色参数，设置在最右侧。

白色（FFFFFF）为第二个颜色参数，设置在最左侧。

图表背景设置为灰色（EFEFEF）。

chf=
c,lg,0,76A4FB,1,ffffff,0|
bg,s,EFEFEF
图表区域填充倾斜线性渐变（左下至右上），45度旋转。

白色（FFFFFF）为第一个颜色参数，设置在左下。

蓝色（76A4FB）为第二个颜色参数，设置在右上。

图表背景设置为灰色（EFEFEF）。

chf=
c,lg,45,ffffff,0,76A4FB,0.75|
bg,s,EFEFEF
图表区域填充垂直线性渐变（上至下），90度旋转。

蓝色（76A4FB）为第一个颜色参数，设置在最上侧。

白色（FFFFFF）为第二个颜色参数，设置在最下侧。

图表背景设置为灰色（EFEFEF）。

chf=
c,lg,90,76A4FB,0.5,ffffff,0|
bg,s,EFEFEF

↑返回目录

线性条纹

设定参数格式：

chf=<bg or c>,ls,<angle>,<color 1>,<width
1>,<color n>,<width n>

其中

  • <bg 或 c>中bg表示背景，c表示图表区域。
  • ls代表线性条纹。
  • <angle>设定填充旋转角度，值在0垂直与90水平之间。
  • <颜色>为十六进制颜色RRGGBB参数。
  • <width>必须在0和1之间，1表示完整宽度。重复填充条纹直至达到完整宽度。
参数 说明 示例
chf 图表区域填充垂直线性条纹，0度旋转。

灰色（CCCCCC）为第一个颜色参数，占 20%
宽度。

白色（FFFFFF）为第二个颜色参数，占 20%
宽度。

交替显示条纹直至填充满图表。

图表背景未设置。

chf=c,ls,0,CCCCCC,0.2,
FFFFFF,0.2
图表区域填充水平线性条纹，90度旋转。

深灰色（999999）为第一个颜色参数，占
25% 高度。

浅灰色（CCCCCC）、白色（FFFFFF）为第二个、第三个颜色参数，占
25% 高度。

交替显示条纹直至填充满图表。

图表背景未设置。

chf=
c,ls,90,
999999,0.25,
CCCCCC,0.25,
FFFFFF,0.25

↑返回目录

标注

可用标注类型：

↑返回目录

图表标题

标题参数：

chtt=<图表标题>

参数 说明 示例
chtt 使用加号+代表空格。

竖线|表示换行。

chtt=Site+visitors+by+month|
January+to+July
设定标题字号和颜色（可选）。

chts=<颜色>,<字号>

如果图表尺寸chs设定过小，图表将只显示一部分。

chtt=Site+visitors
chts=0000FF,20

↑返回目录

图表图例

图例参数：

chdl=<第一组数据图例>|<第 n 组数据图例>

参数 说明 示例
chdl 图例chdl与颜色属性chco联合使用。

示例中第一组数据使用红色，第二组使用绿色，第三组使用蓝色。

chdl=First|Second|Third
chco=FF0000,00FF00,0000FF

chdl=First|Second|Third
chco=FF0000,00FF00,0000FF

↑返回目录

饼图标注

饼图标注参数：

chl=<标注一>|
...
<标注
n>

双竖线||表示空值。

参数 说明 示例
chdl 三维饼图示例。

chl=May|Jun|Jul|Aug|Sep|Oct

↑返回目录

多轴标注

多轴标注可用于折线图、饼图和散点图：

↑返回目录

坐标轴类型

可设置多个坐标轴：

chxt=
<坐标轴
1>
...
<坐标轴 n>

可用坐标轴类型：

  • x= 底部 x 坐标轴
  • t= 顶部 x 坐标轴
  • y= 左侧 y 坐标轴
  • r= 右侧 y 坐标轴

chxt参数中的坐标轴将拥有一个索引值，第一个坐标轴索引值为 0，第二个为
1，以此类推。所以您可以多次使用x、t、y和r。

创建坐标轴时仅chxt参数是必须的，其它参数若未设定将使用默认值。

参数 说明 示例
chxt 图例中使用了两个底部 x 轴（两个x）一个左侧 y 轴y、一个右侧 y
轴r和一个顶部 x 轴t。

注意：因为没有设置坐标值，所以 Chart API 默认使用 0 到 100。

chxt=x,y,r,x,t

↑返回目录

坐标值

设置坐标值：

chxl=
<坐标轴索引值>:|<坐标值 1>|<坐标值
n>|
...
<坐标轴索引值>:|<坐标值 1>|<坐标值
n>

坐标轴索引值指定后续坐标值应用于哪个坐标轴。所有坐标值由竖线|分割。

注意：坐标轴索引值必须正序排列。

第一个坐标值将作为坐标轴起点，最后一个坐标值作为终点，中间坐标值平均分布在坐标轴上。

参数 说明 示例
chxt和chxl 图例中使用了左右 y 轴（y和r）和两个底部 x 轴（x）。

注意：最后一个坐标值后无需分隔符|。

chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|100|
2:|A|B|C|
3:|2005|2006|2007
与上例类似，但未设置 y 轴（y）。（未设置1:值）。

注意：最后一个坐标值后无需分隔符|。

chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
（y
轴未设置）
2:|A|B|C|
3:|2005|2006|2007

↑返回目录

坐标值位置

可设置多个坐标轴：

chxp=
<坐标轴索引值>,<坐标值 1 位置>,<坐标值 n
位置>|
...
<坐标轴索引值>,<坐标值 1
位置>,<坐标值 n 位置>

多组数据间使用竖线分隔符|。若未设置chxt值，则坐标值使用位置值标注。

参数 说明 示例
chxp 图例中使用了底部 x 轴，一个左侧 y 轴y和一个右侧 y 轴r。

x
轴（索引0）未设置坐标值与坐标值位置，所以 API 默认平均分布 0 到 100。

y
轴（y）设置坐标值（min，average 和
max）与坐标值位置（10,35,75）。

右侧 y
轴（r）仅设置坐标值位置（0,1,2,4），所以 API 将其同时用于坐标值。

chxt=x,y,r
chxl=1:|min|average|max
chxp=1,10,35,75|2,0,1,2,4

↑返回目录

坐标值范围

设置坐标值范围：

chxr=
<坐标轴索引值>,<坐标值起始值>,<坐标值终止值>|
...
<坐标轴索引值>,<坐标值起始值>,<坐标值终止值>

多组数据间使用竖线分隔符|。

参数 说明 示例
chxr 图例中使用了左右 y 轴（y和r）和底部 x
轴（x）。

每个坐标轴均未设置坐标值和分布位置，所以坐标值和分布位置采用坐标值范围设置。

注意：右侧 y
轴坐标值降序排列，因为初始值1000大于终止值0。

chxt=x,y,r
chxr=0,100,500|1,0,200|2,1000,0
只使用了 x 轴（x），坐标值、坐标值位置和坐标值范围均设置。

chxt=x
chxr=0,100,500
chxl=0:|200|300|400
chxp=0,200,300,400

↑返回目录

标注样式

设置坐标值标注样式：

chxs=
<坐标轴索引值>,<颜色>,<字号>,<对齐方式>|
...
<坐标轴索引值>,<颜色>,<字号>,<对齐方式>

其中：

  • 坐标轴索引值为chxt参数中坐标索引。
  • <颜色>为十六进制颜色值。
  • <字号>设置字体大小（像素），可选。
  • <对齐方式>设置坐标值对齐方式，可选。x 轴默认居中对齐，y 轴默认右对齐，右侧 y
    轴默认左对齐。设置0为居中，-1为左对齐，1为右对齐。

多组数据间使用竖线分隔符|。

参数 说明 示例
chxs 为第二个 x 轴设置字号、颜色、对齐方式。

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,12
两个 x 轴均设置字号、颜色、对齐方式。

chxt=x,x
chxl=1:||Feb|Mar||
     0:|1st|15th|1st|15th|1st
chxs=0,0000dd,10|1,0000dd,12,0

↑返回目录

样式

可用样式设置：

↑返回目录

折线样式

设定参数格式：

chls=
<数据线 1 粗细>,<数据线 1 线段长度>,<数据线 1
线段间隔长度>|
...
<数据线 n 粗细>,<数据线 n
线段长度>,<数据线 n 线段间隔长度>

参数为浮点数，使用竖线|作为数据组分隔符。

参数 说明 示例
chls 图例中粗虚线设置为3,6,3，细实线设置为1,1,0。

chls=3,6,3|1,1,0

↑返回目录

网格线

为折线图设定网格线格式：

chg=
<x 轴步长>,
<y
轴步长>,
<线段长度>,
<线段间隔长度>,

参数为整数或一位小数数值，例如 10.0 或 10.5 。

参数 说明 示例
chg 仅设置步长20,50，Chart API 默认显示虚线。

chg=20,50
步长20,50、线段长度1、线段间隔均设置5。

chg=20,50,1,5
使用实线则设置线段间隔为零（0）。

chg=20,50,1,0

↑返回目录

形状标记和区间填充

折线图和散点图有效，使用chm参数：

↑返回目录

形状标记

为折线图和散点图设置形状标记：

chm=
<形状类型>,<颜色>,<数据组索引>,<数据点>,<尺寸>|
...
<形状类型>,<颜色>,<数据组索引>,<数据点>,<尺寸>

其中：

  • <形状类型>为以下字符：
    a代表箭头（Arrow）。
    c代表十字（Cross）。
    d代表菱形（Diamond）。
    o代表圆圈。
    s代表正方形（Square）。
    v代表
    x
    轴至该点的垂直线。
    V代表穿过该点的垂直线。
    h代表穿过该点的水平线。
    x代表十叉。
  • <颜色>为十六进制颜色值。
  • <数据组索引>指定形状所在数据组，0为第一组数据，1为第二组数据，以此类推。
  • <数据点>为浮点数，指定形状所在数据点，1为第一个数据，2为第二个数据，以此类推。小数代表数据点间位置。
  • <尺寸>设定形状像素大小。

多组数据使用竖线|作为分隔符。

参数 说明 示例
chm 示例中使用了全部形状标记。

最后一个参数h为穿过第七个数据点的水平线。

chm=
c,FF0000,0,1.0,20.0|
d,80C65A,0,2.0,20.0|
a,990066,0,3.0,9.0|
o,FF9900,0,4.0,20.0|
s,3399CC,0,5.0,10.0|
v,BBCCED,0,6.0,1.0|
V,3399CC,0,7.0,1.0|
x,FFCC33,0,8.0,20.0|
h,3399CC,0,7.0,1.0
散点图示例，使用正方形s。

数据点设置参看散点图。

chm=
s,FF0000,1,1.0,10.0
示例中为两组数据分别使用圆圈与菱形标记。

如果两组数据中指定了相同的数据点，则以第一组数据点形状为准。示例中圆圈覆盖菱形设置。

chm=
o,ff9900,0,1.0,10.0|
o,ff9900,0,2.0,10.0|
o,ff9900,0,3.0,10.0|
d,ff9900,1,1.0,10.0|
d,ff9900,1,2.0,10.0|
d,ff9900,1,3.0,10.0

↑返回目录

区间填充

折线图和散点图有效，使用chm参数：

chm=
<r 或
R>,<颜色>,<任意值>,<开始值>,<终止值>|
...
<r
或 R>,<颜色>,<任意值>,<开始值>,<终止值>

其中：

  • <r 或 R>中r代表水平填充，R代表垂直填充。
  • <颜色>为十六进制颜色值。
  • <任意值>未使用，请忽略该值。
  • <开始值>：
    • 水平填充中，垂直方向最低端为0.00，最顶端为1.00。
    • 垂直填充中，水平方向最左侧为0.00，最右侧为1.00。
  • <终止值>：
    • 水平填充中，垂直方向最低端为0.00，最顶端为1.00。
    • 垂直填充中，水平方向最左侧为0.00，最右侧为1.00。

多组数据使用竖线|作为分隔符。

参数 说明 示例
chm=r 区域填充可以为颜色带或模拟直线，示例中浅蓝色（E5ECF9）颜色带和黑色（000000）直线。

chm=
r,E5ECF9,0,0.75,0.25|
r,000000,0,0.1,0.11
chm 垂直示例，红色（FF0000）直线和蓝色（A0BAE9）颜色带。

chm=
R,FF0000,0,0.1,0.11|
R,A0BAE9,0,0.75,0.25
chm=
R...|r...		 可同时设置水平与垂直填充，后设置的填充将覆盖前边已设置的相同填充区域。示例中先设置的垂直填充，所以水平填充覆盖垂直填充。

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=
b,<颜色>,<开始折线索引值>,<终止折线索引值>,<任意值>|
...
b,<颜色>,<开始折线索引值>,<终止折线索引值>,<任意值>

其中：

  • <颜色>为十六进制颜色值。
  • <开始折线索引值>设定颜色填充起始折线。为chd参数中数据组索引值，0为第一组数据，1为第二组数据，以此类推。
  • <终止折线索引值>设置颜色填充终止折线。为chd参数中数据组索引值，0为第一组数据，1为第二组数据，以此类推。
  • <任意值>未使用，请忽略该值。

多组数据使用竖线|作为分隔符。

参数 说明 示例
chm=b 首先指定数据最大值。

填充图表顶部至第一组数据，需指定数据最大值（9、100.0等，根据所使用数据类型）。

填充最后一组数据至图表底部，需指定数据最小值（A、0、AA等，根据所使用数据类型）。

数据线颜色根据参数chco绘制，参考颜色。

chd=s:
99,
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,
AA

chm=
b,76A4FB,0,1,0|（浅蓝）
b,224499,1,2,0|（蓝）
b,FF0000,2,3,0|（红）
b,80C65A,3,4,0（绿）

chco=000000,000000,000000,
000000,000000
删除了上例中第一组和最后一组数据（99和AA）。

未设置chco参数，所以折线颜色根据数据线类型默认值绘制，数据线类型为cht=lc，所以绘制为黄色。

chd=s:
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,

chm=
b,224499,0,1,0|（蓝）
b,FF0000,1,2,0|（红）
b,80C65A,2,3,0（绿，不存在第四组数据，所以未绘制）
chm=B 仅有一组数据时，使用chm=B可填充数据线以下全部区域。

chm=B,76A4FB,0,0,0
chd=s:ATSTaVd21981uocA

↑返回目录

Google Chart API 参考 中文版的更多相关文章

  1. 使用google chart api生成报表图片

    使用google chart api生成报表图片 截图 折线图 饼图 柱状图   实现方法 原理是调用google的报表服务,动态拼接url字符串,得到一张图片,数据和说明文字都是从url中传进去的. ...

  2. Google地图接口API之Google地图 API 参考手册(七)

    Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层 构造函数/对象 描述 Marker 创建一个标 ...

  3. 使用Google Chart API绘制组合图

    Google Chart API 绘图 组合图作者:方倍工作室 地址: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN& ...

  4. 转载总结一些关于Google chart api的知识

    <script type="text/javascript">      google.setOnLoadCallback(drawChartLine);      f ...

  5. 利用 Google Chart API 生成二维码大小不一致

    大小不一致是由于 chl  参数内容不一样导致的,而 chs 参数只能指定生成图片的大小,不能指定生成具体二维码大小. 比如:https://chart.googleapis.com/chart?ch ...

  6. Google Map API 应用实例说明

    目录 Google Map API 1基础知识 1.1 Google 地图 API 概念 1.2 Google 地图的"Hello, World" 1.2.1 加载 Google ...

  7. chart API笔记

    1. 参数说明 http://chart.apis.google.com/chart? chs=250x100 &chd=t:60,40 &cht=p3 &chl=Hello| ...

  8. Google Map API V3开发（1）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  9. Google 地图 API V3 使用入门

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

随机推荐

  1. Linux中断（interrupt）子系统

    Linux中断(interrupt)子系统之一:中断系统基本原理 Linux中断(interrupt)子系统之二:arch相关的硬件封装层 Linux中断(interrupt)子系统之三:中断流控处理 ...

  2. Hibernate逍遥游记-第13章 映射实体关联关系-002用主键映射一对一(<one-to-one constrained="true">、<generator class="foreign">)

    1. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hi ...

  3. python url编码，解码

    >>> urllib.unquote('%E4%B8%BD%E6%B1%9F') >>> data '\xe4\xb8\xbd\xe6\xb1\x9f' >& ...

  4. python 类成员函数

    http://cowboy.1988.blog.163.com/blog/static/75105798201091141521583/ 这篇文章总结的非常好 主要注意的地方是 1,在类内调用成员函数 ...

  5. c 语言练习__去掉多余的空白字符_修正

    #include <stdio.h> #include <string.h> #include <errno.h> #define BUF_SIZE 128 /* ...

  6. Android之NDK编程（JNI）

    转自:http://www.cnblogs.com/xw022/archive/2011/08/18/2144621.html NDK编程入门--C回调JAVA方法   一.主要流程 1.  新建一个 ...

  7. 在Ubuntu上为Android系统编写Linux内核驱动程序（老罗学习笔记1）

    这里,我们不会为真实的硬件设备编写内核驱动程序.为了方便描述为Android系统编写内核驱动程序的过程,我们使用一个虚拟的硬件设备,这个设备只有一个4字节的寄存器,它可读可写.想起我们第一次学习程序语 ...

  8. [CF676C]Vasya and String（尺取法，原题）

    题目链接:http://codeforces.com/contest/676/problem/C 原题题解链接:http://www.cnblogs.com/vincentX/p/5405468.ht ...

  9. Linux Watchdog Test Program

    /*********************************************************************** * Linux Watchdog Test Progr ...

  10. POJ 1664 放苹果

    放苹果 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24985   Accepted: 15908 Description ...