制作带有超级连接的统计图

 

       统计图（饼图、柱图、线型图）我们在应用程序中常常会用到。它可以帮助我们很直观、很清

晰的查看数据中各部分所占的比例或发展趋势。如果数据的分类很细,且每个大类下边可能包含若干

个小类（如图） 。

 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

             

       如果想使用饼图来比较全面、清晰的显示数据的结构与构成，就不能只显示小类部分，最好是

可以首先在一个 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） 。

在孟大哥的这个例子中，形成了如下的图形：

 

 

我们就是要在这个图形上，添加热区。我们可以先建立一个类：

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]

本文地址：http://com.8s8s.com/it/it44806.htm