Question

我必须在一个页面上显示3个图表，作为仪表板的一部分。

dotnetHighCharts演示项目包括一个＆＃34;如何＆＃34;用于多个图表。然而，这似乎假设图表将简单地放在彼此之下。我的视图有很多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]）这样的东西来显示第一张图表等。

我也尝试过创建一个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")

DotnetHighCharts - 位于一个页面上的多个图表

1 个答案: