DotnetHighCharts - несколько графиков на одной странице

Question

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

Демонстрационный проект dotnetHighCharts включает в себя "Как сделать" для нескольких графиков. Это, однако, предполагает, что графики будут просто размещены друг под другом. В My View есть немного HTML-форматирования, где я хочу отображать диаграммы в контейнерах.

Итак, в моем контроллере у меня есть:

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

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

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

@model DotNet.Highcharts.Container

@(Model)

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

Я также попытался создать модель представления:

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