コメント |
@DIV
<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>
@END
@SHOW
title はデフォルトで表示するようになっています(appendTitle: true)。ですが、文字列はまず caption 要素の中を使います。他の内容に変更したい場合は、[[title オプション]]で指定します。
jQuery のセレクタを使ったフィルタが 列と行に用意されています。デフォルトでは、[[rowFilter: '*' と colFilter: '*']] が設定されているので全てが対象となります。
ここでは、colFilter しか指定していませんが、TD 毎にクラスを指定して、2014年にはクラスを指定していないので、2013年の1〜6月のみが表示されます。
@END
@DIV
<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>
@END
@HTML
</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_table4").visualize({
type: "line",
width: "400px",
height: "300px",
top: 1300,
bottom: 400,
yLabelInterval: 100,
title: "電気使用量の推移(2013〜2014)",
colFilter: ".a"
});
});
</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_table4 {
border-collapse: collapse;
}
#target_table4 caption {
padding:10px;
border: solid 1px #c0c0c0;
margin-bottom: 10px;
border-radius: 10px;
background: linear-gradient(to bottom, #777, #000);
color: #fff;
}
#target_table4 td, #target_table4 th {
text-align: center;
border: 1px solid #ddd;
padding:2px 5px;
}
</style>
<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>
<pre>
@HEND |