在ASP.Net MVC中绘制图表3

Question

我在ASP.Net MVC 3中使用Chart web helper.我在网上看到了一系列闪亮的图像,显​​示了这个API的功能,但几乎没有关于如何设置图表样式的文档.例如,我需要在图表外显示标签,我想指定百分比,而不是十进制值等.

有一个webforms项目可供下载:http://weblogs.asp.net/scottgu/archive/2010/02/07/built-in-charting-controls-vs-2010-and-net-4-series.aspx 和非常简单的类文档,解释了如何分配值和指定基本尺寸.

据我所知,还没有关于MVC 3的书籍发表,但是肯定会有某种文档说明如何使用该工具？

谢谢

编辑:

根据我的阅读,ASP.Net MVC 3要么通过删除图表样式的能力退出图表工具,要么根本没有记录.看过这篇文章:http://forums.asp.net/t/1620783.aspx/1? ASP+NET+MVC+3+Beta+Chart+Helper+Styling+Please+Help+,这是一个非常类似的问题.

编辑2: 似乎Microsoft在MVC 3中部分实现了MSCharts功能.为了使用MSCharts,必须在web.configuration文件中导入和注册System.Web.DataVisualization程序集.Ť

这样,请求就从视图发送到控制器.控制器生成图形的图像并传回图像结果.然后结果显示在视图中.这很有用,因为它提供了某种分离.我仍然不明白为什么System.WebHelpers.Chart还没有提供这个功能,但希望它能在不久的将来得到解决.

编辑3: 还有很多要点.不要在视图中构建图形 - 它们应由控制器提供.如果您决定使用视图构建图形,请确保更新Views文件夹中的web.config以包含 <add namespace="System.Web.UI.DataVisualization"/>在命名空间部分中.程序集和命名空间的名称有点令人困惑.当名称空间被称为System.Web.UI.DataVisualization时,调用程序集:System.Web.DataVisualization.最后,我认为图表API很棒,它提供图像,这意味着可以从所有Web浏览器访问图表.图表的质量非常好.我已经研究过Fusion Charts,HighCharts和其他一些jQuery/JavaScript/Flash驱动的图表等替代品.他们都试图从你那里拿走300英镑到1000英镑而不试图满足开发人员的最基本需求.

Answer 1

图表控件基于之前单独的名为MS Chart的项目.

Alex Gorev的博客(MSFT项目负责人):http://blogs.msdn.com/b/alexgor/

MS Chart论坛:http://social.msdn.microsoft.com/Forums/en-US/MSWinWebChart/

MSDN上的文档:http://msdn.microsoft.com/en-us/library/dd456632(VS.100).aspx

这些帖子似乎有点过时,但MS Chart和新的数据可视化库之间的API几乎相同.

要解决您的示例问题:

1)要在图表外显示标签,每个Series对象都有一个属性的字典数组.

series["PieLabelStyle"] = "Outside";

2)要指定百分比而不是原始值,Series对象的Label属性将采用格式字符串.

series.Label = "#PERCENT{P0}"

这些自定义属性可在http://msdn.microsoft.com/en-us/library/dd456764.aspx上详细获得.

编辑:添加代码示例

好的,这是一个完整的代码示例.我正在使用System.Web.DataVisualization v4.0.0.0,因此这应该是MVC 3的最新版本.series上面列出的不是实际Chart.Series属性(即a SeriesCollection).这series是你要添加到该系列的个人.

public ActionResult TestForSOExample()
{
  // slug in some data
  var data = new Dictionary<string, float>
        {
            {"test", 10.023f},
            {"test2", 20.020f},
            {"test3", 19.203f},
            {"test4", 4.039f},
            {"test5", 5.343f}
    };


  var chart = new Chart();

  var area = new ChartArea();
  // configure your chart area (dimensions, etc) here.
  chart.ChartAreas.Add(area);

  // create and customize your data series.
  var series = new Series();
  foreach (var item in data)
  {
        series.Points.AddXY(item.Key, item.Value);
    }
  series.Label = "#PERCENT{P0}";
  series.Font = new Font("Segoe UI", 8.0f, FontStyle.Bold);
  series.ChartType = SeriesChartType.Pie;
  series["PieLabelStyle"] = "Outside";

  chart.Series.Add(series);

  var returnStream = new MemoryStream();
  chart.ImageType = ChartImageType.Png;
  chart.SaveImage(returnStream);
  returnStream.Position = 0;
  return new FileStreamResult(returnStream, "image/png");
}

当您调出控制器的动作时,会显示以下图像.