ASP.NET MVC:显示来自模型的多个图表

ASP.NET MVC: Displaying multiple Charts from Model

我想要一个包含多个图表的网页。图表的数据驻留在我的模型中,我在控制器中创建并传递给视图。但是,我 运行 在视图中创建图表时遇到了麻烦。

Microsoft 创建此 class 以在 MVC 中创建基本图表: https://msdn.microsoft.com/en-us/library/system.web.helpers.chart%28v=vs.111%29.aspx

它有它的怪癖。例如,如果你想显示多个图表,你需要从视图调用回控制器。 (在 "Displaying Charts Inside a Web Page" 部分中有解释:http://www.asp.net/web-pages/overview/data/7-displaying-data-in-a-chart

基本上您需要使用@Url.Action("MakeChart") 作为HTML 图片标签的源代码。但是,如何将视图中的模型传递回控制器以创建图像?如果我尝试通过@Url.Action 传递模型,则该模型是空引用。

哇,我试着按照他们给出的指示去做,但也被难住了。

最后我不得不这样做。

控制器

public ActionResult MakeChart()
{
    return this.View(new Employees());
}

public ActionResult ShowChart()
{
    return this.View(new Employees());
}

ShowChart.cshtml

@model MyDashboard.Models.Employees
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>Chart Example</title>
</head>
<body>
    <h1>Chart Example</h1>
    <p>
        The following chart is generated by the <em>ChartArrayBasic.cshtml</em> file, but is shown
        in this page.
    </p>
    @*<p><img src="MakeChart.cshtml" /> </p>*@
    <img src="@Url.Action("MakeChart", new {  model = @Model })" />
</body>
</html>

MakeChart.cshtml

@model MyDashboard.Models.Employees

@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "Employee",
            xValue: @Model.Names,
            yValues: @Model.Ids)
        .Write();
}

模型 = 员工

public class Employees
{
    public string[] Names { get; set; }

    public string[] Ids { get; set; }

    public Employees()
    {
        this.Names = new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" };
        this.Ids = new[] { "2", "6", "4", "5", "3" };
    }
}

结果