Question

我在VS 2015中使用了基本的ASP.Net MVC框架。我在页面上有2个图表，第二个图表根本不显示。

包含2个图表的部分页面：

@model KPITest.Models.HotscaleMainKpi

<div>
    @{
        Chart _hotscaleLarge = new Chart(width: 600, height: 400, theme: ChartTheme.Green);
        _hotscaleLarge.AddTitle("Hot Scale Production");
        _hotscaleLarge.AddSeries("Default",
            xValue: new[]{DateTime.Now}, xField: "Date",
            yValues: new[]{Model.TotalHotscale}, yFields: "Processed");
        _hotscaleLarge.Write();

        Chart _hotscaleHPI = new Chart(width: 600, height: 400);
        _hotscaleHPI.AddTitle("Hot Scale Head/Hour");
        _hotscaleHPI.AddSeries("Heads/Hour",
        xValue: new[] { DateTime.Now.ToLocalTime() }, xField: "Date",
        yValues: new[] { Model.HeadPerHour }, yFields: "Head/Hr");
        _hotscaleHPI.Write();

    }
</div>

所以， 1：为什么不在页面上显示第二个图表？

Answer 1

这不是您的第二张图表，但您添加到视图中的任何项目（例如文本框）都不会显示。因为Chart.Write方法会将图表对象转换为jpg并写入输出流。

您应该为2个图表创建单独的操作方法，并将其用作主视图中的图像源。

public ActionResult Chart1()
{
  return View();
}
public ActionResult Chart2()
{
  return View();
}

在Chart1.cshtml中

@{
    Chart _hotscaleLarge = new Chart(width: 600, height: 400, theme: ChartTheme.Green);
    _hotscaleLarge.AddTitle("Hot Scale Production");
    _hotscaleLarge.AddSeries("Default",
        xValue: new[]{DateTime.Now}, xField: "Date",
        yValues: new[]{12}, yFields: "Processed");
    _hotscaleLarge.Write();


}

和你的Chart2.cshtml

@{
    Chart _hotscaleHPI = new Chart(width: 600, height: 400);
    _hotscaleHPI.AddTitle("Hot Scale Head/Hour");
    _hotscaleHPI.AddSeries("Heads/Hour",
    xValue: new[] { DateTime.Now.ToLocalTime() }, xField: "Date",
    yValues: new[] { 23 }, yFields: "Head/Hr");
    _hotscaleHPI.Write();
 }

将硬编码值替换为模型中的实际值。您只需要将动作方法的视图模型传递给视图（请参阅底部的链接以获取详细示例）

现在在主视图中，您可以拥有2个图像标记，并为图像源调用这两种操作方法

<img src="@Url.Action("Chart1","Home")" alt="Some alt text" />
<img src="@Url.Action("Chart1","Home")" alt="Some alt text" />

如果两个图表在除y轴数据之外的所有图表中都相同，则可以使用相同的操作方法并传递不同的数据集。

一些链接以供更多参考

Passing Chart Series from Controller to Razor View

剃刀 - 第二张图表根本不会显示

1 个答案: