登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学无止境

一点积累,与大家分享

 
 
 

日志

 
 

Google Chart API 参考 中文版  

2010-04-22 15:28:24|  分类: js技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://code.google.com/intl/zh-CN/apis/chart/docs/making_charts.html
zh:http://labs.cloudream.name/google/chart/api.html
http://code.google.com/intl/zh-CN/apis/charttools/docs/choosing.html

文档信息

翻译: Cloudream

英文版版权归 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 参考及参数说明。

↑返回目录

使用方针

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

↑返回目录

简介

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

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

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

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

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

↑返回目录

URL格式

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

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

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

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

演示示例

de>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+Kbde>

参数解释:

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

你可以在网页中使用de>imgde>元素插入图表,如:

de><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" />de>

注意:在HTMLde>imgde>元素中,URL 属性中de>&de>字符应书写为转义字符de>&amp;de>。

↑返回目录

必须、可选参数

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

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

参数 柱状图 折线图
谱线图
雷达图 散点图 维恩图 饼图 仪表图 地图
数据颜色
区域、背景填充 仅背景仅背景
数值缩放  
线性过渡填充 仅背景  
线性条纹填充 仅背景  
图表标题   
图表图例    
多轴标注     
网格线     
形状标记     
水平区间填充     
垂直区间填充     
折线样式      
数据区块填充      
柱形、间隔宽度        
柱状图基准线        
饼图、仪表图标注       

↑返回目录

图表尺寸

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

例如:de>chs=300x200de>,表示一个 300 像素宽、200 像素高的图表。

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

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

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

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

↑返回目录

图表数据

图表数据有三种格式:

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

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

↑返回目录

文本编码

文本编码格式为

de>chd=t:<数值字符串>de>

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

含义如下

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

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

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

↑返回目录

数值缩放文本编码

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

de>chd=t:<数值字符串>de>

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

其中

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

注意

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

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

↑返回目录

简单编码

简单编码格式为

de>chd=s:<数值字符串>de>

其中de><数值字符串>de>可包含de>a-zde>、de>A-Zde>、de>0-9de>、de>_de>和de>,de>。

含义如下

  • 大写字母de>Ade>= 0、de>Bde>= 1,以此类推,de>Zde>= 25。
  • 小写字母de>ade>= 26、de>bde>= 27,以此类推,de>zde>= 51。
  • 数字de>0de>= 52,以此类推,de>9de>= 61.
  • 下划线de>_de>表示空值。
  • 逗号de>,de>为数据分组符号。

↑返回目录

扩展编码

文本编码格式为

de>chd=e:<数值字符串>de>

其中de><数值字符串>de>为成对出现的de>A-Zde>、de>a-zde>、de>0-9de>、连字符de>-de>、小数点de>.de>、下划线de>_de>或逗号de>,de>。

含义如下

  • de>AAde>= 0、de>AZde>= 25、de>Aade>= 26、de>Azde>= 51、de>A0de>= 52、de>A9de>= 61、de>A-de>= 62、de>A.de>= 63、de>BAde>= 64、de>BZde>= 89、de>.Ade>= 4032、de>.Zde>= 4057、de>.ade>= 4058、de>.zde>= 4083、de>.0de>= 4084、de>.9de>= 4093、de>.-de>= 4094、de>..de>= 4095。
  • 两个下划线de>__de>表示空值。
  • 逗号de>,de>为数据分组符号。

↑返回目录

JavaScript 数值转换代码

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

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

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

de>
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('');
}
de>

de>simpleEncodede>函数传递一个数值数组(de>valuesde>)和最大值(de>maxValuede>),示例中最大值参数大于数组值最大值,可使图表顶端与最大值间有一定空间。

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

↑返回目录

图表粒度指导

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

200x100 像素图,20 个数据点(每个数据点占 10 个像素)

示例图表

40 个数据点(每个数据点占 5 个像素)

示例图表

80 个数据点(每个数据点仅占 2.5 个像素)

示例图表

↑返回目录

图表类型

目前可用的图表类型:

↑返回目录

折线图

折线图参数为

de>cht=<折线图类型>de>

de><折线图类型>de>可选择de>lcde>或de>lxyde>。

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

de>cht=lcde>
de>cht=lxyde> 每条数据线使用两组数据,第一组指定 x 轴坐标,第二组指定 y 轴坐标。

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

数据点形状使用参数de>chmde>,请参考形状标记一节。

