Raphael 是一个用于在网页中绘制矢量图形的 Javascript库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作。
Raphaël是跨浏览器的矢量图形库，目前支持的浏览器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+。
官网地址： http://raphaeljs.com/
绘制柱状图、折线图、饼图等插件网址： http://g.raphaeljs.com/
下面是调研Raphael写的测试例子，打算用它来做个交换平台的监控图形界面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><script src="libs/jquery-1.8.3.js"></script><script src="libs/raphael/raphael.js" charset="utf-8"></script></head><body ><script>
var paper = Raphael(10, 10, 800, 600);
var mpn1 = paper.image("./image/mpn1.jpg", 200, 300, 80, 80);
var mrc = paper.image("./image/mrc.jpg", 400, 300, 80, 80);
var mpn2 = paper.image("./image/mpn2.jpg", 600, 300, 80, 80);
mpn2.attr({cursor:"hand"});
mpn2.glow({color:"yellow"});
mpn2.click(function(){alert("有堵单发生！")});
var c1 = paper.path("M280 340L400 340");
var c2 = paper.path("M480 340L600 340");
c2.attr("stroke","red");
c2.glow({color:"yellow"});
var msecs = 500; //改变时间得到不同的闪烁间隔；
var currentColor="red";
function blink() {
if(currentColor=="white"){
c2.attr("stroke","red");
currentColor="red";
}else{
c2.attr("stroke","white");
currentColor="white";
}
setTimeout("blink()", msecs);
}
setInterval("blink()", msecs); </script></body></html>
已有 0人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
