asp.net中图形图像开发--关于使用图形图表的使用 VS2005和VS2008 + asp.net

本是古典何须时尚 2022-08-07 07:45 38阅读 0赞

之前项目中需要用到关于图形图表的统计，当时的项目是在 vs2005 上面进行的，就算微软的 mschar 控件已经出来了，当时也没有考虑，最后在网上找到了一个开源的图形图表 dll ，使用也是比较简单方便的！当然，还有其他的类似 webchar ，或者其他的，但是其他的 dll 不开源，或者收费，或者使用麻烦，或者功能不够强大！

在 vs2005 上面使用 ZedGraph 的总结

1.        优点：使用简单，直接添加引用 ZedGraph.dll 好玩 ZedGraph.Web.dll 两个 dll 就可以，因为该项目是开源的，所以可以自己修改代码以后再进行编译成新的 dll ！

2.        我到目前发现的缺点就是不能控制 y 轴的条形图的大小，当条形图的数量很少的时候，就会自动变得很大条，非常不美观！

3.        下面是使用方法和代码

我主要是利用一个页面 char.aspx 显示处理，所有的数据放在 session 里面，然后在显示图形的页面 showimg.aspx 加个 html 或者 asp.net 的 img 控件，使之的 src 为 char.aspx ，当然，数据的处理还是在 showimg.aspx 进行处理，比如成立 x 轴和 y 轴的数据， title 的数据， legend 的数据等！

char.aspx

//注册画图事件 private void InitializeComponent() \{ this.ZGWPic.RenderGraph += new ZedGraph.Web.ZedGraphWebControlEventHandler(this.OnRenderGraph);//注册事件 this.Load += new System.EventHandler(this.Page\_Load); \} //定义颜色 /\*\*/ /// 默认颜色种类 List<Color> defaultColors = new List<Color>(); /\*\*/ /// 初始化颜色数组 protected void InitDefaultColors() \{ defaultColors.Add(Color.Blue); defaultColors.Add(Color.Red); defaultColors.Add(Color.Green); defaultColors.Add(Color.Yellow); defaultColors.Add(Color.YellowGreen); defaultColors.Add(Color.Brown); defaultColors.Add(Color.Aqua); defaultColors.Add(Color.Cyan); defaultColors.Add(Color.DarkSeaGreen); defaultColors.Add(Color.Indigo); \} //画图主程序 protected void OnRenderGraph(ZedGraphWeb zgw, Graphics g, MasterPane masterPane) \{ // Get the GraphPane so we can work with it GraphPane myPane = masterPane\[0\]; myPane.Title.FontSpec.Family = "Times New Roman"; myPane.Title.Text = Session\["myPaneTitle"\].ToString(); myPane.XAxis.Title.Text = Session\["myPaneXAxis"\].ToString(); myPane.YAxis.Title.Text = Session\["myPaneYAxis"\].ToString(); 將DataTable從前一頁利用Session傳入 List<PointPairList> objListPointPair = (List<PointPairList>)Session\["objListPointPair"\]; List<string> objlistBarItem = (List<string>)Session\["objlistBarItem"\]; InitDefaultColors(); //draw bar for (int i = 0; i < objlistBarItem.Count; i++) \{ BarItem myCurve = myPane.AddBar(objlistBarItem\[i\], objListPointPair\[i\], defaultColors\[i\]);//objlistBarItem\[i\]为右上角的小图 myCurve.Bar.Fill = new Fill(defaultColors\[i\], Color.White, defaultColors\[i\],0f); //0f标识白色垂直 \} // Set the legend to an arbitrary location myPane.Legend.Position = LegendPos.Float; myPane.Legend.Location = new Location(0.98f, 0.02f, CoordType.PaneFraction, AlignH.Right, AlignV.Top); myPane.Legend.FontSpec.Size = 9f; myPane.Legend.IsHStack = false; //设置x轴的文字 myPane.XAxis.MajorTic.IsBetweenLabels = true; myPane.XAxis.Scale.TextLabels = (string\[\])Session\["labels"\]; myPane.XAxis.Type = AxisType.Text; myPane.XAxis.Scale.FontSpec.Size = 10;//x线字体 if (myPane.XAxis.Scale.TextLabels.Length > 4) myPane.XAxis.Scale.FontSpec.Angle = 90;//x轴文字垂直显示（0为非垂直，90为垂直） //设置背景 myPane.Fill = new Fill(Color.White, Color.FromArgb(200, 200, 255), 45.0f); myPane.Chart.Fill = new Fill(Color.White, Color.LightSeaGreen, 90.0f); masterPane.IsFontsScaled = true;//图比例变化时候图表上的文字是否跟着自动缩放 masterPane.AxisChange(g); // 创建每条bar的label,其中第2个参数表示是否显示在bar的中心位置，第3个参数表示label的排列方向 BarItem.CreateBarLabels(myPane, false, "f0"); \}

在赋值的 showimg.aspx 页面

