Highcharts multiple charts on a single page using

问题:

I was wondering if it was possible to return multiple charts to a single page/view using c#?

Background Information

1. C#, ASP.NET MVC3
2. DotNet.Highcharts Library

Goal: My overall goal is to have a webpage with two charts using ASP.NET MVC3

Example

HighCharts g1 = new HighCharts("chart");
HighCharts g2 = new HighCharts("chart");
return View(model, g1, g2);

This is an example of what I want, but I am not too sure if this is possible. If so how would I accomplish this? If possible how would I output the charts using razor?

Thank you so much for the help, I appreciate it! Please let me know if there are any misunderstandings in the question.

回答1:

Just create a model that holds a List<HighChart> (or add it to your existing model). Something like:

public class ChartsModel
{
    public List<HighChart> Charts { get; set; }
}

Then you can populate the model and send it to the view in your action method, like so:

ChartsModel model = new ChartsModel();
model.Charts = new List<HighChart>();

HighCharts g1 = new HighCharts("chart");
HighCharts g2 = new HighCharts("chart");

model.Charts.Add(g1);
model.Charts.Add(g2);

return View(model);

Then in your view, you can loop round each chart:

@model ChartsModel

@foreach (HighCharts chart in Model.Charts)
{
    @* do your stuff *@
}

回答2:

If you're only adding two charts you dont need a List.. Just declare in your class for the typed view:

public class ChartsModel
{
   public Highcharts Chart1 { get; set; }
   public Highcharts Chart2 { get; set; }
}

Then your view put @(Model.Chart1) and @(Model.Chart2) where you want...

Important: Charts need diferent names, so in your controller, when you're creating the charts:

HighCharts g1 = new HighCharts("chart1"){ // Note the names
   // definitions
};
HighCharts g2 = new HighCharts("chart2"){
   // definitions
};

ChartsModel model = new ChartsModel();

model.Chart1 = g1;
model.Chart2 = g2;

return View(model);