Charting in ASP.Net MVC 3

问题:

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.

回答1:

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.

回答2:

I would recommend to render charts on the client, rather that making on the server, server is actually should be used for pulling the data from. I would use smth like google charts for that. But if you're really decided to pull charts from server, images to be specific, then the easiest is to use the above approach - Chart class. But, one disadvantage of this approach is that there is no designer for that, but actually, as I found, if you create WinForms app and drag and drop Charts control, it is exactly the same and there is a designer for that, all you need is to copy/paste designer generated code and write some processing logic, if needed. It makes life much easier.