//绑定图形的数据源 protected void GetImgRes() \{ //绑定标题 Session\["myPaneTitle"\] = "统计)"; Session\["myPaneXAxis"\] = "日期"; Session\["myPaneYAxis"\] = "次数"; ZedGraph.PointPairList list11 = new ZedGraph.PointPairList(); ZedGraph.PointPairList list21 = new ZedGraph.PointPairList(); ZedGraph.PointPairList list31 = new ZedGraph.PointPairList(); ZedGraph.PointPairList list41 = new ZedGraph.PointPairList(); DataTable dt = GetDataTable(); string\[\] labels = new string\[dt.Rows.Count\]; double x = 0; int nl = 0; foreach (DataRow dataRow1 in dt.Rows) \{ list11.Add(x, Convert.ToDouble(dataRow1\["Search"\])); list21.Add(x, Convert.ToDouble(dataRow1\["Browse"\])); list31.Add(x, Convert.ToDouble(dataRow1\["Collect"\])); list41.Add(x, Convert.ToDouble(dataRow1\["DownLoad"\])); labels\[nl\] = dataRow1\["objectDay"\].ToString(); //长度过长 if (labels\[nl\].Length > 15) labels\[nl\] = labels\[nl\].Remove(15) + "..."; x += 1.0; nl++; \} //返回y轴的bar List<ZedGraph.PointPairList> objListPointPair = new List<ZedGraph.PointPairList>(); objListPointPair.Add(list11); objListPointPair.Add(list21); objListPointPair.Add(list31); objListPointPair.Add(list41); Session\["objListPointPair"\] = objListPointPair; //返回x轴的文字 List<string> objlistBarItem = new List<string>(); objlistBarItem.Add("文本1"); objlistBarItem.Add("文本2"); objlistBarItem.Add("文本3"); objlistBarItem.Add("文本4"); Session\["objlistBarItem"\] = objlistBarItem; //x轴的下列值 Session\["labels"\] = labels; \}

二．微软的asp.net mschar 控件的使用

首先，说一下开发的环境

Vs2008 framework3.5   framework3.5Sp1 iis6.0

MSChart.exe 就是图表控件的安装程序；

MSChartLP\_chs.exe 是语言包；

MsChart\_VisualStudioAddon.exe 是扩展安装，可以在vs2008 里看到控件

还需要在开发的C 盘建立一个临时文件夹:TempImageFiles;

