Dotnet HighCharts - 位于一页上的多个图表

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)

我必须将特定图表放在页面的特定位置。 所以在我看来，我希望做一些类似@(Model[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")