ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
jQuery プラグイン 『jQuery-Visualize』 : 改造版用 - オプション解説
日時: 2014/12/04 22:29
名前: lightbox



<script type="text/javascript">
$(function(){
	$("#target_table").visualize({
		type: "line"
	});
});
</script>
ここでは、type しか指定していないので、他のオプションは全てデフォルトで設定されています。

▼ オリジナルオプション
グラフエリアのサイズは、width と height で指定できますが、何も指定しなければ table 要素の大きさが使われます。ここでは、table 要素に高さをわざと指定して、グラフエリアのサイズを同期させています
コード内部のデフォルト値
		var o = $.extend({
			tableDisplay: true, // 追加オプション : false にすると、データの table を非表示にします
			top: 0, // 追加オプション
			bottom: 0, // 追加オプション
			type: 'bar', //also available: area, pie, line
			width: $(this).width(), //height of canvas - defaults to table height
			height: $(this).height(), //height of canvas - defaults to table height
			appendTitle: true, //table caption text is added to chart
			title: null, //grabs from table caption if null
			appendKey: true, //color key is added to chart
			rowFilter: '*',
			colFilter: '*',
			colors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744'],
			textColors: [], //corresponds with colors array. null/undefined items will fall back to CSS
			parseDirection: 'x', //which direction to parse the table data
			pieMargin: 20, //pie charts only - spacing around pie
			pieLabelsAsPercent: true,
			pieLabelPos: 'inside',
			lineWeight: 4, //for line and area - stroke weight
			barGroupMargin: 10,
			barMargin: 1, //space around bars in bar chart (added to both sides of bar)
			yLabelInterval: 100 //distance between y labels
		},options);
電気使用量の推移
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
2013 1144 938 972 714 771 515 641 1051 1018 658 681 712
2014 1219 927 947 709 674 495 537 900 758 536 550 857


<script type="text/javascript">
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></"+"script>");
}
</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-dark.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({
		type: "line"
	});
});
</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;
	height: 300px;
}
#target_table caption {
	padding:10px;
	border: solid 1px #c0c0c0;
	margin-bottom: 10px;
	border-radius: 10px;
	background: linear-gradient(to bottom, #777, #000);
	color: #fff;
}
#target_table td, #target_table th {
	text-align: center;
	border: 1px solid #ddd;
	padding:2px 5px;
}
</style>
<table id="target_table">
<caption>電気使用量の推移</caption>
<thead>
<tr>
	<td></td>
	<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>
	<th>12月</th>
</tr>
</thead>
<tbody>
<tr>
	<th>2013</th>
	<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>
	<td>712</td>
</tr>
<tr>
	<th>2014</th>
	<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>
	<td>857</td>
</tr>
</tbody>
</table>
メンテナンス

オプションに幅と高さを指定する ( No.1 )
日時: 2014/12/04 20:45
名前: lightbox


日時: 2014/12/04 20:45
名前: lightbox
<script type="text/javascript">
$(function(){
	$("#target_table2").visualize({
		type: "line",
		width: "400px",
		height: "300px"
	});
});
</script>
幅と高さを指定しています。ただ、オリジナルの仕様でグラフの最低値がマイナスが無い場合はゼロとなる為、無駄な空間がグラフの下を占有しています。また、最大値をグラフの値の上限にしているので、グラフが天井にべったりはりついた様子になってしまっています。そこで、このところを改造して top と bottom を指定できるようにしました。
電気使用量の推移
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
2013 1144 938 972 714 771 515 641 1051 1018 658 681 712
2014 1219 927 947 709 674 495 537 900 758 536 550 857

このアーティクルの参照用URLをクリップボードにコピー メンテナンス
新しい追加オプションの top と bottom を指定 ( No.2 )
日時: 2014/12/04 20:56
名前: lightbox
<script type="text/javascript">
$(function(){
	$("#target_table3").visualize({
		type: "line",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		yLabelInterval: 50
	});
});
</script>
このような指定は自動ではできませんが、固定されたデータをグラフとして使用したい場合は重要なレイアウトだと思います。また、オリジナルでは、Y 座標の目盛りの単位がこのように 100 づつというようになりません。そこでこれも変更して(yLabelInterval)デフォルトで 100 づつにしています。( 変更可能です )
電気使用量の推移
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
2013 1144 938 972 714 771 515 641 1051 1018 658 681 712
2014 1219 927 947 709 674 495 537 900 758 536 550 857

このアーティクルの参照用URLをクリップボードにコピー メンテナンス
title と filter の指定 ( No.3 )
日時: 2014/12/04 22:05
名前: lightbox
<script type="text/javascript">
$(function(){
	$("#target_table4").visualize({
		type: "line",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		yLabelInterval: 100,
		title: "電気使用量の推移(2013〜2014)",
		colFilter: ".a"
	});
});
</script>
title はデフォルトで表示するようになっています(appendTitle: true)。ですが、文字列はまず caption 要素の中を使います。他の内容に変更したい場合は、title オプションで指定します。

jQuery のセレクタを使ったフィルタが 列と行に用意されています。デフォルトでは、rowFilter: '*' と colFilter: '*' が設定されているので全てが対象となります。

ここでは、colFilter しか指定していませんが、TD 毎にクラスを指定して、2014年にはクラスを指定していないので、2013年の1〜6月のみが表示されます。
<table id="target_table4">
<caption>電気使用量の推移</caption>
<thead>
<tr>
	<td></td>
	<th class="a">1月</th>
	<th class="a">2月</th>
	<th class="a">3月</th>
	<th class="a">4月</th>
	<th class="a">5月</th>
	<th class="a">6月</th>
	<th class="b">7月</th>
	<th class="b">8月</th>
	<th class="b">9月</th>
	<th class="b">10月</th>
	<th class="b">11月</th>
	<th class="b">12月</th>
