棒グラフを表示するためのjQueryプラグイン「jqBarGraph」

0


20100223 05 棒グラフを表示するためのjQueryプラグイン「jqBarGraph」
jqBarGraphは棒グラフを表示するためのjQueryプラグインです。
画面表示のさいに「うにょーん」と伸びて存在をしっかりアピールしてくれます。

ランキング表示なんかに使えそうですね。

詳しくは以下

設置してみる

まずは公式サイトへアクセスします。

20100223 02 棒グラフを表示するためのjQueryプラグイン「jqBarGraph」

Google Codeへ。

20100223 03 棒グラフを表示するためのjQueryプラグイン「jqBarGraph」

圧縮ファイルか通常ファイルかを選択します。クリックでダウンロード開始。
今回はunpacked version を使用してみました。

ダウンロードした後はhtmlファイルを作成しましょう。
グラフには配列をわたすだけでよいようです。配列に渡すのは値、ラベル、カラーの順です。

<script src="jquery.js"></script>
<script src="jqBarGraph.js"></script>
<script>
arrayOfData = new Array(
    [10.3,'Jan','#f3f3f3'],
    [15.2,'Feb','#f4f4f4'],
    [13.1,'Mar','#cccccc'],
    [16.3,'Apr','#333333'],
    [14.5,'May','#666666']
); 

$(document).ready(function() {
	$('#divForGraph').jqBarGraph({ data: arrayOfData });
});

</script>
<div id="divForGraph"></div>

これだけで動作させる事ができました。
20100223 04 棒グラフを表示するためのjQueryプラグイン「jqBarGraph」

以下のブラウザで動作するようです。

  • Safari 2+
  • Internet Explorer 6+
  • Firefox 2+
  • Google Chrome 3+
  • Opera 9+

かなり簡単に値を設定できるため、グラフ設置の際は検討してみても良いかもしれません。


Post a comment