ASP.Net MVC 3 中的图表 [英] Charting in ASP.Net MVC 3

问题描述

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

I'm using Chart web helper in ASP.Net MVC 3. I have seen a range of shiny images online showing capabilities of this API, but there is hardly any documentation on how to style the charts. For example, I need to display labels outside of the chart, I'd like to specify percentage, rather than decimal values, etc.

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

There is a webforms project for download: http://weblogs.asp.net/scottgu/archive/2010/02/07/built-in-charting-controls-vs-2010-and-net-4-series.aspx and very simple class documentation that explains how to assign values and specify basic dimensions.

我知道还没有关于 MVC 3 的书籍出版，但肯定应该有某种文档解释如何使用该工具?

I understand that no books have been published yet on MVC 3, but surely there should be some sort of documentation explaining how to use the tool?

谢谢

从我读到的内容来看，ASP.Net MVC 3 要么通过删除图表样式功能而在图表工具方面退后一步，要么根本没有记录.偶然看到这篇文章:http://forums.asp.net/t/1620783.aspx/1?ASP+NET+MVC+3+Beta+Chart+Helper+Styling+Please+Help+，一个非常相似的问题在那里描述.

From what I have read, ASP.Net MVC 3 either took a step back with charting tool by removing ability to style charts, or it has not been documented at all. Came across this article: http://forums.asp.net/t/1620783.aspx/1?ASP+NET+MVC+3+Beta+Chart+Helper+Styling+Please+Help+ , a very similar issue is described there.

编辑 2:看来微软已经在 MVC 3 中部分实现了 MSCharts 功能.为了使用 MSCharts，必须导入 System.Web.DataVisualization 程序集并在 web.configuration 文件中注册.

EDIT 2: It appears that Microsoft have partially implemented MSCharts functionality in MVC 3. In order to use MSCharts, the System.Web.DataVisualization assembly must be imported and registered in web.configuration file. T

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

This way, requests are sent from view to controllers. Controllers generate image of a graph and pass back an image result. Result is then displayed in the view. This is useful as it provides some sort of seperation. I still don't understand why System.WebHelpers.Chart does not already offer this functionality, but hopefully it will be addressed in near future.

编辑 3:还有几点要说明.不要在视图中构建图形 - 它们应该由控制器提供服务.如果您决定使用视图来构建图形，请确保更新 Views 文件夹中的 web.config 以在命名空间部分.程序集和命名空间的名称有点令人困惑.当命名空间称为 System.Web.UI.DataVisualization 时，程序集称为:System.Web.DataVisualization.最后，我认为图表 API 很棒，它提供图像，这意味着可以从所有 Web 浏览器访问图表.图表的质量很棒.我查看了替代方案，例如 Fusion Charts、HighCharts 和其他一些 jQuery/JavaScript/Flash 驱动的图表.他们都试图从你那里拿走 300-1000 英镑，而不是试图满足开发者最基本的需求.

EDIT 3: Few more points to make. Don't construct your graphs in the view - they should be served by a controller. If you do decide to use views for constructing graphs, then make sure you update web.config in Views folder to include <add namespace="System.Web.UI.DataVisualization"/> in the namespace section. Names of assemblies and namespaces are slightly confusing. Assembly is called: System.Web.DataVisualization when namespace is called System.Web.UI.DataVisualization. Finally I think that charting API is great, it serves images which means that charts will be accessible from all web browsers. Quality of the charts is great. I have looked at alternatives such as Fusion Charts, HighCharts and few other jQuery/JavaScript/Flash powered charts. They all try to take £300-£1000 from you without trying to meet the most basic needs of developers.

推荐答案

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

The chart controls are based off a previously separate project called MS Chart.

Alex Gorev 的博客(该项目的 MSFT 首席开发人员):http://blogs.msdn.com/b/alexgor/

Alex Gorev's Blog (MSFT lead dev for the project): http://blogs.msdn.com/b/alexgor/

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

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

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

The posts seem a bit out of date, but the API is pretty much the same between MS Chart and the new Data Visualization libraries.

解决您的示例问题:

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

1) To display labels outside the chart, each Series object has a dictionary array of properties.

series["PieLabelStyle"] = "Outside";

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

2) To specify percentages rather than raw values, the Series object's Label property takes a formatting string.

series.Label = "#PERCENT{P0}"

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

These custom attributes are available in detail at http://msdn.microsoft.com/en-us/library/dd456764.aspx.

添加代码示例

好的，这是一个完整的代码示例.我正在使用 System.Web.DataVisualization v4.0.0.0，所以这应该是最新的 MVC 3.上面列出的 series 不是实际的 Chart.Series属性(即 SeriesCollection).这是您要添加到该集合中的单个 series.

Okay, here's a full code example. I'm using System.Web.DataVisualization v4.0.0.0, so this should be current with MVC 3. The series listed above isn't the actual Chart.Series properties (that's a SeriesCollection). It's the individual series that you're adding to that collection.

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");
}

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

When you call up the controller's action, you're presented with the following images.

这篇关于ASP.Net MVC 3 中的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！