軽量JavaScriptライブラリでグラフを描画「Bluff」
グラフをイラレとかで作るのはめんどくさい・・・
そんなあなたにJavaScriptでグラフを描画できるBluff: Beautiful graphs in JavaScriptを紹介します。
サイズも小さいので使いやすいのではないでしょうか。
sponsors
使用方法
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
記事作成:2010年1月19日 10:01
記事URL:http://www.skuare.net/2010/01/javascriptbluff.html
TOP > javascript > グラフ関連 > 軽量JavaScriptライブラリでグラフを描画「Bluff」
前の記事:べらぼうに簡単にストリートビューを表示できるJavaScript「stview.js」
次の記事:ハイクオリティのグラフ生成JavaScript「Highcharts」