ASP.Net MVC中使用Chart 控件详解

http://www.newxing.com/Tech/DotNet/ASPDotNet/Chart_316.html

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

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

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

        protected void Session_Start()
        {
            string id = this.Session.SessionID;
        }

增加之后的结果是这样。

到底应该怎样解决呢？

由于我没有看到 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，提供数据。

C# code 复制代码

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;

namespace mvcChart.Models
{
    public class StaticModel
    {
        public static List<int> createStaticData()
        {
            List<int> c_data = new List<int>();
            c_data.Add(1);
            c_data.Add(6);
            c_data.Add(4);
            c_data.Add(3);
            return c_data;
        }
    }
}

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

注意：

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

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

C# code 复制代码

public FileResult GetChart()
        {
            List<int> data  = Models.StaticModel.createStaticData();
            System.Web.UI.DataVisualization.Charting.Chart Chart2 = new System.Web.UI.DataVisualization.Charting.Chart();
            Chart2.Width = 412;
            Chart2.Height = 296;
            Chart2.RenderType = System.Web.UI.DataVisualization.Charting.RenderType.ImageTag;
            Chart2.Palette = ChartColorPalette.BrightPastel;
            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));
            Chart2.Titles.Add(t);
            Chart2.ChartAreas.Add("Series 1");
            // create a couple of series  
            Chart2.Series.Add("Series 1");
            Chart2.Series.Add("Series 2");
            // add points to series 1  
            foreach (int value in data)
            {
                Chart2.Series["Series 1"].Points.AddY(value);
            }
            // add points to series 2  
            foreach (int value in data)
            {
                Chart2.Series["Series 2"].Points.AddY(value + 1);
            }
            Chart2.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
            Chart2.BorderlineWidth = 2;
            Chart2.BorderColor = System.Drawing.Color.Black;
            Chart2.BorderlineDashStyle = ChartDashStyle.Solid;
            Chart2.BorderWidth = 2;
            Chart2.Legends.Add("Legend1");
            MemoryStream imageStream = new MemoryStream();
            Chart2.SaveImage(imageStream, ChartImageFormat.Png);
            imageStream.Position = 0;
            return new FileStreamResult(imageStream, "image/png");
        }

 最终的结果如下所示：

源文件下载.rar

Tags：Chart MVC 控件

作者：佚名