登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学无止境

一点积累,与大家分享

 
 
 

日志

 
 

jQuery插件—jgcharts实现Javascript制作Google Charts  

2010-04-22 10:30:31|  分类: js技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
from:http://www.zz68.net/program/Ajax/2010/0415/1992.html
gcharts是一个基于jQuery的非常经典的Google Charts图表制作插件,可以制作出各种各样的图表,如柱形图,条形图,折线图,饼图,面积图等,使用简单,只需要指定图表数据,图表类型,图表大小。 Google Charts的默认图表为垂直柱形图,简单的垂直柱形图效果如下:
jQuery插件—jgcharts实现Javascript制作Google Charts - 积累在于坚持 - 学无止境
使用说明
需要使用jQuery库文件1.3+和jgcharts库文件

使用实例(柱形图)
一,包含文件部分

  1. <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
  2. <script src="jgcharts.js" type="text/javascript"></script>

二,HTML部分

  1. <div id="bar1"></div>

三,Javascript部分

  1. <script type="text/javascript">
  2. jQuery(document).ready(function(){
  3. var api = new jGCharts.Api();
  4. jQuery('<img>')
  5. .attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]}))
  6. .appendTo("#bar1");
  7. });
  8. </script>

简单几行代码就实现了一个柱形图表,使用说明:
1,初始化一个Google Charts图表对象,

  1. var api = new jGCharts.Api();

2,生成一张图片<img>,图片属性src的调用了对象方法api.make()

  1. jQuery('<img>') .attr('src', api.make())

3,使用json数据类型做为图表数据,

  1. {data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]}

4,把生成的图片追加在页面HTML元素中(ID为bar1的DIV层中)

Google Charts图表的图表类型如下:
柱形图,水平:type : 'bhg',垂直:type : 'bvg'
条形图,水平:type : 'bhs',垂直:type : 'bvs'
折线图,type : lc
饼图,type : 'p3'
面积图,type : 'lc'
图形图,type : 'p'

其它各种图表类型的使用方法与柱形图使用方法一样,只需要指定相应的Google Charts图表类型即可。

另一个简单的条形图实例
jQuery插件—jgcharts实现Javascript制作Google Charts - 积累在于坚持 - 学无止境
1,声明一个Google Charts图表对象

  1. var api = new jGCharts.Api();

2,指定图表数据和图表类型

  1. var opt = {
  2. data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]],
  3. type : 'bhs'
  4. };

3,生成图表并追加在ID为chart_container的DIV层中

  1. jQuery('<img>')
  2. .attr('src', api.make(opt))
  3. .appendTo("#chart_container");

通过指定图表的数据和类型,一个条形图表就制作出来了,从以上实例可知使用jQuery插件jgcharts实现Javascript制作Google Charts图表功能非常简单,值得推荐。

jgcharts演示源码下载(包括柱形图,条形图,折线图,饼图,面积图)
http://jquerycodes.googlecode.com/files/jgcharts.zip


  评论这张
 
阅读(1475)| 评论(1)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018