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 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
js获取class的所有元素
Mar 28 Javascript
jquery图片切换插件
Mar 16 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
js css+html实现简单的日历
Jul 14 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
一行代码实现纯数据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
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
laravel5.6实现数值转换
2019/10/23 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python将txt文件读取为字典的示例
2018/12/22 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
SQL中where和having的区别
2012/06/17 面试题
小学教师的自我评价范例
2013/10/31 职场文书
大学毕业寄语大全
2014/04/10 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
Python Pandas 删除列操作
2022/03/16 Python