JavaScript ベクトル チャート ライブラリ - gRaphael は、数行のコードを使用して美しい棒グラフ/円グラフ/点グラフ/曲線グラフを実現します_JavaScript スキル

// 座標 (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]);

// 座標 (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], {
凡例: ["%%.%% - エンタープライズ ユーザー", "IE ユーザー"]、
凡例: "west"、
href: ["http://raphaeljs.com"、" http ://g.raphaeljs.com"]
});
// 座標 (320, 100) にテキストを描画
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({
"フォントの太さ": 800
});
}
}, function() {
this.sector.animate({
transform: 's1 1 ' this.cx ' ' this.cy
}, 500, "バウンス");
// アニメーション効果を追加します
if(this.label) {
this.label[0].animate({
r: 5
}, 500 , "バウンス");
this.label[1].attr({
"font-weight": 400
}); >


効果のデモンストレーションと完全なソース コードのダウンロード
: