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

本文链接：https://blog.youkuaiyun.com/androidmylove/article/details/8877585

gRaphael是一个用于在网页中绘制各种精美图表的JavaScript库，只需几行代码即可创建条形图、饼图、点图和曲线图。本文提供示例代码，展示如何快速创建静态和交互式图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

您可能感兴致的相干文章

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

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

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