DotnetHighCharts — размещение нескольких диаграмм на одной странице

Мне нужно отобразить 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)

Я должен разместить определенные диаграммы в определенных местах моей страницы. Так что, на мой взгляд, мне бы хотелось сделать что-то вроде @(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 на одной странице, сохраняя при этом контроль над тем, где их размещать в представлении?


asp.net-mvc dotnethighcharts
person Basquiat    schedule 18.06.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Контроллер

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")
person AliRıza Adıyahşi    schedule 18.06.2014
comment
Извините, я должен был упомянуть о странном поведении, которое я получаю, когда делаю это; На данном этапе используются только 2 диаграммы. Когда я добавляю диаграмму1 в свое представление, она работает. Когда я добавляю диаграмму 2, она по какой-то причине отображает диаграмму 2 там, где должна отображаться первая диаграмма, и ничего на месте диаграммы 2 (диаграмма 1 вообще не отображается). И если я добавлю только диаграмму2 в представление, она отобразит эту диаграмму так, как должна. Любая идея, почему это будет действовать так странно, когда оба будут добавлены в представление? - person Basquiat; 18.06.2014
comment
в вашем методе Chart_Line() при создании Highcharts вы должны установить уникальное имя диаграммы, например: Highcharts chart = new Highcharts("uniqueId") - person AliRıza Adıyahşi; 18.06.2014
comment
Поделитесь своим содержанием методов Chart_Line() и Chart_Pie(), пожалуйста. - person AliRıza Adıyahşi; 18.06.2014
comment
Большое спасибо! В этом была проблема, я не понимал, что методы также должны использовать уникальные идентификаторы диаграмм. - person Basquiat; 18.06.2014