页面被动态画有超连接的觊觎

近日生只品种,客户要求以客户端能动态显示不同年份数据,用折线图来表示,并且单击相关年份能查详细数据,这里就是闹只问题在眼前,要自数据库里动态变化折线图,并且不只有祈求,还能够好之操作。

浅析了转,可以经至少三种技术形成,一凡下javascript脚论我画图功能去实现,服务端的数据可就此Ajax来得到,这样即使完事了客户端动态画折线图显示各年数据了,但这种方式要求的客户端的脚本代码相对复杂,实现起来有必然的困难。另一样种办法是用插件技术实现,比如flash或silverlight,这种方式展现效果大好,问题是自家弗是正经的flash或silverlight手,实现多少难度。最后一种植是因自己之C#基本构成HTML来完成了。下面说说这种做法。

先是来构建客户端代码:

 

 1图片 1图片 2<%图片 3@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Index.aspx.cs” Inherits=”MediaAdSystem.Index” %>
 2图片 4
 3图片 5<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 4图片 6
 5图片 7<html xmlns=”http://www.w3.org/1999/xhtml” >
 6图片 8<head runat=”server”>
 7图片 9    <title>无标题页</title>
 8图片 10</head>
 9图片 11<body >
10图片 12
11图片 13图片 14<script language=”javascript” type=”text/javascript”>图片 15
12图片 16// <!CDATA[
13图片 17//通过滚动轮实现对图纸的缩放
14图片 18function ChangImg(o) 
15图片 19图片 20图片 21
16图片 22var zoom=parseInt(o.style.zoom, 10)||100;
17图片 23zoom+=event.wheelDelta/12;
18图片 24if (zoom>0)
19图片 25 o.style.zoom=zoom+’%’; 
20图片 26 //一个标签显示缩放百分比
21图片 27 document .getElementById (“bfb”).innerHTML =Math.floor(zoom) +”%”;
22图片 28return false; 
23图片 29
24图片 30// ]]>
25图片 31</script>
26图片 32    <form id=”form1″ runat=”server”>
27图片 33    <div>
28图片 34     </div>
29图片 35    <center >  
30图片 36        <table style=”width: 100%;”>
31图片 37            <tr>
32图片 38                <td>
33图片 39                    第一年:<asp:TextBox ID=”TextBox1″ runat=”server”>90</asp:TextBox> 
34图片 40                </td>
35图片 41                <td>
36图片 42                    第二年:<asp:TextBox ID=”TextBox2″ runat=”server”>46</asp:TextBox>  
37图片 43                </td>
38图片 44                <td>
39图片 45                    第三年:<asp:TextBox ID=”TextBox3″ runat=”server”>23</asp:TextBox> 
40图片 46                </td>
41图片 47            </tr>
42图片 48            <tr>
43图片 49                <td>
44图片 50                    第四年:<asp:TextBox ID=”TextBox4″ runat=”server”>123</asp:TextBox>  
45图片 51                </td>
46图片 52                <td>
47图片 53                    第五年:<asp:TextBox ID=”TextBox5″ runat=”server”>56</asp:TextBox>  
48图片 54                </td>
49图片 55                <td>
50图片 56                    第六年:<asp:TextBox ID=”TextBox6″ runat=”server”>333</asp:TextBox>  
51图片 57                </td>
52图片 58            </tr>
53图片 59        </table>    
54图片 60          <span id=”bfb”>100%</span><asp:Button ID=”Button6″ runat=”server” onclick=”Button1_Click” Text=”生成图表” />    
55图片 61        <br />
56图片 62        <asp:ImageMap ID=”ImageMap1″ onmousewheel=”return ChangImg(this)”  runat=”server”>
57图片 63        </asp:ImageMap>
58图片 64       </center>
59图片 65    </form>
60图片 66    </body>
61图片 67</html>
62图片 68

 

客户端主要是多少的录入,和Img图片标签之亮。我们发现,这里用的凡ImageMap,并非一般的Image,这是为我们要为此到ImageMap的Map的效力,通过点击相应年进该年的详细信息页面。还有一些哪怕是咱们可以于JS的函数中会赢得图片的缩放比例,显示在一个id为bfb的span标签及。