数据线颜色参考颜色一节。
示例图表

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

↑返回目录

谱线图

谱线图图表类型参数为

de>cht=lsde>

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

示例图表

↑返回目录

柱状图

柱状图参数为

de>cht=<柱状图类型>de>

de><柱状图类型>de>可选择de>bhsde>、de>bhgde>、de>bvsde>和de>bvgde>。

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

de>cht=bvsde>
水平(Horizontal)或垂直(Vertical)柱状图。

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

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

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

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

第三个示例使用了数值缩放,图表显示正确。
示例图表
de>cht=bhsde>
de>chco=4d89f9de>

示例图表
de>cht=bvsde>
de>chco=4d89f9,c6d9fdde>
de>chd=t:10,50,60,80,40|de>
de>50,60,100,40,20de>

示例图表
de>cht=bvsde>
de>chco=4d89f9,c6d9fdde>
de>chd=t:10,50,60,80,40|de>
de>50,60,100,40,20de>
de>chds=0,1600de>
de>cht=bhgde>

de>cht=bvgde>
水平(Horizontal)或垂直(Vertical)独立柱状图,可设定颜色,多组数据将分别绘制。 示例图表
de>cht=bhgde>
de>chco=4d89f9,c6d9fdde>
示例图表
de>cht=bvgde>
de>chco=4d89f9,c6d9fdde>
de>chbhde> 柱状图尺寸处理方法与其它类型图表不同。

对于垂直柱状图de>cht=bvsde>和de>cht=bvgde>、水平柱状图de>cht=bhsde>和de>cht=bhgde>,图表尺寸由de>chsde>参数决定,当该参数过小时,柱状图显示将不完整。

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

注意:若第三个参数(组间间隔)未设置,则默认为第二个参数(组内间隔)一半。

示例图表
de>chbhde>未设置
de>cht=bhsde>
示例图表
de>chbh=10de>
de>cht=bhsde>

↑返回目录

饼图

饼图参数为

de>cht=<饼图类型>de>

de><饼图类型>de>可选择de>pde>或de>p3de>。

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

注意:Google Chart API 根据图表尺寸参数de>chsde>中宽度或高度的最小值决定饼图半径。当设置尺寸偏小时,图表将不能完整显示。如果使用标注,请将宽度设置为高度的两倍以上。

参数 说明 示例
de>cht=pde> 平面饼图。

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

使用de>chlde>参数设定标注,请参见饼图、仪表图标注一节。
示例图表

de>cht=pde>
de>chs=200x100de>
de>cht=p3de> 三维饼图。

使用de>chlde>参数设定标注,请参见饼图标注一节。
示例图表

de>cht=p3de>
de>chs=250x100de>

↑返回目录

维恩图

维恩图参数为de>cht=vde>

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

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

更多可用参数请参看可选参数
示例图表

de>cht=vde>
de>chd=t:100,80,60,30,30,30,10de>

↑返回目录

散点图

散点图参数为de>cht=sde>

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

默认数据点形状为圆圈,设定其它形状请使用de>chmde>参数,详见形状标记

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

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

de>cht=sde>

↑返回目录

仪表图

仪表图类型参数

de>cht=gomde>

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

参数 说明 示例
de>cht=gomde> 示例中使用仪表图默认颜色(从左至右依次为红、橙、黄、绿过渡),设置颜色请参看颜色一节。

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

de>cht=gomde>
de>chd=t:70de>

↑返回目录

颜色

使用 6 或 8 位的十六进制颜色参数,格式de>RRGGBBde>,示例:

  • de>FF0000de>= 红色
  • de>00FF00de>= 绿色
  • de>0000FFde>= 蓝色
  • de>000000de>= 黑色
  • de>FFFFFFde>= 白色

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

  • de>0000FFFFde>= 不透明蓝色
  • de>0000FF00de>= 透明蓝色

有效的颜色设定:

↑返回目录

数据颜色

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

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

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

参数 说明 示例
de>chcode> 示例中有三组指定颜色的数据。 示例图表

de>chco=ff0000,00ff00,0000ffde>
同样有三组数据,但只设定了两组颜色,所以最后一组数据使用最后一个颜色设定(红色de>FF0000de>)。 示例图表

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

de>chco=ff0000,00ff00de>
de>chd=s:FOE,THE,Barde>
同一组数据,设定了三组颜色。 示例图表

