如何在Asp.Net MVC 3中使用Asp.Net Chart控件?

时间:2010-12-16 20:23:15

标签: asp.net-mvc-3 mschart

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

2 个答案:

答案 0 :(得分:2)

您可以使用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;
}

答案 1 :(得分:0)

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