首先是输出img标签，然后输出一个map标签。
由于饼图项目可以带有超链接，这里就能生成map/area元素来在图片中定义热点，在HTML语法中，图片热点没有扇形区域种类，因此只好使用使用多边形来模拟扇形。也就是使用HTML标记”<area shape=poly coords=’多边形的顶点坐标’ />”来模拟扇形热点。
我们遍历所与的饼图项目，调用GetPoints函数获得模拟这个项目对应的扇形区域的点坐标，将这些点坐标数据填写到area元素的coord属性中，然后还填上title属性来显示提示文本，设置href属性来设置这个图片热点的超链接地址。
HTML文档输出完毕后我们获得这个XML字符串，去掉前面的XML声明头，然后就把这个XML字符串当作HTML字符串返回给主程序了。
GetPoints函数就是获得模拟扇形区域的点坐标，首先是根据饼图项目创建一个路径，调用路径的Flatten函数进行线段模拟运算，然后获得它的PathPoints属性，这个属性值是PointF类型的数组，需要转换为Point数组。
主页面 pie.aspx这个页面是演示程序的主页面，界面上放置一个名为lblResult的标签，察看它的C#代码也不复杂，主要是Page_Load方法，其代码为
| private void Page_Load(object sender, System.EventArgs e) { // 连接数据库 using( OleDbConnection conn = new OleDbConnection()) { conn.ConnectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + this.Server.MapPath("demomdb.mdb"); conn.Open(); // 查询数据库 using( OleDbCommand cmd = conn.CreateCommand()) { cmd.CommandText = @" select top 10 customers.customerid , customers.companyname as 客户名称, ( select sum( round( orderdetails.unitprice * orderdetails.quantity * ( 1.0 - orderdetails.discount) , 2 ) ) from orderdetails , orders where orderdetails.orderid = orders.orderid and orders.customerid = customers.customerid ) as 订单总金额 from customers"; OleDbDataReader reader = cmd.ExecuteReader(); // 创建饼图对象 PieShape pie = new PieShape(); pie.Width = 400 ; pie.Height = 300 ; System.IO.StringWriter writer = new System.IO.StringWriter(); while( reader.Read()) { string id = Convert.ToString( reader.GetValue( 0 )); double Value = Convert.ToDouble( reader.GetValue( 2 )); string Text = "客户名称:" + Convert.ToString( reader.GetValue( 1 )) + "\r\n订单金额:" + Convert.ToString( reader.GetValue( 2 )) + "\r\n点击察看该客户订单的详细情况" ; string Link = "pie_orders.aspx?customerid=" + id ; pie.Add( Value , Text , Link ); }//while reader.Close(); pie.RefreshState(); this.Session["pie_customers"] = pie ; this.lblResult.Text = pie.GetHtmlString("pieimage.aspx?name=pie_customers"); this.DataGrid1.DataSource = pie ; this.DataGrid1.DataBind(); } } } |
&
