jQuery Visualizeサンプル1(実験)
インストール必要 (表現されず)
/////
jQuery Visualizeサンプル集
/////
jQuery Visualize サンプル1(棒グラフ)
/////
上のデータを「4つのグラフ」で表現すると、
こんな感じらしい。
1つのページに全ての種類(棒グラフ、折れ線グラフ(2種類)、円グラフ)のグラフを表示
下のプログラムは「棒グラフ」タイプ
/////
/////
インストール必要 (表現されず)
/////
jQuery-Visualize
こちらのページで詳しく解説してくれている。
http://monopocket.jp/blog/jquery_visualize/1371/
分かりやすい。HTMLでデータのテーブルを作ればそれを描画してくれる。
オプションというか、調整可能な部分が少ないのが難点。
グラフのサイズ
テーマ2種類(dark,light)
線の色
/////
ここjQuery Visualizeサンプル集
/////
food | auto | household | furniture | kitchen | bath | |
---|---|---|---|---|---|---|
Mary | 190 | 160 | 40 | 120 | 30 | 70 |
Tom | 3 | 40 | 30 | 45 | 35 | 49 |
Brad | 10 | 180 | 10 | 85 | 25 | 79 |
Kate | 40 | 80 | 90 | 25 | 15 | 119 |
/////
上のデータを「4つのグラフ」で表現すると、
こんな感じらしい。
1つのページに全ての種類(棒グラフ、折れ線グラフ(2種類)、円グラフ)のグラフを表示
下のプログラムは「棒グラフ」タイプ
/////
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>jQuery Visualize サンプル1(棒グラフ)</title>
<meta name="description" content="jQuery Visualize の1つ目のサンプルです。今回はデフォルトの設定(棒グラフ)でダークなイメージのグラフを生成しました。" />
<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>
<th scope="row">Brad</th>
<td>10</td>
<td>180</td>
<td>10</td>
<td>85</td>
<td>25</td>
<td>79</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>40</td>
<td>80</td>
<td>90</td>
<td>25</td>
<td>15</td>
<td>119</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38409323-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>