快捷導(dǎo)航

javaScript矢量圖表庫-gRaphael幾行代碼實(shí)現(xiàn)精美的條形圖/餅圖/點(diǎn)圖/曲線圖

更新時(shí)間：2013年01月09日 15:33:55 作者：

gRaphael是一個(gè)致力于幫助開發(fā)人員在網(wǎng)頁中繪制各種精美圖表的 Javascript庫,你只需要編寫幾行簡單的代碼就能創(chuàng)建出精美的條形圖、餅圖、點(diǎn)圖和曲線圖,感興趣的朋友可以了解下

gRaphael 是一個(gè)致力于幫助開發(fā)人員在網(wǎng)頁中繪制各種精美圖表的 Javascript 庫，基于強(qiáng)大的 Raphael 矢量圖形庫。你只需要編寫幾行簡單的代碼就能創(chuàng)建出精美的條形圖、餅圖、點(diǎn)圖和曲線圖。

gRaphael 使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，是跨瀏覽器的矢量圖形庫，目前支持的瀏覽器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+。

使用方法：在頁面中引入 raphael.js，g.raphael.js 文件，并根據(jù)需要引入 g.line.js（曲線圖），g.bar.js（條形圖），g.dot.js（點(diǎn)圖）和 g.pie.js（餅圖）文件，然后根據(jù)提供的方法即可創(chuàng)建出你想要的精美圖表，下面是兩個(gè)簡單示例。

創(chuàng)建靜態(tài)餅圖

只需要兩行代碼即可，示例代碼：

復(fù)制代碼代碼如下:

// 在坐標(biāo)（10,50）創(chuàng)建 600 × 450 的畫布 
var r = Raphael(10, 50, 600, 450); 
// 創(chuàng)建中心坐標(biāo)為（320, 200）的餅圖，半徑為150，數(shù)據(jù)為 [55, 20, 13, 32, 5, 1, 2, 10]的餅圖 
r.piechart(320, 240, 150, [55, 20, 13, 32, 5, 1, 2, 10]); 

效果演示及完整源碼下載：

源碼下載

創(chuàng)建交互餅圖
結(jié)合 hover 和 click 事件以及動(dòng)畫方法，你就可以創(chuàng)建精美的交互式餅圖，示例代碼：

復(fù)制代碼代碼如下:

// 在坐標(biāo)（10,50）創(chuàng)建 640 × 480 的畫布 
var r = Raphael(10, 50, 640, 480); 
// 創(chuàng)建中心坐標(biāo)為（320, 240）的餅圖，半徑為100，數(shù)據(jù)為[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"] 
}); 
// 在坐標(biāo)（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"); 
// 添加動(dòng)畫效果 
if(this.label) { 
this.label[0].animate({ 
r: 5 
}, 500, "bounce"); 
this.label[1].attr({ 
"font-weight": 400 
}); 
} 
}); 