ASP.NET的应用已经越来越多，现在我们一起研究使用图形编程在ASP.NET中实现一个带超链接的饼图。
功能需求
现提出如下需求，
在ASP.NET的程序中显示一个二维的椭圆形的饼图界面。
其中每一个饼块具有提示文本和一个超链接。
当用户鼠标移动到某个饼块时浏览器会显示一些提示文本。
当用户点击该饼块则链接到其他页面使得页面能显示和该饼块相关的详细信息。
该软件的用户界面如图所示
运行软件
根据软件功能需求，我已经开发出了这个软件，首先演示运行一下这个软件，给大家一个直观的了解。
演示程序中有一个pie.aspx的页面。该页面就包含了一个带超链接的饼图对象，在浏览器中打开这个页面，可以看到如下的用户界面
这个页面中显示一个饼图，每一个扇型都显示数据库中一个客户的总订单金额，总共显示了10个客户。我们鼠标移动到一个饼图项目上，可以显示出这个客户的名称和订单金额。当鼠标点击饼图项目时，就会链接到另外一个页面。该页面也显示一个饼图，其中的项目用于显示单个订单的金额。鼠标放在某个项目上可以看到订单的时间，地点，订单人姓名和订单金额。
在这里，第一个页面为主页面，第二个页面为明细页面。我们察看主页面的HTML代码，可以看到代码为
<img src='pieimage.aspx?name=pie_customers' usemap='#dea88afea25748bda1ae28aa3e260d1a'
border='0' />
<map name="dea88afea25748bda1ae28aa3e260d1a">
<area shape="poly" coords="200,150,399,145,400,150," href="pie_orders.aspx?customerid=ALFKI"
title="客户名称:三川实业有限公司订单金额:518.7 点击察看该客户订单的详细情况" />
<area shape="poly" coords="200,150,397,125,399,135,399,145," href="pie_orders.aspx?customerid=ANATR"
title="客户名称:东南实业订单金额:2581.95 点击察看该客户订单的详细情况" />
<area shape="poly" coords="200,150,372,73,376,79,380,85,384,92,387,98,390,105,393,111,395,118,397,125,"
href="pie_orders.aspx?customerid=ANTON" title="客户名称:坦森行贸易订单金额:7023.97 点击察看该客户订单的详细情况" />
<area shape="poly" coords="200,150,269,9,285,14,300,20,314,27,328,34,340,43,352,52,362,62,372,73,"
href="pie_orders.aspx?customerid=AROUT" title="客户名称:国顶有限公司订单金额:12899.15 点击察看该客户订单的详细情况" />
</map>
我们使用图片来显示饼图图形，使用map元素来在图片上设置提示文本和超链接，使用多边形来模拟扇形的超链接区域。明细页面也类似。
关注此文的读者还看过：
