gRaphael:JavaScript矢量圖表庫

gRaphael:JavaScript矢量圖表庫:今天看到瞭gRaphael這個圖標庫,感覺圖表交互功能挺炫酷的,csdn抽風圖傳不瞭,就不帶圖瞭。

gRaphael 是一個致力於幫助開發人員在網頁中繪制各種精美圖表的Javascript 庫,基於強大的Raphael矢量圖形庫。你隻需要編寫幾行簡單的代碼就能創建出精美的條形圖、餅圖、點圖和曲線圖。

gRaphael 使用 SVG W3C 推薦標準和VML 作為創建圖形的基礎,是跨瀏覽器的矢量圖形庫,目前支持的瀏覽器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。

創建靜態餅圖

// 在坐標(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: ["https://raphaeljs.com", "https://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
        });
    }
});

發佈留言