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

问题描述

我在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上发布，但肯定应该有一些文档解释如何使用工具？

谢谢

EDIT： b
$ b

根据我已经阅读的内容，ASP.Net MVC 3通过删除样式图表的功能，退出了图表工具，或者没有记录。来自本文： http ：//forums.asp.net/t/1620783.aspx/1？ASP + NET + MVC + 3 + Beta + Chart + Helper + Styling +请+帮助+ ，一个非常类似的问题在那里描述。

编辑2：
看起来Microsoft已经在MVC 3中部分实现MSCharts功能。为了使用MSCharts，系统.Web.DataVisualization程序集必须导入并在web.configuration文件中注册。 T

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

编辑3：
还有很多要点。不要在视图中构造图形 - 它们应该由控制器提供。如果您决定使用视图构建图形，请确保更新Views文件夹中的web.config以包含< add namespace =System.Web.UI.DataVisualization/> 在命名空间部分。程序集和命名空间的名称稍有混乱。装配被称为：System.Web.DataVisualization当命名空间被称为System.Web.UI.DataVisualization。最后，我认为图表API是伟大的，它提供图像，这意味着图表可以从所有的网络浏览器访问。图表的质量是伟大的。我看过一些替代品，如Fusion Charts，HighCharts和其他一些jQuery / JavaScript / Flash图表。他们都试图从你的£300-£1000，而不试图满足开发人员的最基本的需求。

解决方案

图表控件基于一个名为MS Chart的单独项目。

Alex Gorev的博客（项目的MSFT领导）： http://blogs.msdn.com/b/alexgor/

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

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

帖子似乎

要处理您的示例问题：

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

系列[PieLabelStyle] =外部;

Series 对象的Label属性采用格式化字符串。

series.Label =#PERCENT {P0}

这些自定义属性详细位于 http://msdn.microsoft.com/en-us/library/dd456764.aspx 。

编辑：添加代码示例

好吧，这里是一个完整的代码示例。我使用System.Web.DataVisualization v4.0.0.0，所以这应该是现在与MVC 3.上面列出的系列不是实际 Chart.Series 属性（这是一个 SeriesCollection ）。

 这是您要添加到该集合的个人系列 public ActionResult TestForSOExample（）
 {
 //在某些数据中的slug 
 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（）; 
 //在此处配置您的图表区域（尺寸等）。 
 chart.ChartAreas.Add（area）; 
 
 //创建和自定义您的数据系列。 
 var series = new Series（）; 
 foreach（数据中的var项目）
 {
 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; 
系列[PieLabelStyle] =外; 
 
 chart.Series.Add（series）; 
 
 var returnStream = new MemoryStream（）; 
 chart.ImageType = ChartImageType.Png; 
 chart.SaveImage（returnStream）; 
 returnStream.Position = 0; 
 return new FileStreamResult（returnStream，image / png）; 
} 
  

调用控制器的操作时， 。

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.

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.

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?

Thank you

EDIT:

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.

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

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.

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.

解决方案

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

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

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

Documentation on MSDN: http://msdn.microsoft.com/en-us/library/dd456632(VS.100).aspx

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.

To address your example questions:

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

series["PieLabelStyle"] = "Outside";

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

series.Label = "#PERCENT{P0}"

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

EDIT: Adding Code Example

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屋！