軽量JavaScriptライブラリでグラフを描画「Bluff」

グラフをイラレとかで作るのはめんどくさい・・・
そんなあなたにJavaScriptでグラフを描画できるBluff: Beautiful graphs in JavaScriptを紹介します。
サイズも小さいので使いやすいのではないでしょうか。
軽量JavaScriptライブラリでグラフを描画「Bluff」サンプル

使用方法
Bluff: Beautiful graphs in JavaScriptからファイルをダウンロードします。
<script language="javascript" src="js-class.js" type="text/javascript"></script>
<script language="javascript" src="bluff-src.js" type="text/javascript"></script>
<script language="javascript" src="excanvas.js" type="text/javascript"></script>

あとはグラフ部分を以下のように記述していきます。
<canvas id="id名" width="横幅" height="高さ"></canvas>
<script type="text/javascript">
window.onload = function() {
var g = new Bluff.Line('id名', '横幅x高さ');
g.title = 'グラフタイトル';
g.tooltips = true; //グラフのツールチップを有効
g.theme_37signals(); //テーマ
g.data("Apples", [1, 2, 3, 4, 4, 3]); //データ(複数の場合は個数分記述)
g.labels = {0: '2003', 2: '2004', 4: '2005'}; //ラベル
g.draw();
};
</script>

なお、テーマは以下があるようです。
g.theme_keynote();
g.theme_37signals();
g.theme_rails_keynote();
g.theme_odeo();
g.theme_pastel();
g.theme_greyscale();

また、htmlのtableからもグラフを描画することが可能です。

軽量JavaScriptライブラリでグラフを描画「Bluff」サンプル

sponsors

「軽量JavaScriptライブラリでグラフを描画「Bluff」」をシェアする

記事作成:
記事URL:

TOP > > > 軽量JavaScriptライブラリでグラフを描画「Bluff」