据说该控件是微软收购的，来源于[http://www.dundas.com/][http_www.dundas.com]

![2813B5D.jpg][]

上面这张表中所示的就是一张图表的所有组成。   
 从中我们可以看出，图表的五大元素为：附注（Annotations ）、图表区（ChartAreas ）、图例（Legends ）、列（Series ）、标题(Titles) 。

后来为了查清楚图形相关的东西，主要是图形的类型，比如有常见的柱形图，条形图，饼图，折线图，其他的不常见的是一些泡泡图，区域图等，详细可以看看excel 里面的图形，后来还研究了一下图形的设计，比如饼图，一般不能超过10 项饼块，超过的需要用其他来计算，还有各种条形图的美观和颜色搭配等等。

根据使用对比，个人总结微软mschar 的特性：

1.    x 轴的下标能够通过处理（分两行）显示更多的文字，也可以通过处理文字的显示角度显示更多的文字！

2.    能通过交互操作掩藏图形，也可以通过图例掩藏任何一个图形！

3.    图片上的五大元素都可以进行属性设置，加上链接和tip 或者ajax 交互！

4.    可以通过z 值设置单个图形内的所有系列的交替，也可以设置单个页面的各个图形的交替！

5.    控件的数据源可以使任何数据，excel ，xml ，sql 等，当然也可以是数组或者其他的形式等！

6.    特殊的数据处理，比如数据位0 的时候

7.    可以很方便的再2d 和3d 之间进行切换，根据x y  轴进行排序，

Chart controls  的其它特色：

•    浏览器或报表中的图片，使用者可直接按鼠标右键存成图档。

•    透过 AJAX  技术，使用者在图表中做各种点选或鼠标操作时，会动态出现相关提示、额外的数据或信息。

•    透过 AJAX  技术，可让图表及里面的数据，每秒钟都持续一直更新。

•    也可以内建金融类及特定领域的图表，有现成的样板可直接套用在项目中。

关于数据绑定的问题，看以下这张表就了解了！

在讲绑定之前，先给大家看一张表，这张表介绍了在什么样的情况下用什么样的绑定方法，十分有用。

![28142E8.jpg][]

用zendgraph的截图

![zegroph.jpg][] ![Statchar.png][]

asp.net3.5的截图

![.JPG][] ![基本图形][.JPG 1]

最后，把相关的地址都附上！

(1)    Microsoft Chart Controls for Microsoft .NET Framework 3.5 :  
 [http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c ][http_www.microsoft.com_downloads_details.aspx_displaylang_zh-cn_FamilyID_130f7986-bf49-4fe5-9ca8-910ae6ea442c]  
 包含 ASP.NET  和 Windows Forms  图表控件的核心安装程序   
  
(2) Microsoft Chart Controls for Microsoft .NET Framework 3.5  语言套件  :  
 [http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=581ff4e3-749f-4454-a5e3-de4c463143bd ][http_www.microsoft.com_downloads_details.aspx_displaylang_zh-cn_FamilyID_581ff4e3-749f-4454-a5e3-de4c463143bd]  
  
(3) Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008 :  
 [http://www.microsoft.com/downloads/details.aspx?FamilyId=1D69CE13-E1E5-4315-825C-F14D33A303E9&displaylang=en ][http_www.microsoft.com_downloads_details.aspx_FamilyId_1D69CE13-E1E5-4315-825C-F14D33A303E9_displaylang_en]  
 安装后可与 VS 2008  有效地整合，并可在 VS 2008  工具箱中，支持 ASP.NET 、Windows Forms  的 IntelliSense  功能   
  
(4) Microsoft Chart Controls for .NET Framework Documentation :  
 [http://www.microsoft.com/downloads/details.aspx?FamilyId=EE8F6F35-B087-4324-9DBA-6DD5E844FD9F&displaylang=en ][http_www.microsoft.com_downloads_details.aspx_FamilyId_EE8F6F35-B087-4324-9DBA-6DD5E844FD9F_displaylang_en]  
Chart controls  的 documentation 、API  英文文件 (chm  格式 )  
  
(5) Samples Environment for Microsoft Chart Controls :  
 [http://code.msdn.microsoft.com/mschart ][http_code.msdn.microsoft.com_mschart]  
 提供超过 200  个示例，可用 VS 2008  直接开启网站后执行，务必下载玩看看   
  
(6) Windows Forms-ASP.NET Chart Control .NET Development MSDN Forums :  
 [http://social.msdn.microsoft.com/Forums/en-US/MSWinWebChart/threads/ ][http_social.msdn.microsoft.com_Forums_en-US_MSWinWebChart_threads_]

参考blog ：

使用总结：

[http://www.ntdrv.cn/Blog/Article.aspx?ID=2037 ][http_www.ntdrv.cn_Blog_Article.aspx_ID_2037]

使用例子：

[http://www.cnblogs.com/bluetiger/archive/2009/03/02/1401457.html ][http_www.cnblogs.com_bluetiger_archive_2009_03_02_1401457.html]

代码例子：

[http://www.cnblogs.com/liubiqu/archive/2009/01/05/1368892.html ][http_www.cnblogs.com_liubiqu_archive_2009_01_05_1368892.html]

[http_www.dundas.com]: http://www.dundas.com/
[2813B5D.jpg]: /images/20220805/3f937fac31354ae5bb7cfaa7a0941f5a.png
[28142E8.jpg]: /images/20220805/e622472a75154a7bb20cfca9132ce78e.png
[zegroph.jpg]: https://p-blog.csdn.net/images/p_blog_csdn_net/paolei/EntryImages/20090820/zegroph.jpg
[Statchar.png]: /images/20220805/60d45bdd022949178f093ee276b4849b.png
[.JPG]: https://p-blog.csdn.net/images/p_blog_csdn_net/paolei/EntryImages/20090820/基本交互.JPG
[.JPG 1]: https://p-blog.csdn.net/images/p_blog_csdn_net/paolei/EntryImages/20090820/基本图形.JPG
[http_www.microsoft.com_downloads_details.aspx_displaylang_zh-cn_FamilyID_130f7986-bf49-4fe5-9ca8-910ae6ea442c]: http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c
[http_www.microsoft.com_downloads_details.aspx_displaylang_zh-cn_FamilyID_581ff4e3-749f-4454-a5e3-de4c463143bd]: http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=581ff4e3-749f-4454-a5e3-de4c463143bd
[http_www.microsoft.com_downloads_details.aspx_FamilyId_1D69CE13-E1E5-4315-825C-F14D33A303E9_displaylang_en]: http://www.microsoft.com/downloads/details.aspx?FamilyId=1D69CE13-E1E5-4315-825C-F14D33A303E9&displaylang=en
[http_www.microsoft.com_downloads_details.aspx_FamilyId_EE8F6F35-B087-4324-9DBA-6DD5E844FD9F_displaylang_en]: http://www.microsoft.com/downloads/details.aspx?FamilyId=EE8F6F35-B087-4324-9DBA-6DD5E844FD9F&displaylang=en
[http_code.msdn.microsoft.com_mschart]: http://code.msdn.microsoft.com/mschart
[http_social.msdn.microsoft.com_Forums_en-US_MSWinWebChart_threads_]: http://social.msdn.microsoft.com/Forums/en-US/MSWinWebChart/threads/
[http_www.ntdrv.cn_Blog_Article.aspx_ID_2037]: http://www.ntdrv.cn/Blog/Article.aspx?ID=2037
[http_www.cnblogs.com_bluetiger_archive_2009_03_02_1401457.html]: http://www.cnblogs.com/bluetiger/archive/2009/03/02/1401457.html
[http_www.cnblogs.com_liubiqu_archive_2009_01_05_1368892.html]: http://www.cnblogs.com/liubiqu/archive/2009/01/05/1368892.html