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

gRaphael は、強力な Raphael ベクター グラフィックス ライブラリに基づいて、開発者が Web ページにさまざまな美しいグラフを描画できるようにすることに特化した Javascript ライブラリです。簡単なコードを数行記述するだけで、美しい棒グラフ、円グラフ、ドット プロット、曲線グラフを作成できます。

gRaphael は、グラフィックス作成の基礎として SVG W3C 推奨標準と VML を使用します。現在サポートされているブラウザーは、Firefox 3.0、Safari 3.0 です。 、Chrome 5.0、Opera 9.5、および Internet Explorer 6.0。

使用法 : raphael.js、g.raphael.js ファイルをページに導入し、必要に応じて g.line.js (曲線グラフ)、g.bar.js (棒グラフ) を導入します。 、g.dot.js (ドット チャート) および g.pie.js (円グラフ) ファイルをダウンロードし、提供されているメソッドを使用して、必要な美しいグラフを作成します。次に、2 つの簡単な例を示します。

静的な円グラフを作成する

必要なコードは 2 行だけです。サンプル コード:

コードをコピーします コードは次のとおりです:

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


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

ソースコードダウンロード

gRaphael公式サイトアドレス：http://g.raphaeljs.com/ gRaphael 英語リファレンスドキュメント: http://g.raphaeljs.com/reference.html

ラファエル公式ウェブサイトアドレス:

http://raphaeljs.com

Raphael 英語参考ドキュメント:

http://raphaeljs.com/reference.html

Raphael 中国語ヘルプ ドキュメント:

http://julying.com/lab/raphael-js/docs/

Raphael

初心者向けチュートリアル:

Raphael JS ライブラリの概要