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（饼图）文件，然后根据提供的方法即可创建出你想要的精美图表，下面是两个简单示例。

　　创建静态饼图

　　只需要两行代码即可，示例代码：

1 2 3 4

// 在坐标（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 事件以及动画方法，你就可以创建精美的交互式饼图，示例代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

// 在坐标（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         });     } });

　　效果演示及完整源码下载：

源码下载     在线演示

 

　　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 幻灯片演示和下载

 

本文链接：gRaphael：两行代码实现图表绘制的JavaScript库

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源