de>chco=ff0000,00ff00,0000ffde>
de>chd=s:FOE,THE,Barde>
在饼图中,如果数据组数比颜色组数多,则数据颜色使用颜色间内插值计算补足。 示例图表

de>chco=0000ffde>
在维恩图中,如果数据组数比颜色组数多,多余数据组使用最后一个颜色。 示例图表

de>chco=00ff00,0000ffde>

↑返回目录

区域填充、背景颜色

设定背景填充:

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

其中

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

↑返回目录

实心填充

设定参数格式:

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

其中

  • de><bg 或 c>de>中de>bgde>表示背景,de>cde>表示图表区域。
  • de>sde>代表实心填充。
  • de><颜色>de>为十六进制颜色de>RRGGBBde>参数。
  • 竖线de>|de>为填充数据组分隔符,最后一组数据后无需分隔符。
参数 说明 示例
de>chfde> 示例中使用灰色(de>EFEFEFde>)填充背景。 示例图表

de>chf=bg,s,efefefde>
示例中使用灰色(de>EFEFEFde>)填充背景,黑色(de>000000de>)填充图表区域。您可以为折线图和散点图同时设置背景和图表区域填充。 示例图表

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

de>chf=bg,s,FFF2CCde>

↑返回目录

线性渐变

设定参数格式:

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

其中

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

蓝色(de>76A4FBde>)为第一个颜色参数,设置在最右侧。

白色(de>FFFFFFde>)为第二个颜色参数,设置在最左侧。

图表背景设置为灰色(de>EFEFEFde>)。
示例图表

de>chf=de>
de>c,lg,0,76A4FB,1,ffffff,0|de>
de>bg,s,EFEFEFde>
图表区域填充倾斜线性渐变(左下至右上),de>45de>度旋转。

白色(de>FFFFFFde>)为第一个颜色参数,设置在左下。

蓝色(de>76A4FBde>)为第二个颜色参数,设置在右上。

图表背景设置为灰色(de>EFEFEFde>)。
示例图表

de>chf=de>
de>c,lg,45,ffffff,0,76A4FB,0.75|de>
de>bg,s,EFEFEFde>
图表区域填充垂直线性渐变(上至下),de>90de>度旋转。

蓝色(de>76A4FBde>)为第一个颜色参数,设置在最上侧。

白色(de>FFFFFFde>)为第二个颜色参数,设置在最下侧。

图表背景设置为灰色(de>EFEFEFde>)。
示例图表

de>chf=de>
de>c,lg,90,76A4FB,0.5,ffffff,0|de>
de>bg,s,EFEFEFde>

↑返回目录

线性条纹

设定参数格式:

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

其中

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

灰色(de>CCCCCCde>)为第一个颜色参数,占 20% 宽度。

白色(de>FFFFFFde>)为第二个颜色参数,占 20% 宽度。

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

图表背景未设置。
示例图表

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

深灰色(de>999999de>)为第一个颜色参数,占 25% 高度。

浅灰色(de>CCCCCCde>)、白色(de>FFFFFFde>)为第二个、第三个颜色参数,占 25% 高度。

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

图表背景未设置。
示例图表

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

↑返回目录

标注

可用标注类型:

↑返回目录

图表标题

标题参数:

de>chtt=<图表标题>de>

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

竖线de>|de>表示换行。
示例图表

de>chtt=Site+visitors+by+month|de>
de>January+to+Julyde>
设定标题字号和颜色(可选)。

de>chts=<颜色>,<字号>de>

如果图表尺寸de>chsde>设定过小,图表将只显示一部分。
示例图表

de>chtt=Site+visitorsde>
de>chts=0000FF,20de>

↑返回目录

图表图例

图例参数:

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

参数 说明 示例
de>chdlde> 图例de>chdlde>与颜色属性de>chcode>联合使用。

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

de>chdl=First|Second|Thirdde>
de>chco=FF0000,00FF00,0000FFde>
示例图表

de>chdl=First|Second|Thirdde>
de>chco=FF0000,00FF00,0000FFde>

↑返回目录

饼图标注

饼图标注参数:

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

双竖线de>||de>表示空值。

参数 说明 示例
de>chlde> 三维饼图示例。 示例图表

de>chl=May|Jun|Jul|Aug|Sep|Octde>

↑返回目录

多轴标注

多轴标注可用于折线图、柱状图和散点图:

↑返回目录

坐标轴类型

可设置多个坐标轴:

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

可用坐标轴类型:

  • de>xde>= 底部 x 坐标轴
  • de>tde>= 顶部 x 坐标轴
  • de>yde>= 左侧 y 坐标轴
  • de>rde>= 右侧 y 坐标轴

de>chxtde>参数中的坐标轴将拥有一个索引值,第一个坐标轴索引值为 0,第二个为 1,以此类推。所以您可以多次使用de>xde>、de>tde>、de>yde>和de>rde>。

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

参数 说明 示例
de>chxtde> 图例中使用了两个底部 x 轴(两个de>xde>)一个左侧 y 轴de>yde>、一个右侧 y 轴de>rde>和一个顶部 x 轴de>tde>。

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

示例图表

de>chxt=x,y,r,x,tde>

↑返回目录

坐标值

设置坐标值:

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

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

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

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

参数 说明 示例
de>chxtde>和de>chxlde> 图例中使用了左右 y 轴(de>yde>和de>rde>)和两个底部 x 轴(de>xde>)。

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

示例图表

de>chxt=x,y,r,xde>
de>chxl=de>
de>0:|Jan|July|Jan|July|Jan|de>
de>1:|0|100|de>
de>2:|A|B|C|de>
de>3:|2005|2006|2007de>
与上例类似,但未设置 y 轴(de>yde>)。(未设置de>1:de>值)。

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

示例图表

de>chxt=x,y,r,xde>
de>chxl=de>
de>0:|Jan|July|Jan|July|Jan|de>
(y 轴未设置)
de>2:|A|B|C|de>
de>3:|2005|2006|2007de>

↑返回目录

坐标值位置

可设置多个坐标轴:

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

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

参数 说明 示例
de>chxpde> 图例中使用了底部 x 轴,一个左侧 y 轴de>yde>和一个右侧 y 轴de>rde>。

x 轴(索引de>0de>)未设置坐标值与坐标值位置,所以 API 默认平均分布 0 到 100。

y 轴(de>yde>)设置坐标值(min,average 和 max)与坐标值位置(de>10,35,75de>)。

右侧 y 轴(de>rde>)仅设置坐标值位置(de>0,1,2,4de>),所以 API 将其同时用于坐标值。
示例图表

de>chxt=x,y,rde>
de>chxl=1:|min|average|maxde>
de>chxp=1,10,35,75|2,0,1,2,4de>

↑返回目录

坐标值范围

设置坐标值范围:

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

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

参数 说明 示例
de>chxrde> 图例中使用了左右 y 轴(de>yde>和de>rde>)和底部 x 轴(de>xde>)。

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

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

示例图表

de>chxt=x,y,rde>
de>chxr=0,100,500|1,0,200|2,1000,0de>
只使用了 x 轴(de>xde>),坐标值、坐标值位置和坐标值范围均设置。 示例图表

de>chxt=xde>
de>chxr=0,100,500de>
de>chxl=0:|200|300|400de>
de>chxp=0,200,300,400de>

↑返回目录

标注样式

设置坐标值标注样式:

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

其中:

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

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

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

de>chxt=x,y,r,xde>
de>chxr=2,0,4de>
de>chxl=3:|Jan|Feb|Mar|1:|min|average|maxde>
de>chxp=1,10,35,75de>
de>chxs=3,0000dd,12de>
两个 x 轴均设置字号、颜色、对齐方式。 示例图表

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

↑返回目录

样式

可用样式设置:

↑返回目录

柱形、空格宽度

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

de>chbh=de>
de><柱形宽度>,de>
de><(可选)组内柱形间隔宽度>,de>
de><(可选)组间间隔宽度>de>

参数 说明 示例
de>chbhde>

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

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

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

示例图表

de>cht=bhgde>
de>chbh=10de>

示例图表

de>cht=bvgde>
de>chbh=10,5,15de>

示例图表

de>cht=bhgde>
de>chbh=10,8de>

示例图表

de>cht=bhgde>
de>chbh=10,15de>

↑返回目录

折线样式

设定参数格式:

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

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

参数 说明 示例
de>chlsde> 图例中粗虚线设置为de>3,6,3de>,细实线设置为de>1,1,0de>。 示例图表

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

↑返回目录

网格线

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

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

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

参数 说明 示例
de>chgde> 仅设置步长de>20,50de>,Chart API 默认显示虚线。 示例图表

