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（饼图）文件，然后根据提供的方法即可创建出你想要的精美图表，下面是两个简单示例。
创建静态饼图
只需要两行代码即可，示例代码：
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 事件以及动画方法，你就可以创建精美的交互式饼图，示例代码：
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
您可能感兴趣的相关文章
- Web 开发人员和设计师必读精华文章
- 35款精致的 HTML5 和 CSS3 网页模板
- 让人爱不释手的13套精美网页图标素材
- 精心挑选的优秀 jQuery Ajax 分页插件
- 60款很酷的 jQuery 幻灯片演示和下载
本文链接：gRaphael：两行代码实现图表绘制的JavaScript库
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
hide
本文链接
这段时间一直在IE上进行页面调整，但是IE的开发者工具不太好使。故此研究使用Firebug Lite这个工具来辅助页面开发。Firebug Lite拥有Firebug的90%的功能，但是这足够我们使用了。
使用Firebug Lite是不需要进行安装，只需要在需要使用Firebug Lite的页面中改动少量代码就可以了。具体步骤如下：
1、从Firebug Lite网站上下载其Code包，下载地址：http://fbug.googlecode.com/svn/lite/branches/firebug1.4/，这个需要使用SVN进行下载；
2、将整个下载下来的Code包放入工程中的webroot目录下的任意位置即可，如下图所示：
3、在需要进行调试的页面引入firebug-lite-dev.js，并且在<html/>中设置debug属性为true，如下图所示：
4、正常的启动服务，访问相应的页面。就可以入在Firefox中使用Firebug一样使用Firebug Lite了。
更多参考：https://getfirebug.com/firebuglite#Developer
- 函数定义
- 返回函数
- 调用一个函数
- 调用一个函数(带参数)
- 返回值的函数
- 调用外部的js文件
function 函数名([参数1,][参数2,][...])
{
语句:
}
备注:
[]内的内容可以不写。
参数是函数中使用的变量，变量的值是别调用函数按值传值的。通过将函数放置在文档的头部分(head),函数中的代码将在函数被调用之前加载。
2，怎样调用函数一个函数在没被调用之前将不会执行。
（1）调用包含参数的函数。
函数名([参数1,][参数2,][...])
(2)调用不包含参数的函数。
函数名()
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function total(a,b)
{
result=a+b;
return result;
}
</script>
</head>
<body>
<h1>1,返回语句</h1>
<script language="javascript">
var a=3;
var b=1;
var sum=total(a,b);
document.write(sum);
</script>
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function fun()
{
alert("Hello!");
}
</script>
</head>
<body>
<pre>
<h1>2，调用一个函数</h1>
<input type="button" onclick="fun()" value="调用函数" />
<a href="javascript:fun()">调用函数</a><br />
<p>
通过按下按钮，一个函数将被调用。这个函数将弹出一个消息框
</p>
</pre>