使用c#asp.net mvc3在单个页面上高亮显示多个图表

时间:2013-05-07 21:24:12

标签: c# asp.net-mvc asp.net-mvc-3 charts highcharts

我想知道是否可以使用c#将多个图表返回到单个页面/视图?

背景资料

  1. C#,ASP.NET MVC3
  2. DotNet.Highcharts Library
  3. 目标:我的总体目标是使用ASP.NET MVC3创建一个包含两个图表的网页

    示例

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

    这是我想要的一个例子,但我不太确定这是否可行。如果是这样,我将如何做到这一点?如果可能,我将如何使用剃刀输出图表?

    非常感谢你的帮助,我很感激!如果对这个问题有任何误解,请告诉我。

2 个答案:

答案 0 :(得分:2)

只需创建一个包含List<HighChart>的模型(或将其添加到现有模型)。类似的东西:

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

然后您可以填充模型并将其发送到操作方法中的视图,如下所示:

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

然后在您的视图中,您可以围绕每个图表循环:

@model ChartsModel

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

答案 1 :(得分:2)

如果您只添加两个图表,则不需要列表..只需在类中声明类型化视图:

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

然后你的观点将@(Model.Chart1)和@(Model.Chart2)放在你想要的地方......

重要提示:图表需要不同的名称,因此在您的控制器中,当您创建图表时:

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