滿多人在問統計圖表的作法,
事實上,ASP.NET 3.5近來也有提供了 MS Chart Controls for .net 3.5
但各位有沒有想過:在沒有MS Chart controls 之前,以前的ASP、PHP、JSP的網頁程式,是怎麼繪製圖表的?
這個問題就跟以前的習題一樣( [習題]會員登入、會員專屬網頁、會員修改私人資料,怎麼寫?(#2 範例篇)),還沒有ASP.NET Login控制項的時候,我們用 Session一樣把會員的權限控制得很好。
老話重提:「你可以學最新的方法,也可以學一套老方法(但可以跨到PHP、JSP還是能用的老方法!)」
老酒好喝、老鞋子好穿、老朋友值得信賴。
現在我就以投票區為例,介紹「長條圖」的設計方法。
以下是給本書讀者的課後補充,會應用到一些 ADO.NET的手寫程式。可以放在本書第十四章當成課後習題。
如果是毫無基礎的初學者,突然看這一篇,可能會消化不良。請三思~.
本範例與完整說明,已經改寫成書本內的文章,
並集結出書,收錄 在「[新 書上市]ASP.NET專題實務II(下集):範例應用與4.0新功能」
=================================================
先來看看程式的執行結果吧。
首先就是一個簡單的投票畫面~

投票完成後,立刻會看見「得票數」。我用「長條圖」來展示之,這是本文的重點所在~~

以下就開始實作囉~
=================================================
第一、先設計投票區的 [資料表]。
投票區的資料表有很多種設計方法,一開始的規劃不同,後續的程式寫法會差距很大。
沒有什麼方法是最好的,要依照實際需求與自己的能力來規劃才行。
又是老話重提「不是你(初學者)不會寫程式。.....而是經驗不夠,你還不會自己規劃流程、設計資料表」。這要靠一點經驗。
我設計的這個資料表比較簡單,後續有機會介紹其他案例,我會規劃不同的資料表,來寫同一個投票的範例。
資料存放的樣子如下圖。

我的設計方法,是「每舉辦一次投票」當作一列記錄!
當User投票給一位候選人,就會撈出原本的票數,然後加一。 再回寫資料庫(以Update指令)
題外話,您也可以設計不同的資料表,讓每一次User投票,都是一筆記錄。然後透過 Select Count()的方式去統計得票數。
這也有好處,就是每一個人的投票,都可以記錄更多資訊起來(如:投票時間、IP來源、投票者的會員編號...等等)
下一篇文章會用這種方式設計Table,您可以比較一下程式將會有哪些變化?
不講了,快離題了!!.....Table Schema的設計,是一門大學問。
設計得好,程式就很好寫。 設計偏差了,寫程式的時候就會哭出來~
上述兩種Table設計方法各有優缺點.... 後續有機會介紹其他案例,我會規劃不同的資料表,來寫同一個投票的範例。
請看下一篇文章的說明。
=================================================
第二、投票畫面----HTML畫面設計 與 後置程式碼
很簡單,沒啥好說的!只有一個 RadioButtonList控制項與按鈕
後置程式碼也不難

後置程式碼也很簡單,就是一個 ADO.NET小程式而已,拿現成的範本改一下就搞定了(請看:DataReader的標準範例 for ASP.NET 2.0 / 3.5)
沒啥學問啦,因為一開始的資料表已經規劃成那樣,所以,寫程式要配合他
我的設計方法,是「每舉辦一次投票」當作一列記錄!
當User投票給一位候選人,就會撈出原本的票數(請看下圖的綠色框框),
然後加一。 再回寫資料庫(以Update指令。如下圖的藍色框框)。
藍色框框裡面的SQL指令有錯,請改成--Dim Update_SQLstr As String = "Update Vote_1 set vote_" & (i + 1) & " = " & (vote_no + 1)

至於最外圍的紅色框框是什麼意思呢?
那是因為我用 RadioButtonList 來作為投票選項,所以一定會用到這段固定的 For迴圈,講過N次囉。
如果您看不懂的話,請看以前的範例(是相同的作法):
=================================================
重點來囉!!!
第三、投票完成後,會立即看見「得票數」。
我們要用「長條圖」來展現他。這該怎麼作呢?.......遠比您想像的要簡單很多、很多.........別擔心~安啦!
HTML畫面上,只有一個 Label控制項而已。沒啥難度~

後置程式碼如下:
一樣是自己手寫一小段 ADO.NET的 DataReader程式就完成了。
不是蓋你的, ADO.NET程式真的很好用,自己修改一下就能完成很多功能。
只會拉一拉 SqlDataSource、AccessDataSource的人,雖然好用,但一下子就會遇見瓶頸!就會碰壁!
[廣告]市面上的 ASP.NET書籍,只有我的書介紹完 ADO.NET的觀念後,補一大章 ADO.NET的各種手寫範例!
不快快買來看,那損失大了

所謂的「長條圖」,不過是把HTML語法裡面的圖片(<img>)拿來改一下而已。
得票越多,那張圖片就越長,所以這張圖片的寬度(width)隨隨得票數而變長。
圖片本身的大小是 1(寬) x 10(高)......透過 Width寬度的設定,來把它拉長而已~
很簡單!對吧!
學會這一招 + ADO.NET手寫程式,你以後要轉型到ASP、PHP、JSP都OK啦。
因為PHP、JSP在存取資料庫時,用法跟 ADO.NET也差不多,
就是那四大流程啊~....請看我以前的文章:初探ADO.NET #1,程式與資料庫互動的四大步驟
老話重提:「你可以學最新的方法,也可以學一套老方法(但可以跨到PHP、JSP還是能用的老方法!)」
老酒好喝、老鞋子好穿、老朋友值得信賴。
=================================================
這個範例很淺!
說穿了,只有一個重點,就是「長條圖」是怎麼變出來的?
其他的東西呢?都是以前學過的範例,拿出來重新組合一遍而已。
可見得把自己基礎打好,後來千變萬化絕對不是問題!
如果不打好基礎,只想四處蒐集範例來修修改改。
老話一句,程式碼送你,別說會改了。連安裝上去都不會運作勒!
P.S. 本範例日後如果收錄在書籍裡面,會解釋的更細緻。設定的步驟,也會一步一步,逐一抓圖詳解!
網路上的文章,圖片太多既佔流量、速度也慢。 請見諒~~
下面這本書,一定可以幫你打好基礎!
不然的話,沒辦法在上市四個月內(2008/8月至11月底為止),
仍然是天瓏書局裡面,唯一「一本」還停留在 排行榜20名以內 的 ASP.NET書籍!
ASP.NET專題實務
(文魁出版 / P8187)
後續補充:
本範例與完整說明,已經改寫成書本內的文章,
並集結出書,收錄 在「[新 書上市]ASP.NET專題實務II(下集):範例應用與4.0新功能」
好久沒放今日值班正妹了,松島楓
.....聽說很多男人心目中的女神,好像復出了! (圖片來源: Google)
點圖可放大!
此圖出處的 原始網頁: forum.coolaler.com/showthread.php?t=124913
...... 寄信給我 mis2000lab (at) 雅虎.com.台灣 ................................................................................................................
ASP.NET專題實務
(文魁出版,VB版 P8187 / C#版P09027)
下集已經出版囉~~~ASP.NET專題實務II:範例應用與4.0新功能 
.............................................................................................................. 寄信給我 mis2000lab (at) 雅虎.com.台灣 ........