gRaphael——JavaScript 矢量图表库:两行代码实现精美图表
2013-01-09 13:42
477 查看
gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库。你只需要编写几行简单的代码就能创建出精美的条形图、饼图、点图和曲线图。
gRaphael 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。
使用方法:在页面中引入 raphael.js,g.raphael.js 文件,并根据需要引入 g.line.js(曲线图),g.bar.js(条形图),g.dot.js(点图)和 g.pie.js(饼图)文件,然后根据提供的方法即可创建出你想要的精美图表,下面是两个简单示例。
创建静态饼图
只需要两行代码即可,示例代码:
效果演示及完整源码下载:
源码下载 在线演示
创建交互饼图
结合 hover 和 click 事件以及动画方法,你就可以创建精美的交互式饼图,示例代码:
效果演示及完整源码下载:
源码下载 在线演示
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
您可能感兴趣的相关文章
Web 开发人员和设计师必读精华文章
35款精致的 HTML5 和 CSS3 网页模板
让人爱不释手的13套精美网页图标素材
精心挑选的优秀 jQuery Ajax 分页插件
60款很酷的 jQuery 幻灯片演示和下载
本文出处【http://www.cnblogs.com/lhb25/】
gRaphael 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。
使用方法:在页面中引入 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]);
效果演示及完整源码下载:
源码下载 在线演示
创建交互饼图
结合 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. }); this.label[1].attr({ "font-weight": }); } }, function() { this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce"); // 添加动画效果 if(this.label) { this.label[0].animate({ r: }, 500, "bounce"); this.label[1].attr({ "font-weight": }); } });
效果演示及完整源码下载:
源码下载 在线演示
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
您可能感兴趣的相关文章
Web 开发人员和设计师必读精华文章
35款精致的 HTML5 和 CSS3 网页模板
让人爱不释手的13套精美网页图标素材
精心挑选的优秀 jQuery Ajax 分页插件
60款很酷的 jQuery 幻灯片演示和下载
本文出处【http://www.cnblogs.com/lhb25/】
相关文章推荐
- 坐标下载gRaphael——JavaScript 矢量图表库:两行代码实现精美图表
- gRaphael——JavaScript 矢量图表库:两行代码实现精美图表
- javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
- javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
- gRaphael——JavaScript 矢量图表库
- gRaphael—JavaScript 矢量图表库
- 分享一个开源的JavaScript统计图表库,40行代码实现专业统计图表
- javascript实现的LI列表输出,隔行同色的代码
- javascript代码实现浏览器菜单命令
- javascript实现类继承.. 参照代码....
- javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
- JavaScript中数组的排序、乱序和搜索实现代码
- javascript实现仿银行密码输入框效果的代码
- JavaScript代码实现动态播放
- javascript全局变量封装模块实现代码
- Javascript Jquery 遍历Json的实现代码
- javascript getElementsByClassName实现代码
- 如何实现正则表达式的JavaScript的代码高亮
- javascript中实现兼容JAVA的hashCode算法代码分享
- Javascript实现代码折叠功能