官方網址：http://raphaeljs.com/

Rapha?l is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Rapha?l ['r?fe??l] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Rapha?l’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Rapha?l currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

?

最近在做一個關于客戶與品牌，客戶與代理關系的展示，由于用二維表展示不是很直觀，所以就想做個比較直觀的，在網上搜到了Raphael，就小試了一下，感覺不錯；

下面是試用結果截圖：

源碼如下：

?

var data = {"customer": "方正電子","brands":[{ "brand": "經略廣告" },{ "brand": "文韜采編" },{ "brand": "飛騰創藝" },{ "brand": "暢享全媒體" }]};var r = Raphael("holder", 500, 500);angle = 0;var interval = 36;if (data != null && data.brands.length > 0) {if (data.brands.length < 13) {interval = 360 / data.brands.length;}}var centerX = 250;var centerY = 250;var mc = Raphael.getColor();mc = Raphael.getColor();// mc = Raphael.getColor();var index = 0;while (angle < 360) {var color = Raphael.getColor();(function (t, c) {r.circle(centerX, 400, 50).attr({ stroke: c, fill: c, transform: t, "fill-opacity": .4 }).click(function () {}).mouseover(function () {this.animate({ "fill-opacity": .95 }, 500);}).mouseout(function () {this.animate({ "fill-opacity": .4 }, 500);});})("r" + angle + " " + centerX + " " + centerY + "", color);var path_transform = "r" + angle + " " + centerX + " " + centerY + "";r.path("M" + centerX + "," + centerY + "L" + centerX + ",350z").attr({ stroke: mc, fill: mc, transform: path_transform + "," + mc, "fill-opacity": .4 });var brandName = r.text(centerX, 400, data.brands[index].brand).attr({font: '16px Arial',fill: '#000',transform: path_transform + "," + mc}).toFront();brandName.rotate(0 - angle, brandName.x, brandName.y);index++;angle += interval;}var s = r.set();s.push(r.circle(centerX, centerY, 60));s.attr({ stroke: mc, fill: mc }).mouseover(function () {this.animate({ "fill-opacity": 1.75 }, 500);}).mouseout(function () {this.animate({ "fill-opacity": 1 }, 500);});s.push(r.text(centerX, centerY, data.customer).attr({ font: '16px Arial', fill: '#fff' })); var data = {"customer": "聯想集團","agents":[{ "agent": "中關村在線" },{ "agent": "蘇寧電器" },{ "agent": "國美電器" },{ "agent": "京東商城" },{ "agent": "淘寶商城" }]};var containerW = 500;var containerH = 500;var r = Raphael("holder", containerW, containerH);var boxW = 70; //方框寬度var boxH = 30; //方框高度var subBoxY = 150; //代理框的y坐標var paddingY = 10; //圖的內邊距 var angle = 0;var interval = 10;if (data != null && data.agents.length > 0) {if ((parseInt(boxW, 10) * data.agents.length) < containerW) {//間隔=（containerW-代理個數*boxW)/代理個數+1）interval = ((parseInt(containerW, 10) - (parseInt(boxW, 10) * data.agents.length)) / (data.agents.length + 1));}}var mainColor = Raphael.getColor();mainColor = Raphael.getColor();//畫當前客戶框var mainBoxX = ((parseInt(containerW, 10) - parseInt(boxW, 10)) / 2);var mainBox = r.rect(mainBoxX, paddingY, boxW, boxH).attr({ stroke: mainColor, fill: mainColor, "fill-opacity": .4 }).mouseover(function () {this.animate({ "fill-opacity": .95 }, 500);}).mouseout(function () {this.animate({ "fill-opacity": .4 }, 500);});//寫客戶名稱r.text(mainBoxX+(boxW/2), paddingY+(boxH/2), data.customer).attr({ font: '12px Arial', fill: '#fff' })//畫中間橫線var mX = (interval + ((parseInt(boxW, 10) / 2)));var mY = ((parseInt(subBoxY, 10) - parseInt(paddingY, 10) - parseInt(boxH, 10)) / 2) + parseInt(paddingY, 10) + parseInt(boxH, 10);r.path(Raphael.format("M{0},{1}L{2},{3}z",mX,mY,(containerW - mX),mY));//畫當前客戶和橫線的連接線r.path(Raphael.format("M{0},{1}L{2},{3}z",(parseInt(containerW, 10)/2),mY,(parseInt(containerW, 10) / 2),parseInt(paddingY, 10) + parseInt(boxH, 10)));angle = interval;$.each(data.agents, function (i) {//生成多個代理框var color = Raphael.getColor();var box1 = r.rect(angle, subBoxY, boxW, boxH).attr({ stroke: color, fill: color, "fill-opacity": .4 }).click(function () {}).mouseover(function () {this.animate({ "fill-opacity": .95 }, 500);}).mouseout(function () {this.animate({ "fill-opacity": .4 }, 500);});//畫線r.path(Raphael.format("M{0},{1}L{2},{3}z",(angle+(boxW/2)),subBoxY,(angle+(boxW/2)),mY));//寫代理名稱r.text(angle + (boxW / 2), subBoxY + (boxH / 2), data.agents[i].agent).attr({ font: '12px Arial', fill: '#fff' })angle += parseInt(boxW, 10) + interval;});

轉載于:https://www.cnblogs.com/HeroBeast/archive/2011/12/20/2295021.html

總結

以上是生活随笔為你收集整理的js矢量图类库：Raphaël—JavaScript Library的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。