2

我必须在一页上显示 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，同时控制在视图中放置它们的位置？

4

1 回答 1

3

控制器

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 的唯一名称，

例如：

Highcharts chart = new Highcharts("uniqueId")
于 2014-06-18T13:01:38.003 回答