| コメント |
@DIV
<script type="text/javascript">
$(function(){
$("#target_table").visualize({
type: "line"
});
});
</script>
@END
@SHOW
ここでは、type しか指定していないので、他のオプションは全てデフォルトで設定されています。
[[▼ オリジナルオプション]]
グラフエリアのサイズは、width と height で指定できますが、何も指定しなければ table 要素の大きさが使われます。ここでは、table 要素に高さをわざと指定して、グラフエリアのサイズを同期させています
@END
[[コード内部のデフォルト値]]
@DIV
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);
@END
@HTML
<a href="http://winofsql.jp/jquery/plugins/visualize/jQuery-Visualize-master_set.zip"><img src="http://winofsql.jp/image/lightbox_download.jpg" style="border: solid 1px #000000"></a>
</pre>
<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,"メイリオ","ＭＳ Ｐゴシック";
}
.visualize .visualize-title {
font-size: 24px!important;
font-family: Arial,"メイリオ","ＭＳ Ｐゴシック";
}
.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>
<pre>
@HEND
@DIV
<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,"メイリオ","ＭＳ Ｐゴシック";
}
.visualize .visualize-title {
font-size: 24px!important;
font-family: Arial,"メイリオ","ＭＳ Ｐゴシック";
}
.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>
@END |
メンテナンス