宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-10-05

Raphael是一个致力于帮助开发者在网页中绘制各种精美图表的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(饼图)文件,然后按照提供的方法创建自己想要的漂亮图表。创建静态饼图只需要两行代码。示例代码:复制代码如下://在坐标(10,50) var r=Raphael(10,50,600,450)处创建一个600 450的画布;//创建中心坐标为(320,200),半径为150,数据为[55,20,13,32,5,1,2,10]的饼图。演示和完整的源代码下载:

下载源代码,创建一个交互式饼图。通过结合悬停和点击事件以及动画方法,您可以创建一个漂亮的交互式饼图。示例代码:复制代码如下://在坐标(10,50) var r=Raphael(10,50,640,480)处创建一个640 480的画布;//创建中心坐标为(320,240),半径为100,数据为[55,20,13,32,5,1,2,10]的饼图。Pie=R. Piechart (320,240,100,[55,20,10]。{ legend :[' % % %。%% -企业用户',' IE用户'],legendpos: 'west ',href: ['http://raphaeljs.com ',' http://g . raphaeljs.com ']});//绘制文本r.text (320,100,'交互式饼图')。坐标(320,100)处的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 ');//添加动画效果如果(这个。标签){这个。标签[0]。动画({r: 5},500,“弹跳”);this.label[1]。attr({ ' font-weight ' : 400 });} });演示和完整的源代码下载:

源代码下载gRaphael官网地址:http://raphaeljs.comRaphael英文参考文献:http://g.raphaeljs.com/. reference . html Raphael官网地址:http://raphaeljs.comRaphael英文参考文献:http://raphaeljs.com/reference.htmlRaphael中文帮助文献:http://julying.com/lab/raphael-js/docs/. rapael新手教程:介绍一下raphaeljs库。

更多资讯
游戏推荐
更多+