javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图


Posted in Javascript onJanuary 09, 2013

gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库。你只需要编写几行简单的代码就能创建出精美的条形图、饼图、点图和曲线图。

gRaphael 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。

javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

使用方法:在页面中引入 raphael.js,g.raphael.js 文件,并根据需要引入 g.line.js(曲线图),g.bar.js(条形图),g.dot.js(点图)和 g.pie.js(饼图)文件,然后根据提供的方法即可创建出你想要的精美图表,下面是两个简单示例。

创建静态饼图

只需要两行代码即可,示例代码:

// 在坐标(10,50)创建 600 × 450 的画布 
var r = Raphael(10, 50, 600, 450); 
// 创建中心坐标为(320, 200)的饼图,半径为150,数据为 [55, 20, 13, 32, 5, 1, 2, 10]的饼图 
r.piechart(320, 240, 150, [55, 20, 13, 32, 5, 1, 2, 10]);

效果演示及完整源码下载

javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

源码下载

创建交互饼图
结合 hover 和 click 事件以及动画方法,你就可以创建精美的交互式饼图,示例代码:

// 在坐标(10,50)创建 640 × 480 的画布 
var r = Raphael(10, 50, 640, 480); 
// 创建中心坐标为(320, 240)的饼图,半径为100,数据为[55, 20, 13, 32, 5, 1, 2, 10]的饼图 
pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { 
legend: ["%%.%% - Enterprise Users", "IE Users"], 
legendpos: "west", 
href: ["http://raphaeljs.com", "http://g.raphaeljs.com"] 
}); 
// 在坐标(320, 100)绘制文字 
r.text(320, 100, "Interactive Pie Chart").attr({ 
font: "20px sans-serif" 
}); 
// 给饼图添加 hover 事件 
pie.hover(function() { 
this.sector.stop(); 
this.sector.scale(1.1, 1.1, this.cx, this.cy); if(this.label) { 
this.label[0].stop(); 
this.label[0].attr({ 
r: 7.5 
}); 
this.label[1].attr({ 
"font-weight": 800 
}); 
} 
}, function() { 
this.sector.animate({ 
transform: 's1 1 ' + this.cx + ' ' + this.cy 
}, 500, "bounce"); 
// 添加动画效果 
if(this.label) { 
this.label[0].animate({ 
r: 5 
}, 500, "bounce"); 
this.label[1].attr({ 
"font-weight": 400 
}); 
} 
});

效果演示及完整源码下载

javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

源码下载

gRaphael 官方网站地址:http://g.raphaeljs.com/

gRaphael 英文参考文档:http://g.raphaeljs.com/reference.html 

Raphael 官方网站地址:http://raphaeljs.com

Raphael 英文参考文档:http://raphaeljs.com/reference.html

Raphael 中文帮助文档:http://julying.com/lab/raphael-js/docs/

Raphael 新手入门教程:An Introduction to the Raphael JS Library

Javascript 相关文章推荐
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 #Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 #Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 #Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 #Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 #Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 #Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 #Javascript
You might like
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
JS中type="button"和type="submit"的区别
2017/07/04 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python实时监控cpu小工具
2018/06/21 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
代码详解django中数据库设置
2019/01/28 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
大整数数相乘的问题
2012/07/22 面试题
网络工程专业大学生求职信
2014/10/01 职场文书
2014年安全员工作总结
2014/11/13 职场文书
工程款催款函
2015/06/24 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
Python学习之异常中的finally使用详解
2022/03/16 Python
解决Oracle数据库用户密码过期
2022/05/11 Oracle