统计图（饼图、柱图、线型图）我们在应用程序中常常会用到。它可以帮助我们很直观、很清
晰的查看数据中各部分所占的比例或发展趋势。如果数据的分类很细 , 且每个大类下边可能包含若干
个小类（如图） 。
如果想使用 饼图 来比较全面、清晰的显示数据的结构与构成，就不能只显示小类部分，最好是
可以首先在一个 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 四 边 形：
1<area coords="345, 173, 512, 204" href="http://" shape="rect"/>
u 圆 形：
1<area coords="195, 213, 85" href="http://" shape="circle"/>
u 不规则多边形：
1<area coords="267, 155, 248, 182, 288, 184" href="http://" shape="polygon"/>
我们就是要在动态生成的图像上构建 ** 热区（ ** ** hotspots ** ** ） ** ** ** ** 。 **
在孟大哥的这个例子中，形成了如下的图形：
我们就是要在这个图形上，添加热区。我们可以先建立一个类：
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 = "
1<map name="imgMap">" + vbCrLf
2
3For i = 0 To arrValues.Length - 1
4
5m_imageMap = m_imageMap + "<area alt='" + arrValueNames(i) + "' coords='" + point0(i).X.ToString() + "," + point0(i).Y.ToString() + "," + Point1(i).X.ToString() + "," + Point1(i).Y.ToString() + "' href='" + m_Links(i) + "' shape="rect"/>" + vbCrLf
6
7Next
8
9For i = 0 To arrValues.Length - 1
10
11m_imageMap = m_imageMap + "<area alt='" + arrValueNames(i) + "' coords='" + M1(i).ToString() + "," + M2(i).ToString() + "," + M3(i).ToString() + "," + M4(i).ToString() + "," + M5(i).ToString + "," + M6(i).ToString + " ' href='" + m_Links(i) + "' shape="polygon"/>" + vbCrLf
12
13Next
14
15m_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 代码：
<SPAN style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-ascii-font-family: ËÎÌå;