Google Chart API

上周,Google公布了制图服务(Google Chart)的接口,可以用来为统计数据自动生成图片。

这项服务用起来相当简单,不用安装任何软件,只使用浏览器就可以。比如,在浏览器的地址栏中,键入如下的地址:

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

就可以看到下面的图片:


各个参数的含义:

  * cht(chart type):图表种类,cht=p3表示生成3D饼图。

  * chs(chart size):图表面积,chs=250x100表示宽200像素,高100像素。

  * chtt(chart title):图表标题,chtt=Hello+World表示标题是Hello World。

  * chd(chart data):图表数据,chd=s:hW表示数据是普通字符串(simple string)hW。目前,允许的编码选择有simple (s)、extended (e)和text (t)。

目前,Google Chart一共提供五种图,分别是折线图(line charts)、条状图(bar charts)、饼图(pie charts)、Venn图(venn diagrams)和散点图(scatter plots)。


下面,我根据说明文档,简单介绍一下,如何生成最常见的条状图和饼图。

条状图

下面这张表是各大洲最高峰一览表。

山峰 高度(单位:米)
珠穆朗玛峰(亚洲) 8848
乞力马扎罗山(非洲) 5895
厄尔布鲁士山(欧洲) 5642
麦金利山(北美) 6194
阿空加瓜山(南美) 6960
查亚山(大洋洲) 5029
文森山(南极洲) 5140

根据上表,可以生成下面的条状图:


使用的网址是:

http://chart.apis.google.com/chart?
chs=250x250&
chd=t:88.48,58.95,56.42,61.94,69.60,50.29,51.40&
cht=bvs&
chco=ff0000&
chf=c,s,76A4FB|bg,s,FFF2CC&
chxt=x,y&
chxl=0:|Asia|Afri|Euro|AmeN|AmeS|Ocea|Anta|1:|0|5km|10km

虽然这个网址看起来很复杂,但实际上很容易编写,请跟着我一项项分解:

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

这部分是google图表服务的网址,所有生成的图表都必须使用这个网址。

"?"后面跟的是参数,格式是"参数名=参数值"。不同的参数之间用"&"分割,次序无所谓。

2. chs=250x250

这一项表示图片的面积,宽x长,单位是像素。

面积最大不能超过30万像素,长和宽最大不超过1000像素。比如,如果上图放大一倍,可以使用chs=500x500

3. chd=t:88.48,58.95,56.42,61.94,69.60,50.29,51.40

这一项"chd=t:"表示图表所用的数据集,最小的值是0.0,最大的值是100.0。

因此,山峰的高度必须改写为88.48、58.95、56.42、61.94、69.60、50.29、51.40,数据与数据之间用逗号分割。

4. cht=bvs

这一项表示所使用的图表类型,bvs表示"竖直条形图",bhs表示"水平条形图",lc表示折线图。

5. chco=ff0000

这一项表示条块的颜色,ff0000表示红色。如果想生成蓝色条块,就使用0000ff

6. chf=c,s,76A4FB|bg,s,FFF2CC

这一项表示填充色,其中又分为两个部分。

"c,s,76A4FB"表示内容部分(c)用蓝色(76A4FB)填充,"bg,s,FFF2CC"表示背景色(bg)用淡黄色(FFF2CC)填充。它们之间用竖线"|"分割。

7. chxt=x,y

这一项表示坐标轴采用底部的x轴和左边的y轴。

8. chxl=0:|Asia|Afri|Euro|AmeN|AmeS|Ocea|Anta|1:|0|5km|10km

这一项表示坐标轴的刻度。

由于只能使用英语,所以x轴的刻度是各大洲的英语缩写,用"0:"开头,y轴的刻度是5千米和1万米,用"1:"开头,所有数据之间用竖线分割。

饼图

下面再举一个饼图的例子。

假定某商场上半年各月份的销售额占总销售额的比例,依次为19%、21%、14%、16%、15%和15%。那么画成饼图,就是下面的样子:


使用的网址是:

