私人资料库
本博客大部分技术文章，均从网络搜索得来，旨在收集整理技术资料，文章版权归属原作者，由此引起的任何版权问题，与本人无关。
【转】Google Chart API 参考 中文版

【原文地址】http://labs.cloudream.name/google/chart/api.html

 

Google Chart API 参考 中文版

文档信息

翻译: Cloudream

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 参考及参数说明。

↑返回目录

使用方针

每天请求图片的次数没有限制，但 Google 保留拒绝滥用请求的权利。如果您每天的请求次数大于 250,000 次，请将预计请求次数告知我们：chart-api-notifications@google.com。

↑返回目录

简介

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 等。

地图最大尺寸 440 像素宽和 220 像素高。

尺寸过小时，饼图将仅显示部分图表。饼图建议尺寸：

  • 二维饼图：宽度约为高度两倍。
  • 三维饼图：宽度约为高度两倍半。

↑返回目录

图表数据

图表数据有三种格式：

  • 文本编码 使用正数 0 至 100 之间的浮点数。
    配合数值缩放参数使用时，也可以使用负数。注意负数对地图图表无效。
    每十个数值占据 5 个像素，在仅使用整数的情况下，适用于 500 像素以内的图表。如需要更高精度，可使用一位小数数字（如 92.6）。文本编码可用于所有类型的图表，但同时也是 URL 地址最长的数据编码形式。
  • 简单编码 使用大小写字母与数字，A代表0，B代表1，直至9代表61，共包含 62 个数值。
    每个数值占据 5 个像素，适用于 300 像素大小的折线图和柱状图，所有图表类型都可以使用简单编码数据。该编码类型数据的图表 URL 地址长度最短。
  • 扩展编码 使用一对字母数字表示一个数据（还有其它字符，下文详解），AA代表0，AB代表1，直至..代表4095。
    包含 4096 个数值，适用于高精度或大型图表。该编码类型数据的图表 URL 地址长度是简单编码的两倍。

注意：配合数据转换程序可更加轻松的使用文本编码和扩展编码，参考 JavaScript 编码示例。其它开发人员贡献的代码可在讨论组和链接汇总中找到。

↑返回目录

文本编码

文本编码格式为

chd=t:<数值字符串>

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

含义如下

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

示例：chd=t:10.0,58.0,95.0|30.0,8.0,63.0

注意：文本编码中，可将数值转换为最大值的百分比来提供数据。

↑返回目录

数值缩放文本编码

文本编码与数值缩放各一个参数：

chd=t:<数值字符串>

chds=<第1组数据最小值>,<第1组数据最大值>,<第n组数据最小值>,<第n组数据最大值>

其中

  • <数值字符串>内容为任意正负浮点数字。
  • <第1组数据最小值>内容为第1组数据转换后的最小值。
  • <第1组数据最大值>内容为第1组数据转换后的最大值，省略时默认为100。
  • <第n组数据最小值>内容为第n组数据转换后的最小值。
  • <第n组数据最大值>内容为第n组数据转换后的最大值，省略时默认为100。

注意

  • 对地图图表无效。
  • 超出范围的值将被忽略。
  • 如果要设置多组数据，请用竖线|分割。

示例：chd=t:30,-60,50,120,80&chds=-80,140

↑返回目录

简单编码

简单编码格式为

chd=s:<数值字符串>

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

含义如下

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

↑返回目录

扩展编码

文本编码格式为

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。
  • 两个下划线__表示空值。
  • 逗号,为数据分组符号。

↑返回目录

JavaScript 数值转换代码

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

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

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


 1var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 2
 3function simpleEncode(values,maxValue) {
 4
 5    var chartData = ['s:'];
 6    for (var i = 0; i < values.length; i++) {
 7        var currentValue = values[i];
 8        if (!isNaN(currentValue) && currentValue >= 0) {
 9            chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
10        } else {
11            chartData.push('_');
12        }
13    }
14    return chartData.join('');
15}

