jQuery Visualizeで洗練されたデザインのグラフの作成

jQuery Visualizeは洗練されたデザインのグラフを簡単に作成することを可能にする無料のソフトウェアである。

2012年9月現在、ドキュメントは英語しかないのでその点は苦労したが使ってみた。様々なサンプルを作ったので、今後どんどん紹介していこうと思う。

今回は第一弾ということでmonopocket.jpの開発ページjQuery Visualizeのサンプル集ページを追加した。第一弾のサンプルはこちらのリンク(jQuery Visualize サンプル1)からアクセスできる。

以下にjQuery Visualizeの使い方~サンプル1の解説まで行う。

jQuery Visualizeの使い方

jQuery Visualizeの公式ページを読めば使い方は分かるが、現在全て英語なので簡単に使い方を説明する。

以下の2つの手順でjQuery Visualizeが利用できるようになる。

1. jQuery Visualizeのダウンロード
2. HTMLファイルの編集

jQuery Visualizeのダウンロード

まず、必要なファイルのダウンロードする。以下のリンクからダウンロードできる。

jQuery Visualizeのダウンロードページ

もし、ダウンロードページが変更されている場合には上記の公式ページに記載されているはずなので、そちらを参考にしていただきたい。また、その際にはコメントを頂けると有難いです。

以下の画像の赤枠部分をクリックし、ZIPファイルをダウンロード。ダウンロードしたZIPファイルを解凍すれば以下の画像のディレクトリ構造が出来上がっているはず。

jQuery Visualizeのダウンロード

HTMLファイルの編集

index.htmlファイルを試しにブラウザで開いてみると分かると思うが、これがグラフを表示するサンプルファイルになっている。

今回は、このindex.htmlを編集することで、デフォルト設定の棒グラフを生成するまでを紹介する。

まず、headタグ内で書かれているjQueryのコードを消して、scriptタグでjsファイルを読み込むようにする。今回読み込むファイルは、以下のコードの6行目から12行目の7ファイル。

13行目から17行目の5行を書くことで、HTMLファイル内のテーブル要素をグラフ化している。22行目のcaptionタグ内にグラフのタイトルを記述する。

以下のコードを実行したサンプルはこちら→jQuery Visualize サンプル1(デフォルト:棒グラフ)

jQuery Visualizeサンプル1

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<title>jQuery Visualize サンプル1</title>
	<link href="css/basic.css" type="text/css" rel="stylesheet" />
	<link href="css/visualize.css" type="text/css" rel="stylesheet" />
	<link href="css/visualize-dark.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>	
	<script type="text/javascript" src="js/excanvas.js"></script>	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>	
	<script type="text/javascript" src="js/visualize.jQuery.js"></script>	
	<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize();
        });   
    </script>
</head>
<body>

<table>
	<caption>2009 Employee Sales by Department</caption>
	<thead>
		<tr>
			<td></td>
			<th scope="col">food</th>
			<th scope="col">auto</th>
			<th scope="col">household</th>
			<th scope="col">furniture</th>
			<th scope="col">kitchen</th>
			<th scope="col">bath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">Mary</th>
			<td>190</td>
			<td>160</td>
			<td>40</td>
			<td>120</td>
			<td>30</td>
			<td>70</td>
		</tr>
		<tr>
			<th scope="row">Tom</th>
			<td>3</td>
			<td>40</td>
			<td>30</td>
			<td>45</td>
			<td>35</td>
			<td>49</td>
		</tr>
        <!-- 以下のtr,td要素は省略 -->
	</tbody>
</table>	
</body>
</html>

以下のようなグラフが生成される。

jQuery Visualizeのデフォルトのグラフ(棒グラフ)

関連記事

jQuery Visualizeで様々な種類のグラフを作成
jQuery Visualizeサンプル集
jQuery Visualizeのテーマの指定方法

コメント

  • […] こちらのページで詳しく解説してくれている。 http://monopocket.jp/blog/jquery_visualize/1371/ […]

    2015年2月17日 5:27 PM| グラフ描画用のJavascriptライブラリを物色 | For Want Of A Better Word

  • rie さん

    管理人です。
    すみません、今から調べようと思ってました。
    遅くなってお役に立てず、すみませんでした。

    2014年1月20日 10:29 PM| 管理人

  • すいません。できました。。
    お騒がせました。

    2014年1月16日 5:05 PM| rie

  • こんにちは。

    とてもわかりやすく説明していただき、ありがとうございます。
    大変参考になりました。

    お試しでやって気づいたのですが、この場合だと、HTMLページに他にtableタグを使うものがあれば、変にグラフが生成されてしまいますね。。

    これを回避する方法わかったら教えていただけないでしょうか。

    jQuery(‘table.graph’).visualize();

    みたいに、table class=”graph” のものだけを対象にしたいのですが、うまくいきませんでした。

    よろしくお願いします。

    2014年1月16日 4:35 PM| rie

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/jquery_visualize/1371/trackback/