餅圖 在 Web 頁面中使用圖表（chart）表現資料
在 Web 編程中經常需要做的一件事情就是把從資料庫中查出的資料（數字）使用圖表（chart）的形式在頁面中表現出來。下面我們簡單總結幾種常見的做法。
1. 如果圖表的樣式只需要直條圖（bar）就可以的話，有一種非常簡單，偷懶的方法，即使用某些 tag 的 width 屬性來表現就可以。舉例如下：
<IMG HEIGHT=5 WIDTH=<%= 數值 %> SRC=http://www.163design.net/a/q/"小方塊.gif">
用這種思路，要是不嫌難看的話，你乾脆用 for 迴圈控制 * 號的顯示個數也未嘗不可。;-)
如果想比較美觀的話，可以把 CSS 設計的好一些，再和 DHTML 結合。
這種方法的一個完整的例子見：
http://www.microsoft.com/workshop/database/datavis/datavis.asp
2. 一些老兄喜歡直接把圖片放在資料庫中，那我們看看怎麼把它們調出來。
（如果這些圖片正好是圖表的話，我就不算離題。;-)）
IIS 的線上協助中有這麼個例子：
http://localhost/IIsSamples/SDK/asp/docs/CodeBrws.asp?source=/IIsSamples/SDK/asp/Database/Blob_VBScript.asp
其核心代碼：
<%
' 聲明回傳的是 Gif 檔案，不是平常的 HTML
Response.Buffer = TRUE
Response.ContentType = "image/gif"
' 連資料庫
Set oConn = Server.CreateObject("ADODB.Connection")
oConn.Open "DSN=LocalServer;UID=sa;PWD=;DATABASE=pubs"
' 查出存好的圖片
Set oRs = oConn.Execute("SELECT logo FROM pub_info WHERE pub_id='0736'")
' 取值要顯得專業些 ;-)
PicSize = oRs("logo").ActualSize
Pic = oRs("logo").GetChunk(PicSize)
' 再次強調回傳的是 gif 圖片，view source 是什麼都看不到的
Response.BinaryWrite Pic
Response.End
%>
好，仔細看注釋的老兄（我可沒這好習慣;-)）會問：這支程式 mypic.asp 在瀏覽器中最後的效果
相當於 mypic.gif，我想要有文字怎麼辦？
很簡單，寫個 web page 中間加上 <img src=mypic.asp> 不就完了。 ;-)
3. 還有些老兄更甚，這些大俠的機器多半是 8 CPU 的 P III，他們使用 server-side 軟體，
比如 excel，現做一個 chart 圖片，然後以 gif 格式傳給瀏覽器。多見於 CGI 高手。;-)
我們來看一個這樣的 cool demo。
核心代碼：
<%
Set excel = GetObject("","Excel.Application")
If Err.Number <> 0 Then
Response.Write("Could not create Excel document. " + Err.Description+"")
Err.Clear
End If
excel.DisplayAlerts = False
Set workbooks = excel.Workbooks
Set wb = workbooks.Add
Set sheets = wb.Sheets
Set wsTotal = sheets.Add( ,,,-4167)
wsTotal.Name = "Total_Expenses"
Set range = wsTotal.Range("B1")
range.FormulaR1C1 = "1"
Set range = wsTotal.Range("C1")
range.FormulaR1C1 = "2"
Set range = wsTotal.Range("D1")
range.FormulaR1C1 = "3"
wsTotal.Activate
wsTotal.Select
Set range = wsTotal.Range("B1:D1")
excel.Charts.Add
excel.ActiveChart.ChartType = 51
excel.ActiveChart.SetSourceData range,2
excel.ActiveChart.Export "d:\test\exceltest"+".gif","GIF"
Response.Write "<img src=http://www.163design.net/a/q/d:/test/exceltest.gif>"
%>
真正的懶人在寫這段代碼時還利用 excel 的 vba（:-P），絕對代碼快槍手，可是運行效率----呸！;-)
4. 好了，該看一看專業運動員的做法了----使用 chart control。
哪種控制項更好大家見仁見智，（比如有些老兄喜歡 Java Applets ;-) 還有些老兄喜歡自己用 C/C++ 開發）為簡化起見，這裡我推薦微軟（;-)）的----Office 2000 Web Component。;-)
在前面一文中我介紹過控制項與資料結合的幾種方式，我們來一一分析用 Excel 2000 的 chart control 如何?。
A. 逐行賦值法
Excel 2000 chart control 有兩種賦值方法：數組，字串。
數組法：
程式碼範例：
----------------------------------
<object id=ChartSpace1 classid=CLSID:0002E500-0000-0000-C000-000000000046 style="width:100%;height:350"></object>
<script language=vbs>
Sub Window_OnLoad()
Dim categories(3), values(3)
' 4 個分類
categories(0) = "White"
categories(1) = "Black"
categories(2) = "Asian"
categories(3) = "Latino"
' 準備活動 ;-)
ChartSpace1.Clear
ChartSpace1.Charts.Add
Set c = ChartSpace1.Constants
' 添加三個系列的值
ChartSpace1.Charts(0).SeriesCollection.Add
ChartSpace1.Charts(0).SeriesCollection.Add
ChartSpace1.Charts(0).SeriesCollection.Add
' 錦上添花 ;-)
ChartSpace1.Charts(0).SeriesCollection(0).Caption = "Perot"
' 設定
ChartSpace1.Charts(0).SeriesCollection(0).SetData c.chDimCategories, c.chDataLiteral, categories
values(0) = 0.2 ' The White value.
values(1) = 0.06 ' The Black value.
values(2) = 0.17 ' The Asian value.
values(3) = 0.13 ' The Latino value.
ChartSpace1.Charts(0).SeriesCollection(0).Caption = "Perot"
ChartSpace1.Charts(0).SeriesCollection(0).SetData c.chDimCategories, c.chDataLiteral, categories
ChartSpace1.Charts(0).SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values
' Series two contains election data for Clinton.
' Update the values array, then set the chart data.
values(0) = 0.38 ' The White
