基于google图表API的jquery组件 I - 网页制作

　基于google图表API的jquery组件 I

作者：阿一　时间： 2010-02-26　文档类型：合作网站提供　来自：JustinYoung's Blog

第 1 页基于google图表API的jquery组件 [1]
第 2 页基于google图表API的jquery组件 [2]
第 3 页基于google图表API的jquery组件 [3]

使用gchart的前期准备：

通过这拗口的标题，我们就能大致的了解使用gchart需要的东西。

google图表API。这个完全不用担心。这个已经被gchart搞定了。它会自动链接google的图表api服务器调用。所以，我们不用做任何事情。当然，要保证你使用gchart的电脑能上网才行。
jquery.js。这个不用说了吧。满大街都是，随便找个过来就可以了。1.2.3版本以上即可。
gchart脚本库。不用担心，我这就提供下载：jquery.gchart.js(51k,这个是没有经过压缩和加密的)，jquery.gchart.pack.js(14k,这个是经过压缩打包的)。

好，让我们做一个小例子吧

正如你看到的，gchart看上去是个庞大的东西，这也是为什么，我写的是个系列文章，而不是一篇文章的原因。当文章过长的时候，大家会很不喜欢阅读，所以，本篇，只列一个小的例子，也不会做过多的解释，更详细的解释，会放在下一篇文章中进行。

运行代码框
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" /> <meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" /> <title>YES!B/S!文章示例页面</title> <title>gchart简单示例</title> <style type="text/css"> #basicGChart { width: 450px; height: 300px } </style> <script type="text/javascript" src="http://downloads.cnblogs.com/justinyoung/gchart/jquery.js"></script> <script type="text/javascript" src="http://downloads.cnblogs.com/justinyoung/gchart/jquery.gchart.js"></script> <script type="text/javascript"> $(function () { //下载量 var array1=[15, 13, 12, 33,28, 21, 30, 31, 33, 25, 22, 18]; //日期数组 var array2=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']; $('#basicGChart').gchart({ type: 'line',//图表类型 title: '2009年阿一电影下载量折线图', //图表标题 series: [ $.gchart.series(array1,'red')//图表数据 ], axes: [//图表坐标轴 $.gchart.axis('left', 0, 100,'blue'), $.gchart.axis('bottom',array2,'008000') ], legend: 'top'}); }); </script> </head> <body> <h2>一个简单的gchart示例</h2> <div id="basicGChart"> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

本示例网址：
http://downloads.cnblogs.com/justinyoung/gchart/articleExample001.html
打包下载地址如下：gchart示例001

生成的图表见下图：

一个简单的gchart示例

本篇仅仅是个引子，详细的解释和说明，将在下篇文章中继续，敬请期待哦。

原文：gchart：基于google图表API的jquery组件全攻略：1、入门

本文链接：http://www.blueidea.com/tech/web/2010/7398.asp　

出处：JustinYoung's Blog
责任编辑：moby

上一页基于google图表API的jquery组件 [2] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

作者文章

微软Expression Web3试用报告

IE7的web标准之道 Ⅲ

IE7的web标准之道 Ⅱ

IE7的web标准之道 Ⅰ


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule