gRaphael：基于Raphael的矢量图表库入门指南

gRaphael 库简介与兼容性

gRaphael 是一个专注于协助开发者在网页中绘制各类精美图表的 JavaScript 库，其底层依赖于功能强大的 Raphael 矢量图形库。开发者仅需编写少量代码，即可生成高质量的条形图、饼图、点图及曲线图。

该库采用 SVG W3C 推荐标准及 VML 作为图形渲染基础，具备跨浏览器兼容性。目前支持的浏览器版本包括：Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 以及 Internet Explorer 6.0+。

引入文件与基础用法

使用 gRaphael 时，需先在页面中引入 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