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)

我必须把具体的图表放在我的页面的特定位置。所以在我看来，我想做一些像@(Model1)这样的事情来显示第一张图表等等。

我还尝试创建了一个视图模型：

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 chart = new Highcharts("uniqueId")