jquery图表脚本插件

来源网站: http://www.biuuu.com/?p=968

 

2009年05月08日

jQuery插件jgcharts实现Javascript制作Google Charts图表功能

 

jgcharts是一个基于jQuery的非常经典的Google Charts图表制作插件，可以制作出各种各样的图表，如柱形图，条形图，折线图，饼图，面积图等，使用简单，只需要指定图表数据，图表类型，图表大小。Google Charts的默认图表为垂直柱形图，简单的垂直柱形图效果如下：

 

jgcharts在线演示（柱形图和条形图）http://www.biuuu.com/demo/jgcharts/index.html

 

使用说明

需要使用jQuery库文件1.3+和jgcharts库文件

使用实例（柱形图）

一，包含文件部分

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

 

<script src="/admin/blogs/jquery-1.3.2.min.js" type="text/javascript"></script><script src="/admin/blogs/jgcharts.js" type="text/javascript"></script> 二，HTML部分

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

  

三，Javascript部分

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

 

<script type="text/javascript"><!-- jQuery(document).ready(function(){ var api = new jGCharts.Api();jQuery('<img>') .attr('src', api.make({data : [[153, 60, 52], [113, 70, 60], [120, 80, 40]]})).appendTo("#bar1");}); // --></script> 简单几行代码就实现了一个柱形图表，使用说明：

1，初始化一个Google Charts图表对象，

var api = new jGCharts.Api(); 

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

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

 

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

{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图表类型即可。

 

另一个简单的条形图实例

1，声明一个Google Charts图表对象

var api = new jGCharts.Api();

 

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

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

 

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

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

 

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

 

jgcharts在线演示

http://www.biuuu.com/demo/jgcharts/index.html

 

jgcharts演示源码下载（包括柱形图，条形图，折线图，饼图，面积图

http://jquerycodes.googlecode.com/files/jgcharts.zip