<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
統計圖（餅圖、柱圖、線型圖）我們在應用程序中常常會用到。它可以幫助我們很直觀、很清
晰的查看數據中各部分所佔的比例或發展趨勢。如果數據的分類很細,且每個大類下邊可能包含若干
個小類（如圖） 。
如果想使用餅圖來比較全面、清晰的顯示數據的結構與構成，就不能只顯示小類部分，最好是
可以首先在一個 WebForm中顯示數據中所有大類的構成，然後通過點擊相應的餅塊再顯示各自
大類中小類的組成情況。當然，解決問題的方法有很多種，這裏介紹了一種最普通的解決方案來實
現這個功能。
我們平時製作餅圖也有相當多的方法，比如可以使用OWC（Office Web Compent），即
Microsoft的Office Web組件或者使用SVG來實現等等。我們這裏使用最爲普通的方法,就是利用
Microsoft .NET Framework提供的豐富的GDI+類和對象可以很輕鬆地實現這一功能。ASP.NET
之所以能夠在客戶端瀏覽器中形成各種數據圖片，是因爲在ASP.NET中提供了繪圖功能，具體的作
法是先在服務器端創建一個Bitmap實例，然後利用ASP.NET中提供的繪圖功能，按照要生成的圖片
的模樣，進行繪製，最後把繪製好的實例以數據流的方式傳送到客戶端的瀏覽器上，並形成圖片顯
示出來。具體可以查看孟憲會的《在ASP.NET中動態創建柱狀圖和餅圖》，這裏暫借孟大哥的
這個例子吧：） 。
使用這種方法可以繪出很漂亮的圖形，但是，有一個缺點，就是這些圖形沒有超級連
接，所以不可以直接連接到任何WebForm頁面。要實現這個功能，就要給這些靜態的圖片增加超級
連接的功能。在圖片上增加超級連接可以動態的再圖片上增加“熱區” ！這就是影像地圖，影像
地圖（Image Map）是一幅被劃分爲若干區域或“熱區”（hotspots）的圖像，單擊“熱區”時一
頁網頁就顯示出來。
熱區（hotspots）的組成很簡單，它們分別是規則四邊形，圓形，不規則多邊形。在HTML
中，分別爲：
u 四 邊 形：<area href="http://" shape="rect" coords="345, 173, 512, 204">
u 圓 形：<area href="http://" shape="circle" coords="195, 213, 85">
u 不規則多邊形：<area href="http://" shape="polygon" coords="267, 155, 248, 182, 288, 184">
我們就是要在動態生成的圖像上構建熱區（hotspots） 。
在孟大哥的這個例子中，形成了如下的圖形：
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />
我們就是要在這個圖形上，添加熱區。我們可以先建立一個類：
Class Map
Public Function getImageMap() As String
Dim arrValues(5) As Integer
Dim m_Links(arrValues.Length - 1) As String
Dim CenterPoint As Point() = New Point(arrValues.Length - 1) {}
Dim point0 As Point() = New Point(arrValues.Length - 1) {}
Dim Point1 As Point() = New Point(arrValues.Length - 1) {}
Dim sglTotalValues As Single = 0
Dim i As Integer = 0
Dim objBitMap As New Bitmap(400, 200)
Dim symbolLeg As PointF = New PointF(335, 20)
Dim descLeg As PointF = New PointF(360, 16)
For i = 0 To arrValueNames.Length - 1
point0(i).X = symbolLeg.X
point0(i).Y = symbolLeg.Y
Point1(i).X = symbolLeg.X + 20
Point1(i).Y = symbolLeg.Y + 10
m_Links(i) = "#"
symbolLeg.Y += 15
descLeg.Y += 15
Next i
Dim M1 As Integer() = New Integer(5) {267, 277, 277, 272, 262, 255}
Dim M2 As Integer() = New Integer(5) {155, 149, 142, 136, 148, 102}
Dim M3 As Integer() = New Integer(5) {248, 299, 313, 288, 226, 227}
Dim M4 As Integer() = New Integer(5) {182, 175, 139, 102, 143, 133}
Dim M5 As Integer() = New Integer(5) {288, 314, 297, 263, 238, 266}
Dim M6 As Integer() = New Integer(5) {184, 150, 105, 100, 178, 140}
Dim m_imageMap As String
m_imageMap = "<map name='imgMap'>" + vbCrLf
For i = 0 To arrValues.Length - 1
m_imageMap = m_imageMap + "<area href='" + m_Links(i) + "' shape='rect' coords='" + point0(i).X.ToString() + "," + point0(i).Y.ToString() + "," + Point1(i).X.ToString() + "," + Point1(i).Y.ToString() + "' alt='" + arrValueNames(i) + "'>" + vbCrLf
Next
For i = 0 To arrValues.Length - 1
m_imageMap = m_imageMap + "<area href='" + m_Links(i) + "' shape='polygon' coords='" + M1(i).ToString() + "," + M2(i).ToString() + "," + M3(i).ToString() + "," + M4(i).ToString() + "," + M5(i).ToString + "," + M6(i).ToString + " ' alt='" + arrValueNames(i) + "'>" + vbCrLf
Next
m_imageMap = m_imageMap + "</map>"
Return m_imageMap
End Function
End Class
在AspxChart.aspx頁面中Page_Load方法中，定義一個Map類的對象：
Dim mapHot As New Map
Response.Write(mapHot.getImageMap())
這樣就可以增加熱區了，通過m_Links(i)變量可以給每個熱區增加任意的連接路徑（本例中
爲空連接）。在這個例子中的多邊形熱區並不是動態加入的，而是使用”硬編碼”寫到程序當中
的。這顯然並不是我們想要的，但動態產生這些熱區，很複雜，小弟計算了很久，都不是很精
確！！希望各位朋友可以幫助我解決這個問題！
運行AspxChart.aspx頁面，可生成如下新的HTML代碼：
以上代碼就是產生的熱區！
在圖像中通過以下語句與熱區相關聯：
這樣便可以實現最初所提出的問題！
可以寫信與我聯繫：[email protected]