概要 オリジナルはもう２年くらい処理の更新が無いのですが、問題点がいくつかあるので改造しました。問題点は、付属の 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,"メイリオ","ＭＳ Ｐゴシック";
}
.visualize .visualize-title {
font-size: 24px!important;
font-family: Arial,"メイリオ","ＭＳ Ｐゴシック";
}
.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
|
|
【プラグイン:jQueryの最新記事】
- jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する
- jQuery プラグイン : multiselect.js の使用方法とカスタマイズ
- JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする
- かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン
- jQuery のプラグイン jquery-color を使って、『青黒』なのか『白金』なのか、と言う『錯視』を再現しました。
- jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。
- jQuery の Chosen プラグイン( 複数選択コンボボックス ) の使い方
- 使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
