URL格式
所有 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。
柱状图参数为
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
更多可用参数请参看可选参数。
| 参数 | 说明 | |
|---|---|---|
| cht=gom | 示例中使用仪表图默认颜色（从左至右依次为红、橙、黄、绿过渡），设置颜色请参看颜色一节。 设定标注，请参见饼图、仪表图标注一节。 |
颜色
使用 6 或 8 位的十六进制颜色参数，格式RRGGBB，示例：
- FF0000= 红色
- 00FF00= 绿色
- 0000FF= 蓝色
- 000000= 黑色
- FFFFFF= 白色
您可以附加两位来设定透明度，代码00与FF之间，00表示完全透明，FF表示完全不透明。
- 0000FFFF= 不透明蓝色
- 0000FF00= 透明蓝色
有效的颜色设定：
数据颜色设定折线图、柱状图、维恩图和饼图数据颜色。
chco=
<颜色参数1>,
...
<颜色参数n>
其中<颜色参数1>及后续延续参数均使用十六进制参数。
| 参数 | 说明 | |
|---|---|---|
| chco | 示例中有三组指定颜色的数据。 | |
| 同样有三组数据，但只设定了两组颜色，所以最后一组数据使用最后一个颜色设定（红色FF0000）。 | ||
| 在柱状图中，如果数据组数比颜色组数多，则数据颜色交替使用颜色设定。示例中，第三组数据使用第一个数据颜色，如果只设定了一种颜色，则所有数据都为该颜色。 | ||
| 同一组数据，设定了三组颜色。 | ||
| 在饼图中，如果数据组数比颜色组数多，则数据颜色使用颜色间内插值计算补足。 | ||
| 在维恩图中，如果数据组数比颜色组数多，多余数据组使用最后一个颜色。 |
区域填充、背景颜色
设定背景填充：
chf=
其中
实心填充设定参数格式：
chf=
其中
中bg表示背景，c表示图表区域。 - s代表实心填充。
- <颜色>为十六进制颜色RRGGBB参数。
- 竖线|为填充数据组分隔符，最后一组数据后无需分隔符。
| 参数 | 说明 | |
|---|---|---|
| chf | 示例中使用灰色（EFEFEF）填充背景。 | |
| 示例中使用灰色（EFEFEF）填充背景，黑色（000000）填充图表区域。您可以为折线图和散点图同时设置背景和图表区域填充。 | ||
| 饼图、维恩图、柱状图只能设置背景颜色。 |
设定参数格式：
chf=
其中
中bg表示背景，c表示图表区域。 - lg代表线性渐变。
设定填充旋转角度，值在0垂直与90水平之间。 - <颜色>为十六进制颜色RRGGBB参数。
表示偏移量，必须在0和1之间，0表示最靠左端，1表示最靠右端。
| 参数 | 说明 | |
|---|---|---|
| chf | 图表区域填充水平线性渐变（左至右），0度旋转。 蓝色（76A4FB）为第一个颜色参数，设置在最右侧。 白色（FFFFFF）为第二个颜色参数，设置在最左侧。 图表背景设置为灰色（EFEFEF）。 |
|
| 图表区域填充倾斜线性渐变（左下至右上），45度旋转。 白色（FFFFFF）为第一个颜色参数，设置在左下。 蓝色（76A4FB）为第二个颜色参数，设置在右上。 图表背景设置为灰色（EFEFEF）。 |
||
| 图表区域填充垂直线性渐变（上至下），90度旋转。 蓝色（76A4FB）为第一个颜色参数，设置在最上侧。 白色（FFFFFF）为第二个颜色参数，设置在最下侧。 图表背景设置为灰色（EFEFEF）。 |