位置：首页>> 网络编程>> JavaScript>> gchart：基于google图表API的jquery组件全攻略：1、入门（2）

gchart：基于google图表API的jquery组件全攻略：1、入门（2）

作者：JustinYoung　来源：JustinYoung's Blog　发布时间：2010-01-25 12:18:00　

标签：gchart,jquery,图表api,google,组件

使用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>

源代码下载：

远程下载（28.05 KB）

本地下载：gchartExample001.rar （28.05 KB）

生成的图表见下图：

一个简单的gchart示例

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

第一页上一页 1

投稿

gchart：基于google图表API的jquery组件全攻略：1、入门（2）

使用gchart的前期准备

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

猜你喜欢