de>chg=20,50de>
步长de>20,50de>、线段长度de>1de>、线段间隔均设置de>5de>。 示例图表

de>chg=20,50,1,5de>
使用实线则设置线段间隔为零(de>0de>)。 示例图表

de>chg=20,50,1,0de>

↑返回目录

形状标记和区间填充

折线图和散点图有效,使用de>chmde>参数:

↑返回目录

形状标记

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

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

其中:

  • de><形状类型>de>为以下字符:
    de>ade>代表箭头(Arrow)。
    de>cde>代表十字(Cross)。
    de>dde>代表菱形(Diamond)。
    de>ode>代表圆圈。
    de>sde>代表正方形(Square)。
    de>vde>代表 x 轴至该点的垂直线。
    de>Vde>代表穿过该点的垂直线。
    de>hde>代表穿过该点的水平线。
    de>xde>代表十叉。
  • de><颜色>de>为十六进制颜色值
  • de><数据组索引>de>指定形状所在数据组,de>0de>为第一组数据,de>1de>为第二组数据,以此类推。
  • de><数据点>de>为浮点数,指定形状所在数据点,de>1de>为第一个数据,de>2de>为第二个数据,以此类推。小数代表数据点间位置。
  • de><尺寸>de>设定形状像素大小。

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

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

最后一个参数de>hde>为穿过第七个数据点的水平线。
示例图表

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

数据点设置参看散点图
示例图表

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

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

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

↑返回目录

区间填充

折线图和散点图有效,使用de>chmde>参数:

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

其中:

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

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

参数 说明 示例
de>chm=rde> 区域填充可以为颜色带或模拟直线,示例中浅蓝色(de>E5ECF9de>)颜色带和黑色(de>000000de>)直线。 示例图表

de>chm=de>
de>r,E5ECF9,0,0.75,0.25|de>
de>r,000000,0,0.1,0.11de>
de>chmde> 垂直示例,红色(de>FF0000de>)直线和蓝色(de>A0BAE9de>)颜色带。 示例图表

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

de>chm=de>
de>R,ff0000,0,0.1,0.11|de>
de>R,A0BAE9,0,0.75,0.25|de>
de>r,E5ECF9,0,0.75,0.25|de>
de>r,000000,0,0.1,0.11de>

↑返回目录

数据区块填充

设定数据区块填充:

de>chm=de>
de>b,<颜色>,<开始折线索引值>,<终止折线索引值>,<任意值>|de>
de>...de>
de>b,<颜色>,<开始折线索引值>,<终止折线索引值>,<任意值>de>

其中:

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

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

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

填充图表顶部至第一组数据,需指定数据最大值(de>9de>、de>100.0de>等,根据所使用数据类型)。

填充最后一组数据至图表底部,需指定数据最小值(de>Ade>、de>0de>、de>AAde>等,根据所使用数据类型)。

数据线颜色根据参数de>chcode>绘制,参考颜色
示例图表

de>chd=s:de>
de>99,de>
de>cefhjkqwrlgYcfgc,de>
de>QSSVXXdkfZUMRTUQ,de>
de>HJJMOOUbVPKDHKLH,de>
de>AAde>

de>chm=de>
de>b,76A4FB,0,1,0|de>(浅蓝)
de>b,224499,1,2,0|de>(蓝)
de>b,FF0000,2,3,0|de>(红)
de>b,80C65A,3,4,0de>(绿)

de>chco=000000,000000,000000,de>
de>000000,000000de>
删除了上例中第一组和最后一组数据(de>99de>和de>AAde>)。

未设置de>chcode>参数,所以折线颜色根据数据线类型默认值绘制,数据线类型为de>cht=lcde>,所以绘制为黄色。
示例图表

de>chd=s:de>
de>cefhjkqwrlgYcfgc,de>
de>QSSVXXdkfZUMRTUQ,de>
de>HJJMOOUbVPKDHKLH,de>

de>chm=de>
de>b,224499,0,1,0|de>(蓝)
de>b,FF0000,1,2,0|de>(红)
de>b,80C65A,2,3,0de>(绿,不存在第四组数据,所以未绘制)
de>chm=Bde> 仅有一组数据时,使用de>chm=Bde>可填充数据线以下全部区域。 示例图表

de>chm=B,76A4FB,0,0,0de>
de>chd=s:ATSTaVd21981uocAde>

  评论这张
 
阅读(1642)| 评论(2)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018