利用table,div實現動態柱狀圖表

想來很有趣，沒想到利用table,div,css,javascript也可以實現一個動態的柱狀圖表。效果還不錯，如下圖。基本可以應付簡單的需要，更重要的是可以做到柱形圖的動態顯示 呵呵

 

 

 

 

用一個table實現柱狀圖表,table結構如下:

<table>
	<caption>統計分析 (2007-02～2008-02)</caption>
	<thead></thead>
	<tbody>
		<tr style="height:300px;">
			<td class="chartcaption" style="vertical-align:top;border-right:1px solid #004477;border-bottom:none;">
				<p style="padding-top:10px;">消</p><p>費</p><p>金</p><p>額</p><p>(元)</p>
			</td>
			<td><p><span>12899</span></p><div id="firstcolumn" title="消費金額:12899 元" class="tdbg" style="height:80%;"></div></td>
			<td><p><span>9616</span></p><div title="消費金額:9616 元" class="tdbg" style="height:60%;"></div></td>
			....
			....
			....
			<td></td>
		</tr>
		<tr>
			<td style="border:none;"></td>
			<td style="border:none;">07/02</td>
			....
			....
			....
			<td class="chartcaption" style="border:none;">月份</td>
		</tr>
	</tbody>
</table>

 

代碼比較簡單，table也只有2行，x軸上下各是一行。設定一下tr或td的border屬性就可以畫出x軸，y軸。

柱形圖就是在一個td裏面有藍色背景的div~,設定這個div的height屬性就可以決定每個柱形圖的高度了。

重要的還是要寫一些css代碼來控制這個table及其div元素的表現形式。

 

再說說動態實現部分吧，這個很爽啊。

其實要控制一個柱形的高度只要給這個div設定一個id，然後再修改這個div的height屬性就行了。

如：

<td><p><span>12899</span></p><div id="firstcolumn" title="消費金額:12899 元" class="tdbg" style="height:80%;"></div></td>

 

爲第一個柱形div標號 id = firstcolumn.

 

javascript代碼修改height屬性

<input type="button" value="change" οnclick="change()"/>
<script language="javascript" src="include/prototype.js" type="text/javascript"></script>
<script>
var times = 0;
function change(){
	add(times);
	times = times+5;
}
function add(time){
	var firstColumn = $('firstcolumn');
	firstColumn.style.height = time+'%';
}
</script>

 

 

現在大功告成 點擊change按鈕就可改變第一個柱形的高度了～

實際應用中可以由ajax技術來控制柱形的變化。例如一個帶ajax功能的函數每隔一段時間向後臺請求一次，獲得最新的數據信息之後再做柱形圖高度的同步，還不錯吧。