コメント |
@DIV
<script type="text/javascript">
$(function(){
$("#target_table2").visualize({
type: "line",
width: "400px",
height: "300px"
});
});
</script>
@END
@SHOW
幅と高さを指定しています。ただ、オリジナルの仕様でグラフの最低値がマイナスが無い場合はゼロとなる為、無駄な空間がグラフの下を占有しています。また、最大値をグラフの値の上限にしているので、グラフが天井にべったりはりついた様子になってしまっています。そこで、このところを改造して top と bottom を指定できるようにしました。
@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_table2").visualize({
type: "line",
width: "400px",
height: "300px"
});
});
</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_table2 {
border-collapse: collapse;
}
#target_table2 caption {
padding:10px;
border: solid 1px #c0c0c0;
margin-bottom: 10px;
border-radius: 10px;
background: linear-gradient(to bottom, #777, #000);
color: #fff;
}
#target_table2 td, #target_table2 th {
text-align: center;
border: 1px solid #ddd;
padding:2px 5px;
}
</style>
<table id="target_table2">
<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 |