BluffはGruff graphing library for RubyをJavaScriptに移植したもの。
他のライブラリへの依存を最低限にしつつ、Gruffの全ての機能をサポートするようにデザインした。
必要なサードパーティーのスクリプトはJS.Class(約2kb gzip圧縮時)と、Internet Explorerでcanvasをを使えるようにするGoogleのExCanvasだ。
これら２つのスクリプトはBluffと共に提供されている。Bluff自身はgzip圧縮時に約8kb程度。
とのこと。
で試しに書いたスクリプトが以下。
<html>
<head>
<script language="javascript" src="js-class.js" type="text/javascript"></script>
<script language="javascript" src="bluff-min.js" type="text/javascript"></script>
<script language="javascript" src="excanvas.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function drawSample(){
var g = new Bluff.Line('example', 800);
//g.theme_keynote();
//g.theme_37signals();
//g.theme_rails_keynote();
//g.theme_odeo();
//g.theme_pastel();
//g.theme_greyscale();
//g.hide_line_markers = true;
g.hide_dots = true;
//g.hide_legend = true;
g.minimum_value = 0;
g.maximum_value = 200;
g.x_axis_label = 'Year';
g.y_axis_increment = 25;
g.zero_degree = 90;
g.title = 'グラフ描画サンプル';
g.data('Apples', [1,2,3,4,4,3,4, 1,2,3,4,4,3,4]);
g.data('マンゴー',[3,4,5,6,7,8,9, 10,12,13,140,15,16]);
g.data('Oranges', [4,8,7,7,3,1,4, 4,8,7,7,3,1,4]);
g.data('なにか', [100, 120, 100, 119, 98, 102, 100, 100, 120, 100, 119, 98, 102, 100]);
g.labels = {0:'2003', 4:'2004', 8:'2005', 12:'2006' };
g.draw();
}
</script>
</head>
<body onload="drawSample()">
<canvas id="example" width="100%"></canvas>
</body>
</html>
投稿
