DotnetHighCharts - Несколько диаграмм, расположенных на одной странице

Question

Я должен отображать 3 диаграммы, как часть панели, на одной странице.

Демо-проект dotnetHighCharts включает в себя «Как» для нескольких диаграмм. Это, однако, похоже, что диаграммы будут просто расположены ниже друг друга. В моем представлении довольно много форматирования html, где я хочу отображать диаграммы в контейнерах.

Так что в моем контроллере у меня есть:

public ActionResult Dashboard() 
    { 
     Highcharts chartLine = Chart_Line(); 
     Highcharts chartPie = Chart_Pie(); 

     return View(new Container(new[] { chartLine, chartPie })); 
    } 

Но вместо того, чтобы просто иметь это на мой взгляд:

@model DotNet.Highcharts.Container 

@(Model) 

я должен поместить конкретный графики на определенных местах моей страницы. Так, на мой взгляд, я хотел бы сделать что-то вроде @ (модель [1]) для отображения для отображения 1-й график и т.д.

Я также попытался создать ViewModel:

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

Надеясь, что я мог бы сделать это на моем Вид:

<div> @model.Chart1 </div> 

Но это также представляется невозможным.

В любом случае я могу отображать несколько DotNetHighCharts на одной странице, сохраняя при этом контроль, где их размещать в представлении?

Answer 1

Контроллер

public ActionResult Dashboard() 
{ 
    //NOTE: chart names must be unique! 
    Highcharts chartLine = Chart_Line(); 
    Highcharts chartPie = Chart_Pie(); 
    Highcharts chartColumn = Chart_Column(); 

    var charts = new ChartsModel 
    { 
     Chart1 = chartLine, 
     Chart2 = chartPie, 
     Chart3 = chartColumn 
    } 

    return View(charts); 
} 

Посмотреть

@model ChartsModel 

<div>@Model.Chart1</div> 
<div>@Model.Chart2</div> 
<div>@Model.Chart3</div> 

в вашем Chart_Line() метод, при создании Highcharts, вы должны установить уникальное имя диаграммы,

, например, :

Highcharts chart = new Highcharts("uniqueId")