如何在 Asp.Net MVC 3 中使用 Asp.Net Chart 控件？答案

【问题标题】：How can I use Asp.Net Chart control in Asp.Net MVC 3?如何在 Asp.Net MVC 3 中使用 Asp.Net Chart 控件？
【发布时间】：2010-12-16 20:23:14
【问题描述】：

我知道新的 Helpers 库附带了一个 Chart 控件，但它没有 Asp.Net Charting 控件相同的功能。我必须在饼图或条形图上表示数据，我需要在图例或标签上有一个可点击的链接。我正在使用 Asp.Net MVC 3 Razor，但无法将 Asp.Net Chart 控件与此功能联系起来。我可以显示图表，但未呈现链接。有什么建议吗？

【问题讨论】：

标签： asp.net-mvc-3 mschart

【解决方案1】：

您可以使用 ActionResult 来呈现图表。以下链接是 Daniel A Hill 的博文 - Rendering Microsoft .NET 4.0 Charts in ASP.NET MVC

using System;
using System.IO;
using System.Web.Mvc;
using System.Web.UI.DataVisualization.Charting;

namespace Serviscope.Proviso.Web.Code
{
    public class ChartActionResult : ActionResult
    {
        private readonly Chart _chart;
        private readonly ChartImageFormat _imageFormat;

        public ChartActionResult(Chart chart, ChartImageFormat imageFormat = ChartImageFormat.Png)
        {
            if ( chart == null ) { throw new ArgumentNullException("chart"); }

            _chart = chart;
            _imageFormat = imageFormat;
        }

        public override void ExecuteResult(ControllerContext context)
        {
            var response = context.HttpContext.Response;

            response.Clear();
            response.Charset = String.Empty;
            response.ContentType = "image/" + _imageFormat;

            if ( _imageFormat == ChartImageFormat.Png )
            {
                // PNG can only write to a seek-able stream
                //  Thus we have to go through a memory stream, which permits seeking.
                using ( var mStream = new MemoryStream() )
                {
                    _chart.SaveImage(mStream, _imageFormat);
                    mStream.Seek(0, SeekOrigin.Begin);
                    mStream.CopyTo(response.OutputStream);
                }
            }
            else
            { // If we don't have to provide a seek-able stream, write directly to
                //  where the data needs to go.
                _chart.SaveImage(response.OutputStream, _imageFormat);
            }

            _chart.Dispose();
        }
    }
}

和例子：

public ActionResult MyChart()
{
  // Build Chart
  var chart = new Chart()
                  {
                    Height = 300,
                    Width = 400,
                    BackGradientStyle = GradientStyle.TopBottom,
                    BackColor = Color.Gray,
                    BorderSkin = new BorderSkin() { SkinStyle = BorderSkinStyle.Emboss }
                  };

  // Add Chart Area and Set 3-D Settings
  chart.ChartAreas.Add(new ChartArea());
  chart.ChartAreas[0].Area3DStyle = new ChartArea3DStyle()
                                        {
                                          Enable3D = true,
                                          Perspective = 10,
                                          Inclination = 30,
                                          Rotation = 10
                                        };

  // Add Random values
  chart.Series.Add(GenerateRandomSeries(10, 10));
  chart.Series.Add(GenerateRandomSeries(10, 10));
  chart.Series.Add(GenerateRandomSeries(10, 10));

  // Return chart object, wrapped in our custom action result
  return new ChartActionResult(chart);
}

private static readonly Random RandomPointGenerator = new Random();
private static Series GenerateRandomSeries(int max, int count)
{
  var series = new Series();
  series.ChartType = SeriesChartType.Line;

  for (int x = 0; x < count; x++)
  {
    series.Points.AddXY(x + 1, RandomPointGenerator.Next(max));
  }

  return series;
}

【讨论】：

【解决方案2】：

您应该只在您的 ASP.NET MVC 应用程序中创建一个标准的 Web 表单页面。 Scott Hanselman 解释了如何做到这一点here。

【讨论】：