</tr>
</thead>
<tbody>
<tr>
	<th>2013</th>
	<td class="a">1144</td>
	<td class="a">938</td>
	<td class="a">972</td>
	<td class="a">714</td>
	<td class="a">771</td>
	<td class="a">515</td>
	<td class="b">641</td>
	<td class="b">1051</td>
	<td class="b">1018</td>
	<td class="b">658</td>
	<td class="b">681</td>
	<td class="b">712</td>
</tr>
<tr>
	<th>2014</th>
	<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>
	<td>857</td>
</tr>
</tbody>
</table>
電気使用量の推移
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
2013 1144 938 972 714 771 515 641 1051 1018 658 681 712
2014 1219 927 947 709 674 495 537 900 758 536 550 857

このアーティクルの参照用URLをクリップボードにコピー メンテナンス
表データの向きの変更と、グラフの色 ( No.4 )
日時: 2014/12/04 23:02
名前: lightbox
<script type="text/javascript">
$(function(){
	$("#target_table5").visualize({
		type: "line",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		parseDirection: "",
		colors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744',"#ffffff","#DB30CD","#44DB30"],
	});
});
</script>
parseDirection は、デフォルトで "x" が設定されており、それ以外の文字列の場合はテーブルデータの利用の方向が x軸とy軸で入れ替わります。

グラフの色は、9種類しか用意されていないので、この場合は3色追加しています。オプションで設定した色がデフォルトの色を上書きするので、2色しか指定しなければ 3色目は無い事になるので注意して下さい。
電気使用量の推移
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
2013 1144 938 972 714 771 515 641 1051 1018 658 681 712
2014 1219 927 947 709 674 495 537 900 758 536 550 857

このアーティクルの参照用URLをクリップボードにコピー メンテナンス
ラインの太さと、追加オプションのデータテーブルの非表示 ( No.5 )
日時: 2014/12/04 22:38
名前: lightbox
<script type="text/javascript">
$(function(){
	$("#target_table6").visualize({
		type: "line",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		lineWeight: 2,
		tableDisplay: false
	});
});
</script>
ラインの太さは、デフォルトでは 4 です。ここでは 2 に変更して、tableDisplay を false にしてテーブルを非表示にしています
電気使用量の推移
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
2013 1144 938 972 714 771 515 641 1051 1018 658 681 712
2014 1219 927 947 709 674 495 537 900 758 536 550 857

このアーティクルの参照用URLをクリップボードにコピー メンテナンス
棒グラフの幅変更 ( No.6 )
日時: 2014/12/04 22:59
名前: lightbox
<script type="text/javascript">
$(function(){
	$("#target_table7").visualize({
		type: "bar",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		barMargin: 1,
		barGroupMargin: 10,
		tableDisplay: false
	});
	$("#target_table8").visualize({
		type: "bar",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		barMargin: 2,
		barGroupMargin: 3,
		tableDisplay: false
	});
});
</script>
barMargin は、グループ内でのグラフとグラフの間です。デフォルトは 1 ですが、グラフエリアはサイズが決まっているので、このような値をむやみに変更すると棒グラフの幅が細くなるだけなので注意して下さい。barGroupMarginデフォルトは 10 が設定されているので、棒グラフの幅を広くしたい場合はこの値を少なく設定します。
電気使用量の推移
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
2013 1144 938 972 714 771 515 641 1051 1018 658 681 712
2014 1219 927 947 709 674 495 537 900 758 536 550 857
電気使用量の推移
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
2013 1144 938 972 714 771 515 641 1051 1018 658 681 712
2014 1219 927 947 709 674 495 537 900 758 536 550 857

このアーティクルの参照用URLをクリップボードにコピー メンテナンス
円グラフ ( No.7 )
日時: 2014/12/04 23:27
名前: lightbox
<script type="text/javascript">
$(function(){
	$("#target_table9").visualize({
		type: "pie",
		width: "400px",
		height: "300px",
		top: 1300,
		bottom: 400,
		parseDirection: "",
		pieLabelPos: "outside",
		pieMargin: 40,
		colors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#EBA36C','#26a4ed','#f45a90','#e9e744',"#ffffff","#DB30CD","#44DB30"],
		textColors: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#EBA36C','#26a4ed','#f45a90','#e9e744',"#ffffff","#DB30CD","#44DB30"]
	});
});
</script>
ラベルがデフォルトでは円グラフ内に表示されるので(pieLabelPos: "intside")、データが多い場合は pieLabelPos: "outside" を指定します。

さらに、ラベルの色を指定しないと良く見えない場合は、textColors で個別に指定します。そして、pieMargin を指定してグラフエリアの外側からの距離指定する事によって外側のラベルをうまく表示できるようにします。

データは、この場合 parseDirection を "x" 以外に設定しますが、データは2行あるので内部で合計されてその値が使用されて% 表示されます。

値を直接表示したい場合は、pieLabelsAsPercent を false に設定します
電気使用量の月別比率
1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月
2013 1144 938 972 714 771 515 641 1051 1018 658 681 712
2014 1219 927 947 709 674 495 537 900 758 536 550 857

このアーティクルの参照用URLをクリップボードにコピー メンテナンス