在ASP.Net MVC 3中如何绘制图表

Question

在ASP.Net MVC 3中如何绘制图表

c#asp.netasp.net-mvc-3charts

21

我正在使用ASP.Net MVC 3中的Chart web帮助程序。我在网上看到了一系列光彩夺目的图像，展示了这个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，必须导入System.Web.DataVisualization程序集并在web.configuration文件中注册。

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

编辑3：还有几点需要注意。不要在视图中构建图表-它们应该由控制器提供。如果您决定使用视图来构建图表，则请确保更新Views文件夹中的web.config以包括<add namespace="System.Web.UI.DataVisualization"/>在命名空间部分中。程序集和命名空间的名称稍微有些混淆。程序集称为：System.Web.DataVisualization，而命名空间称为System.Web.UI.DataVisualization。最后，我认为图表API非常棒，它提供了图像，这意味着图表将可以从所有Web浏览器访问。图表的质量很好。我已经查看了其他一些jQuery / JavaScript / Flash动力的图表，例如Fusion Charts，HighCharts和几个其他的图表。他们都试图从你那里拿走300-1000英镑，而不试图满足开发人员最基本的需求。

- user338195

"我认为绘图API很棒。" > 你所说的“绘图API”是什么意思？ - Luis Gouveia

2个回答

0

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

- M.G.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David R. Longnecker · Accepted Answer

图表控件基于先前独立的项目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属性（那是一个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");
}

当您调用控制器的动作时，会显示以下图像。

来自控制器动作的示例图像