ASP.Net MVC 3 中的图表

Posted 2023-03-31

【中文标题】ASP.Net MVC 3 中的图表

【英文标题】：Charting in ASP.Net MVC 3

【发布时间】：2011-09-11 00:16:00

【问题描述】：

我在 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： 微软似乎在 MVC 3 中部分实现了 MSCharts 功能。为了使用 MSCharts，必须在 web.configuration 文件中导入和注册 System.Web.DataVisualization 程序集。 T

这样，请求从视图发送到控制器。控制器生成图形图像并传回图像结果。结果随即显示在视图中。这很有用，因为它提供了某种分离。我仍然不明白为什么 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 英镑，而不是试图满足开发者最基本的需求。

【问题讨论】：

"我认为图表 API 很棒，" > 'charting API' 是什么意思？

【参考方案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 = "#PERCENTP0"

http://msdn.microsoft.com/en-us/library/dd456764.aspx 提供了这些自定义属性的详细信息。

编辑：添加代码示例

好的，这是一个完整的代码示例。我正在使用 System.Web.DataVisualization v4.0.0.0，所以这应该是 MVC 3 的最新版本。上面列出的series 不是实际的Chart.Series 属性（这是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 = "#PERCENTP0";
  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");

当您调用控制器的操作时，您会看到以下图像。

【讨论】：

嗨，我刚刚尝试将它应用到我的项目中，但它仅适用于 Web 表单。 MVC 3 不允许我传递属性数组，并且系列没有 Label 属性。

@vikp - 我已经用其他详细信息和代码示例更新了答案。确保您查看的是单个系列，而不是 SeriesCollection。

在视图中可以实现吗？我添加了@using System.Web.DataVisualization 以及 System.Web.UI.DataVisualization。两个程序集都在 web.config（视图和主配置）中注册。视图无法识别 DataVisualization 命名空间。

@vikp - 你的意思是在 Razor 视图中？我不明白为什么不假设您的数据在视图模型中或以某种方式可以访问您的视图。挑战在于让它解析然后以正确的顺序呈现页面的那部分。我认为图表命名空间也是必需的：System.Web.UI.DataVisualization.Charting。我们将它与 Spark+MVC3 一起使用...我还没有真正深入研究过 Razor。

是的，在剃刀视图中。我应该能够使用简单的 using 语句来引用 DataVisualization 命名空间。到目前为止，该项目的其余部分还没有采用它。程序集存在，并且已在两个 web.config 文件中注册。迷茫...

【参考方案2】：

我建议在客户端渲染图表，而不是在服务器上制作，服务器实际上应该用于从中提取数据。我会使用像google charts 这样的东西。但是，如果您真的决定从服务器中提取图表，具体来说是图像，那么最简单的方法是使用上述方法 - Chart 类。但是，这种方法的一个缺点是没有设计器，但实际上，正如我发现的那样，如果你创建 WinForms 应用程序并拖放 Charts 控件，它是完全相同的，并且有一个设计器，所有你如果需要，需要复制/粘贴设计器生成的代码并编写一些处理逻辑。它让生活更轻松。