剃刀-完全不显示第二张图表 [英] Razor - second chart will not display at all

问题描述

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

I have a project using the basic ASP.Net MVC framework in VS 2015. I have 2 charts on a page, and the second chart does not display at all.

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

The partial page conatining 2 charts:

@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：为什么第二个图表不显示在页面上？ / p>

So, 1: Why won't the second chart display on the page?

推荐答案

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

It is not your second chart, but any item you add to your view(ex : a textbox) won't be visible. Because the Chart.Write method will convert the chart object to a jpg and write to the output stream.

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

What you should do is create separate action methods for your 2 charts and use that as the image source in your main view.

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

在您的Chart1.cshtml

And in your 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

and in your 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();
 }

用模型中的实际值替换硬编码值。您只需要通过操作方法传递视图模型即可查看（详细示例请参见底部的链接）

Replace the hard coded values with real values from your model. You just need to pass a view model fro your action method to view ( see the link at the bottom for detailed sample)

现在在主视图中，您可以拥有2图片标签并为图片来源调用这2种操作方法

Now in your main view, you can have 2 image tags and call these 2 action methods for the image source

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

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

If both of your charts are same in everything except the y axis data, you can use the same action method and pass different set of data.

一些链接以供更多参考

1. 将图表系列从控制器传递到Razor View

1. Passing Chart Series from Controller to Razor View

这篇关于剃刀-完全不显示第二张图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！