坐标下载gRaphael——JavaScript 矢量图表库：两行代码实现精美图表

在本篇文章中,我们主要介绍坐标下载的内容,自我感觉有个不错的建议和大家分享下

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

    

创立态静饼图

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

// 在坐标（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.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库

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

文章结束给大家分享下程序员的一些笑话语录： 刹车失灵
有一个物理学家，工程师和一个程序员驾驶着一辆汽车行驶在阿尔卑斯山脉 上，在下山的时候，忽然，汽车的刹车失灵了，汽车无法控制地向下冲去， 眼看前面就是一个悬崖峭壁，但是很幸运的是在这个悬崖的前面有一些小树 让他们的汽车停了下来， 而没有掉下山去。 三个惊魂未定地从车里爬了出来。
物理学家说， “我觉得我们应该建立一个模型来模拟在下山过程中刹车片在高 温情况下失灵的情形”。
工程师说， “我在车的后备厢来有个扳手， 要不我们把车拆开看看到底是什么 原因”。
程序员说，“为什么我们不找个相同的车再来一次以重现这个问题呢？”