下来我们便管客户端的数据,通过后台代码生成ImageMap:

 

 1图片 69protected void Button1_Click(object sender, EventArgs e)
 2图片 70图片 71        图片 72{
 3图片 73图片 74            int[] intarr = new int[6] 图片 75{ int.Parse(TextBox1.Text), int.Parse(TextBox2.Text), int.Parse(TextBox3.Text) ,
 4图片 76                            int.Parse(TextBox4.Text), int.Parse(TextBox5.Text), int.Parse(TextBox6.Text)     };           
 5图片 77            int step = 80;
 6图片 78            //画热点的图片
 7图片 79            for (int i = 0; i < 6; i++)
 8图片 80图片 81            图片 82{
 9图片 83                CircleHotSpot Circ = new CircleHotSpot();
10图片 84                Circ.Radius = 5;
11图片 85                Circ.X = i*step+10;
12图片 86                Circ.Y = 340 – intarr[i];
13图片 87                Circ.NavigateUrl = “http://www.baidu.com?year="+i;
14图片 88                Circ.AlternateText = i.ToString ();
15图片 89                Circ.Target = “_blank”;
16图片 90                ImageMap1.HotSpots.Add(Circ);
17图片 91            }        
18图片 92            ImageMap1.ImageUrl = “image1.aspx?c1=” + TextBox1.Text + “&c2=” + TextBox2.Text + “&c3=” + TextBox3.Text + “&c4=” + TextBox4.Text + “&c5=” + TextBox5.Text + “&c6=” + TextBox6.Text;      
19图片 93        }
20图片 94

 

 

代码中的for语句用来变化热点,热点的个数控制让数。

接通下,我们看一下写图类,这个那个以本人下Ajax无全页面提交实现动态画图的篇章被说了,这里只有拿代码共享出来。

 

 1图片 95using System;
 2图片 96using System.Collections;
 3图片 97using System.Configuration;
 4图片 98using System.Data;
 5图片 99using System.Web;
 6图片 100using System.Web.Security;
 7图片 101using System.Web.UI;
 8图片 102using System.Web.UI.HtmlControls;
 9图片 103using System.Web.UI.WebControls;
10图片 104using System.Web.UI.WebControls.WebParts;
11图片 105using System.Drawing;
12图片 106using System.Drawing.Drawing2D;
13图片 107using System.Drawing.Imaging;
14图片 108
15图片 109public partial class image1 : System.Web.UI.Page
16图片 110图片 111图片 112{
17图片 113    protected void Page_Load(object sender, EventArgs e)
18图片 114图片 115    图片 116{
19图片 117        DrawMarket();
20图片 118    }
21图片 119图片 120    /**//// <summary>
22图片 121    /// 自动画折线图
23图片 122    /// </summary>
24图片 123    private void DrawMarket()
25图片 124图片 125    图片 126{
26图片 127        int[] ZbArr = new int[Request.QueryString.Count];
27图片 128        for (int i = 0; i < ZbArr.Length; i++)
28图片 129图片 130        图片 131{
29图片 132            ZbArr[i] = int.Parse(Request.QueryString[i]);
30图片 133        }
31图片 134        int width = 600, height = 360;
32图片 135        Bitmap bm = new Bitmap(width, height);
33图片 136        Graphics g = Graphics.FromImage(bm);
34图片 137        g.Clear(Color.White);
35图片 138        Brush b = new SolidBrush(Color.Green);
36图片 139        Pen p = new Pen(Color.Black,1.8f);
37图片 140        Pen p1 = new Pen(Color.Green, 2);
38图片 141        p.EndCap = LineCap.ArrowAnchor ;
39图片 142        //画坐标系
40图片 143        g.DrawLine(p, 10, 340, 540, 340);
41图片 144        g.DrawLine(p, 10, 340, 10, 10);
42图片 145        g.DrawString(“年”, new Font(“宋体”, 15, FontStyle.Bold), b, 545, 332);
43图片 146        int step = 80;
44图片 147        //画折线
45图片 148        GraphicsPath graphPath = new GraphicsPath();
46图片 149        Point[] point = new Point[ZbArr.Length];
47图片 150        for (int i = 0; i < point.Length; i++)
48图片 151图片 152        图片 153{
49图片 154            point[i].X = i * step + 10;
50图片 155            point[i].Y = 340 – ZbArr[i];
51图片 156        }
52图片 157        Pen blackPen = new Pen(Color.Black, 3);
53图片 158        graphPath.AddLines(point);
54图片 159        g.DrawPath(p, graphPath);
55图片 160        //画点
56图片 161        for (int i = 0; i < point.Length; i++)
57图片 162图片 163        图片 164{
58图片 165            g.DrawEllipse(p1, point[i].X – 5, point[i].Y – 5, 10, 10);
59图片 166        }        
60图片 167        bm.Save(this.Response.OutputStream, ImageFormat.Jpeg);
61图片 168        g.Dispose();
62图片 169        bm.Dispose();
63图片 170
64图片 171    }
65图片 172}
66图片 173

这种画图的意义相对来说明了,但出的希冀的机能不是太好,需要更进一步优化。

 

 

相关文章