详解ASP.NET MVC使用Chart控件调用示例

 

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

 

 

 

 

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

 

 

 

 

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

 

Code [http://www.oeedu.com]

   

    
    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，提供数据。

 

 

 

 

 

Code [http://www.oeedu.com]

   

    
     
    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;

 

Code [http://www.oeedu.com]

   

    
     
    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
             }

   

 

 

 

最终的结果如下所示：

 

 

 

 

 源文件下载

 

转自：http://www.oeedu.com/contents/1237/10957.html