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

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

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

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

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

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

http://chart.apis.google.com/chart?&&

注意：每个 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元素插入图表，如：

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

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

• 图表尺寸
• 图表数据
• 图表类型

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

↑返回目录

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

如您所知，使用程序来自动将数值转换为 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('');
}

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

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);

图表粒度指导

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

目前可用的图表类型：

• 折线图
• 谱线图
• 柱状图
• 饼图
• 维恩图
• 散点图
• 雷达图
• 地图
• 仪表图

折线图参数为

cht=<折线图类型>

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

• lc类型图表，多组数据将绘制为多条数据线。
• lxy类型图表每条数据线需要两组数据。
• 设置多组数据的方法请参看数据格式
• 更多可用参数请参看可选参数。

柱状图

柱状图参数为

cht=<柱状图类型>

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

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

饼图参数为

cht=<饼图类型>

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

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

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

维恩图

维恩图参数为cht=v

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

• 前三个数值表示 A、B、C 的相对大小关系。
• 第四个数值表示 A 和 B 重叠数值。
• 第五个数值表示 B 和 C 重叠数值。
• 第六个数值表示 A 和 C 重叠数值。
• 第七个数值表示 A、B、C 重叠数值。

散点图参数为cht=s

• 设置多组数据的方法请参看数据格式
• 更多可用参数请参看可选参数。

参数	说明	示例
cht=s	需要至少两组数据，第一组指定 x 轴坐标，第二组指定 y 轴坐标。 默认数据点形状为圆圈，设定其它形状请使用chm参数，详见形状标记。 默认数据点颜色为蓝色，设置颜色请参看颜色一节。 您可能注意到了，在演示图表中，数据点拥有不同大小。如需此特性，可设置第三组数据。chm参数中指定的形状尺寸将匹配第三组数据中最大值。例如chm中设置形状尺寸为 20 像素，第三组数据中最大值（如 9，26.0 等）将显示为 20 像素大小。	cht=s

仪表图类型参数

cht=gom

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

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

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

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

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

有效的颜色设定：

• 折线图、柱状图、维恩图和饼图数据颜色。
• 图表区域填充、背景颜色。

↑返回目录

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

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

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

设定背景填充：

chf=
<填充类型>

其中

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

↑返回目录

设定参数格式：

chf=
,s,<颜色>|
,s,<颜色>

其中

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

设定参数格式：

chf=,lg,,,,,

其中

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