http://chart.apis.google.com/chart?
chs=250x100&
chd=t:19,21,14,16,15,15&
cht=p3&
chco=ff0000&
chl=Jan|Feb|Mar|Apr|May|June

与上面的条状图相比,只有两个地方需要说明。

1. cht=p3

这一项表示图片类型为三维饼图,如果使用二维饼图,这一项要改为"cht=p"。

2. chl=Jan|Feb|Mar|Apr|May|June

这一项表示为饼图中每一项数据加上图例。

更多的选项和如何使用多个数据集,请参考Google Chart的说明文档

(完)

时间: 2024-08-03 22:50:40

Google Chart API的相关文章

Google Chart API 参考 中文版

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 为您提供动

使用Google Chart API绘制组合图

  Google Chart API 绘图 组合图作者:方倍工作室 地址:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- <head>

基于google图表API的jquery组件全攻略:基础入门

gchart:基于google图表API的jquery组件全攻略--入门 gchart是基于google图表API的jquery组件.使用gchart可以方便地生成强大的各种图表和报表.基于google图表接口的gchart,有着简单.方便.强大.够用.好用的特点.<gchart:基于jquery的google图表接口组件全攻略>系列文章将带你走入gchart的报表世界. 先解释一下这个拗口的标题 google图表API: google图表API是google提供的一个可以生成各种图表的api

基于google map api开发web和google earth的KML地标插件

KML文件很好做,在你的google earth(以下简称GE)中选择你自己的或是别人的marker或layer,就可以保存成静态的地标或图层信息(kmz或kml格式),发送给你的朋友,用他的GE打开你的文件就可以看到你所标注的marker信息. 这些相关的文章让我迷失了好一段时间,不过,我想要的是动态的地标.类似于EEMAP那样的GE插件.下面我将讲述它的工作原理和制做方法. 先说几个概念,google map api是基于javascript+xml等技术实现的,另一款产品google ea

google+登录API使用javascript sdk快速入门图解教程

准备工作: 打开Google API 控制台 : https://code.google.com/apis/console 点击 My Project (我的项目) 按照图示流程,您将完成一个google+ 登录API.快来尝试一下吧. 参考API地址:https://developers.google.com/ 1. 2. 3. 4. 5. 6. 查看本栏目更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/

android map如何获得Google Map API key

首先要做的是获取一个MD5 key(当然,他是通过JDK的keytool工具(keytool.exe)实现的) 1.在这里,主要有两方面的工作 keytool.debug.keystore 2.首先,找到debug.keystore!(进入Eclipse开发环境,然后选择Window-->Preferences-->Android-->Build,这时候我们可以看到界面中的Default debug keystore,它后面方框中的内容就是debug.keystore的路径).在此,我们

PHP访问Google Search API的方法

 这篇文章主要介绍了PHP访问Google Search API的方法,实例分析了php针对谷歌API访问的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了PHP访问Google Search API的方法.分享给大家供大家参考.具体如下: 这段代码段演示了如何从php向AJAX搜索API发送请求.请注意,此示例假定使用 PHP 5.2.对于较早安装的 PHP,请参考对应的官方注释. 具体代码如下: 代码如下: $url = "http://ajax.googleapis

PHP访问Google Search API的方法_php技巧

本文实例讲述了PHP访问Google Search API的方法.分享给大家供大家参考.具体如下: 这段代码段演示了如何从php向AJAX搜索API发送请求.请注意,此示例假定使用 PHP 5.2.对于较早安装的 PHP,请参考对应的官方注释. 具体代码如下: 复制代码 代码如下: $url = "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Paris%20Hilton";   // sendReque

获取Google Maps API 指纹证书时获取的是SHA1型的,而认证时需要的是MD5的解决方法

  申请Google Maps API 时需要验证MD5指纹证书,但是通过keytool -list -keystore "C:\Documents and Settings\tony\.android\debug.keystore" 命令得到是是SHA1类型的,不能通过验证.解决办法就是: 进入cmd后定位到.android文件夹下(cd .android),然后 输入 keytool -list -v -keystore debug.keystore 这样就把三种指纹证书全部列出来