gRaphael——JavaScript 矢量图表库

gRaphael——JavaScript 矢量图表库

2013-1-9 14:05| 发布者: html5cn |来自: cnblogs| 评论: 0

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

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）的饼图，数据为 [55, 20, 13, 32, 5, 1, 2] 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 var  r = Raphael(10, 50, 640, 480); 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" ] });    r.text(320, 100,  "Interactive Pie Chart" ).attr({      font:  "20px sans-serif" }); 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

原文链接： http://www.html5cn.org/article-4454-1.html