在 ASP.NET MVC 中使用 Chart 控件

在 .NET 3.5 的时候,微软就提供了一个 Chart 控件,网络上有大量的关于在 VS2008 中使用这个控件的文章,在 VS2010 中,这个控件已经被集成到 ASP.NET 4.0 中,可以从工具箱中直接使用了。

 

这个控件在 ASP.NET 经典的页面中很容易使用,但是在 ASP.NET MVC 中使用,却会出现各种问题。

 

网上有的说可以这样处理,在 Global.asax 中增加一个方法。

 

1           protected   void  Session_Start()
2          {
3               string  id  =   this .Session.SessionID;
4          }

 

 

增加之后的结果是这样。

 

到底应该怎样解决呢?

 

由于我没有看到 Chart 的源码,从错误的提示信息来说,可以看到是在 Handler 处理中出现问题。

 

网络上有许多关于配置的文章,例如:

ScottGu 的 Built-in Charting Controls (VS 2010 and .NET 4 Series)

Michael Ceranski 的 Building a Dashboard Using The Microsoft Chart Controls

Delian Tchoparinov 的 Handling chart generated images using Chart Http Handler 

 

但是,很不幸,要么比较过时,大多数的配置在 VS2010 中是不需要的,要么没有解决问题。

 

在 ASP.NET MVC 中,处理程序的机制有了很大的变化,不再直接通过处理程序生成结果,而是经过了从处理程序到 Controler 到 Action 的多次传递。与 ASP.NET 经典模式完全不同。

 

Nic_Roche 在文章 Streaming Chart Images as FileResult from MVC Controllers 中提供了一个思路,在 View 中填入一个图片的引用 ,然后,通过一个 Action 返回这个图片。不过很不幸,下载之后,也没有通过。

 

方向没有错误,仅仅有一些小的地方需要注意。

 

下面,我们在 VS2010 中通过 ASP.NET MVC 实现一下。

 

1. 创建一个 ASP.NET MVC 项目。

2. 在 Index.aspx 这个 View 中插入一个图片的引用 ,引用的地址是一个 Action 。

< img src = " /Home/GetChart "  alt = " Chart "   />

 

3. 在项目的 Models 中增加一个 Model:StaticModel.cs,提供数据。

 

 1  using  System;
 2  using  System.Data;
 3  using  System.Configuration;
 4  using  System.Linq;
 5  using  System.Web;
 6  using  System.Web.Security;
 7  using  System.Web.UI;
 8  using  System.Web.UI.HtmlControls;
 9  using  System.Web.UI.WebControls;
10  using  System.Web.UI.WebControls.WebParts;
11  using  System.Xml.Linq;
12  using  System.Collections.Generic;
13 
14  namespace  mvcChart.Models
15  {
16       public   class  StaticModel
17      {
18           public   static  List < int >  createStaticData()
19          {
20              List < int >  c_data  =   new  List < int > ();
21              c_data.Add( 1 );
22              c_data.Add( 6 );
23              c_data.Add( 4 );
24              c_data.Add( 3 );
25               return  c_data;
26          }
27      }
28  }
29 

 

4. 为 Home 的 Controler 增加一个名为 GetChart 的 Action。

    注意:

      1. 这个 Action 返回的类型是一个 FileResult ,也就是返回一个文件,在这个方法中,使用 FileResult 的派生类 FileStreamResult 通过流返回图片。  

      2. 在 33 行,将流的当前位置重新设置到起始位置,以便读取生成的图片数据。imageStream.Position = 0;

 

 

 

 1    public  FileResult GetChart()
 2          {
 3              List < int >  data   =  Models.StaticModel.createStaticData();
 4              System.Web.UI.DataVisualization.Charting.Chart Chart2  =   new  System.Web.UI.DataVisualization.Charting.Chart();
 5              Chart2.Width  =   412 ;
 6              Chart2.Height  =   296 ;
 7              Chart2.RenderType  =  System.Web.UI.DataVisualization.Charting.RenderType.ImageTag;
 8              Chart2.Palette  =  ChartColorPalette.BrightPastel;
 9              Title t  =   new  Title( " IMG source streamed from Controller " , Docking.Top,  new  System.Drawing.Font( " Trebuchet MS " 14 , System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb( 26 59 105 ));
10              Chart2.Titles.Add(t);
11              Chart2.ChartAreas.Add( " Series 1 " );
12               //  create a couple of series   
13              Chart2.Series.Add( " Series 1 " );
14              Chart2.Series.Add( " Series 2 " );
15               //  add points to series 1   
16               foreach  ( int  value  in  data)
17              {
18                  Chart2.Series[ " Series 1 " ].Points.AddY(value);
19              }
20               //  add points to series 2   
21               foreach  ( int  value  in  data)
22              {
23                  Chart2.Series[ " Series 2 " ].Points.AddY(value  +   1 );
24              }
25              Chart2.BorderSkin.SkinStyle  =  BorderSkinStyle.Emboss;
26              Chart2.BorderlineWidth  =   2 ;
27              Chart2.BorderColor  =  System.Drawing.Color.Black;
28              Chart2.BorderlineDashStyle  =  ChartDashStyle.Solid;
29              Chart2.BorderWidth  =   2 ;
30              Chart2.Legends.Add( " Legend1 " );
31              MemoryStream imageStream  =   new  MemoryStream();
32              Chart2.SaveImage(imageStream, ChartImageFormat.Png);
33              imageStream.Position  =   0 ;
34               return   new  FileStreamResult(imageStream,  " image/png " );
35          }

 

 最终的结果如下所示:

 

 源文件下载

 

转载于:https://www.cnblogs.com/haogj/archive/2010/07/25/1784674.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值