来源网站: 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
分享到:
相关推荐
jQuery是一个非常不错的JavaScript脚本库,之前我们也分享了很多关于jQuery的插件,有菜单、表单、图片、动画等等。今天我们要分享一些最新的jQuery/CSS3插件,每一个都提供源代码的下载,希望大家喜欢。 1、jQuery...
内容索引:脚本资源,jQuery,JavaScript图表插件,Sparklines jQuery Sparklines可以用来生成静态或动态波谱图表效果,源码爱好者查阅资料写一个简单的调用实例,实例仅是其中的两款,如果需要其它样式的图表,你需要...
jQuery highcharts适时更新加载的图表插件,当图片加载数据后,立即绘制出曲线图,若数据有更新,会适时加载数据,并重新生成曲线图,是一款适时加载数据并更新曲线图的图表插件。在测试时,你会发现,图片自右向左...
js特效脚本含源码和说明JQuery柱形对比图表绘制本资源系百度网盘分享地址
js特效脚本含源码和说明JQuery线形对比图表绘制本资源系百度网盘分享地址
摘要:脚本资源,Ajax/JavaScript,图表插件 一个比较不错的基于JQuery实现的项目排期图表插件,在图表中,不同颜色代表的方格中,是代表的不同的任务状态,鼠标移上去,可显示详细的排期说明。这个插件也不大,但是...
内容索引:脚本资源,jQuery,Js图表,曲线绘制,jQuery插件 jQuery 曲线绘制的插件,用它可以轻松生成图表,各样各样的曲线图,这在统计程序中应用很广泛。本套插件中自带了近10种曲线绘制方法和样式,包括目前流行的...
之前我们分享过很多基于jQuery和HTML5的图表插件,但是很多都是基于第三方的插件实现,比如依赖jQuery库等等,例如10款绚丽实用的HTML5图表动画应用。今天我们要为大家分享的这款Frappe Charts图表应用并没有依赖第...
内容索引:脚本资源,jQuery,jQchart,Js图表,jQuery插件 来自jQuery的一款图表插件jQchart v0.03,可以绘制数据曲线、柱状图、各种各样的图表。
本压缩包内主要展示的是使用jQchart生成网页图表的实例,比较全面的实例,使用jQchart可轻松生成网页上的柱状图、圆形饼图和曲线图等常用图表,广泛应用于大型统计系统中。
jqplot是基于一个基本的jqplot.js文件,并有多个js文件支持的插件——也就是说jqplot.js文件只能支持线状图的绘制,对于饼状图,柱状图等图形需要引入pieRenderer.js等文件。 这里参照jqPlot的官方文档,以饼状图为...
简介 jqplot是一款非常不错的基于jquery的图表插件,这篇文章主要帮助大家整理了jqplot的中文使用说明和在线示例及源码下载。jqplot插件在支持HTML5的浏览器上将会在canvas上呈现图表。 引入脚本文件 jqplot需要...
摘要:脚本资源,jQuery,Wijmo Wijmo是一个基于jQuery UI的组件集,有超过30多个jQuery UI 组件,是一个CSS3,SVG,HTML5的混合物,Wijmo开发了一系列包括图表、、Tab选项卡、滑动门、菜单、上传文件、柱型图、表单...
内容索引:脚本资源,jQuery,highcharts,Js图表 jQuery highcharts 动感统计曲线图生成插件,它能以动画形式生成曲线图、柱状图、饼图等许多统计图形,还有一些更复杂的图形highcharts也能帮你完成,确实挺不错的,...
├── Highcharts 图表插件 ├── echarts 百度图标插件 ├── datatables 表格排序,检索插件 ├── WebUploader 百度文件上传组件 ├── lightbox2 图片预览组件 ├── html5shiv.js html5插件,让低版本...
内容索引:脚本资源,jQuery,投票,jQuery插件,柱状图 JQUERY的横向柱形统计图,这里模仿了QQ的投票统计功能,柱状图在得到数据后动态变化,慢慢变长,有动画效果,每个统计项都显示百分比,包括图表和文字。...
10.4 jQuery UI插件库 10.4.1 效果 10.4.2 交互组件 10.4.3 部件 10.4.4 jQuery UI ThemeRoller 10.5 其他插件 10.5.1 表单类 10.5.2 表格类 10.5.3 图像类 10.5.4 亮盒及模态对话框 10.5.5 图表类 ...
│ Highcharts 图表插件 │ dataTables 表格排序,检索插件 │ WebUploader 百度文件上传组件 │ lightbox2 图片预览组件 │ │ html5.js html5插件,让低版本IE支持html5元素 │ DD_belatedPNG_0.0.8a-min....
├── Highcharts 图表插件 ├── echarts 百度图标插件 ├── datatables 表格排序,检索插件 ├── WebUploader 百度文件上传组件 ├── lightbox2 图片预览组件 ├── html5shiv.js html5插件,让低版本...
│ Highcharts 图表插件 │ dataTables 表格排序,检索插件 │ WebUploader 百度文件上传组件 │ lightbox2 图片预览组件 │ │ html5.js html5插件,让低版本IE支持html5元素 │ DD_belatedPNG_...