向simpleEncode函数传递一个数值数组(values)和最大值(maxValue)，示例中最大值参数大于数组值最大值，可使图表顶端与最大值间有一定空间。

 

1var valueArray = new Array(0,1,4,4,6,11,14,17,23,28,33,36,43,59,65);
2var maxValue = 70; 
3simpleEncode(valueArray,maxValue);

↑返回目录

图表粒度指导

不 要为图表设定过多数据点。例如，显示布兰妮·斯皮尔斯过去十年的流行程度，如果每天搜索量作为一个数据点的话，将有 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=ls

谱线图可用参数与折线图相同，唯一的区别是谱线图默认不显示轴线，可用折线图多轴标注参数显示轴线。

示例图表

↑返回目录

柱状图

柱状图参数为

cht=<柱状图类型>

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

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

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

第一个示例设置了一组数据。

第二个示例设置了两组数据。

多组数据将绘制为层叠柱状图，所以必须为每组数据设置颜色参数，甚至可以为每个数据值设置颜色，具体参看颜色一节。

第二个示例未使用数值缩放，所以大于 100 的部分超出范围没有显示。

第三个示例使用了数值缩放，图表显示正确。		 示例图表
cht=bhs
chco=4d89f9

示例图表
cht=bvs
chco=4d89f9,c6d9fd
chd=t:10,50,60,80,40|
50,60,100,40,20

示例图表
cht=bvs
chco=4d89f9,c6d9fd
chd=t:10,50,60,80,40|
50,60,100,40,20
chds=0,1600
cht=bhg

cht=bvg		 水平（Horizontal）或垂直（Vertical）独立柱状图，可设定颜色，多组数据将分别绘制。 示例图表
cht=bhg
chco=4d89f9,c6d9fd
示例图表
cht=bvg
chco=4d89f9,c6d9fd
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
chs=200x100
cht=p3 三维饼图。

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

cht=p3
chs=250x100

↑返回目录

维恩图

维恩图参数为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

↑返回目录

仪表图

仪表图类型参数

cht=gom

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

参数 说明 示例
cht=gom 示例中使用仪表图默认颜色（从左至右依次为红、橙、黄、绿过渡），设置颜色请参看颜色一节。

设定标注，请参见饼图、仪表图标注一节。		 示例图表

cht=gom
chd=t:70

↑返回目录

颜色

使用 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>

双竖线||表示空值。

参数 说明 示例
chl 三维饼图示例。 示例图表

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

↑返回目录

样式

可用样式设置：

↑返回目录

柱形、空格宽度

为柱状图设置柱形和间隔宽度：

chbh=
<柱形宽度>,
<（可选）组内柱形间隔宽度>,
<（可选）组间间隔宽度>

参数 说明 示例
chbh

第一个示例中，柱形宽度 10 像素，组内柱形间隔 4 像素，组间间隔 8 像素。

第二个示例中，柱形宽度 10 像素，组内柱形间隔 5 像素，组间间隔 15 像素。

仅提供2个参数时请特别小心，第三个示例中，组内柱形间隔设置为 8 像素，和组间间隔默认值相同，所以无法区分出分组情况。而当设置第二个参数设置大于 8 像素时，柱形分组将会错乱。

 示例图表

cht=bhg
chbh=10

示例图表

cht=bvg
chbh=10,5,15

示例图表

cht=bhg
chbh=10,8

示例图表

cht=bhg
chbh=10,15

↑返回目录

折线样式

设定参数格式：

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

↑返回目录


 

 

 

 

--------------------------------------------------------------------------------------------

 

 

参考资料：


1、开发人员指南：http://code.google.com/intl/zh-CN/apis/chart/

posted on 2008-08-22 15:53  该显示名称已被其他用户使用  阅读(873)  评论(0)  编辑  收藏  举报

Copyright © 2024 该显示名称已被其他用户使用
Powered by .NET 9.0 on Kubernetes Powered By博客园