SQLの窓

2014年12月04日


テーブル要素内のデータよりグラフを作成する jQuery プラグイン『jQuery-Visualize』をもっと使いやすく改造しました



概要

オリジナルはもう2年くらい処理の更新が無いのですが、問題点がいくつかあるので改造しました。問題点は、付属の css が中途半端なのと、上限と下限を設定できないので、一番大きい値がグラフの上限になり見にくいです。その上、Y軸のラベルの数字の間が自動なので100区切りとかになりません。そのあたりをオプションに追加しました。

enhance.js について

IE7 のエミュレーションでもグラフそのものは動作したので削除しています。

追加オプションと仕様変更



1) tableDisplay : デフォルトは true で、false にすると、データ元のテーブルを表示しない
2) top: グラフの上限
3) bottom : グラフの下限
※ yLabelInterval のデフォルトを 100 にして、Y軸の区切りの単位として変更
12月 1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月
2013 712 1144 938 972 714 771 515 641 1051 1018 658 681
2014 857 1219 927 947 709 674 495 537 900 758 536 550
▼ 棒グラフ( dark 色 )


colors は、オプションで指定する場合は、データの数ぶん色を設定する必要があります。
タイトルは、th で指定する必要があります。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> 
if ( window[window.location.hostname+'.visualize'] !== true ) { 
	window[window.location.hostname+'.visualize'] = true; 
	(function(){
		var str="";
		str+="<link href=\"http://winofsql.jp/jquery/plugins/visualize/visualize-light.css\" type=\"text/css\" rel=\"stylesheet\"> \n";
		str+="<"+"script type=\"text/javascript\" src=\"http://winofsql.jp/jquery/plugins/visualize/excanvas.js\"></"+"script> \n";
		str+="<"+"script type=\"text/javascript\" src=\"http://winofsql.jp/jquery/plugins/visualize/visualize.jQuery.js\"></"+"script> \n";
		document.write(str);
	})();
} 
</script> 
<script type="text/javascript">
$(function(){
	$("#target_table").visualize({
		tableDisplay: true,
		type: "line",
		width: "400px",
		height: "200px",
		title: "電気使用量の推移",
		colors: ['#F5CE0A','#0AB2F5'],
		lineWeight: 2,
		top: 1300,
		bottom: 400,
		yLabelInterval: 100
	});
});
</script>
<style>
.visualize * {
	font-size: 12px!important;
	font-family: Arial,"メイリオ","MS Pゴシック";
}
.visualize .visualize-title {
	font-size: 24px!important;
	font-family: Arial,"メイリオ","MS Pゴシック";
}
.visualize { 
	margin: 20px 0 0 15px;
}
#target_table {
	border-collapse: collapse;
}
#target_table td, #target_table th {
	text-align: center;
	border: 1px solid #ddd;
	padding:2px 5px;
}
</style>
<table id="target_table">
<thead>
<tr>
	<td></td>
	<th>12月</th>
	<th>1月</th>
	<th>2月</th>
	<th>3月</th>
	<th>4月</th>
	<th>5月</th>
	<th>6月</th>
	<th>7月</th>
	<th>8月</th>
	<th>9月</th>
	<th>10月</th>
	<th>11月</th>
</tr>
</thead>
<tbody>
<tr>
	<th>2013</th>
	<td>712</td>
	<td>1144</td>
	<td>938</td>
	<td>972</td>
	<td>714</td>
	<td>771</td>
	<td>515</td>
	<td>641</td>
	<td>1051</td>
	<td>1018</td>
	<td>658</td>
	<td>681</td>
</tr>
<tr>
	<th>2014</th>
	<td>857</td>
	<td>1219</td>
	<td>927</td>
	<td>947</td>
	<td>709</td>
	<td>674</td>
	<td>495</td>
	<td>537</td>
	<td>900</td>
	<td>758</td>
	<td>536</td>
	<td>550</td>
</tr>
</tbody>
</table>


タグ:jquery
posted by lightbox at 2014-12-04 00:42 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり