[英]Highcharts multiple charts on a single page using c# asp.net mvc3
I was wondering if it was possible to return multiple charts to a single page/view using c#? 我想知道是否可以使用c#将多个图表返回到单个页面/视图?
Background Information 背景资料
Goal: My overall goal is to have a webpage with two charts using ASP.NET MVC3 目标:我的总体目标是使用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.
如果问题有任何误解,请告诉我。
Just create a model that holds a List<HighChart>
( or add it to your existing model ). 只需创建一个包含
List<HighChart>
的模型( 或将其添加到现有模型中 )。 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 *@
}
If you're only adding two charts you dont need a List.. Just declare in your class for the typed view: 如果您只添加两个图表,则不需要List ..只需在类中声明类型化视图:
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... 然后您的视图将@(Model.Chart1)和@(Model.Chart2)放在您想要的位置......
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.