当前位置： > 网页制作 > 心得技巧 > 文章内容

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

http://www.itjxue.com 2015-08-07 21:43 来源:未知 点击次数:

使用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 <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a> 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、入门

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：交互设计:探讨内容和容器的关系

下一篇：网站不是炫技场，设计要为内容服务

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

(责任编辑：IT教学网)

相关心得技巧文章

阅读排行

专题教程

推荐心得技巧文章

最新更新心得技巧