2016-08-04 103 views
0

我有一個項目在VS 2015中使用基本的ASP.Net MVC框架。 我在頁面上有兩個圖表,第二個圖表根本不顯示。剃鬚刀 - 第二個圖表根本不會顯示

局部頁面conatining 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:爲什麼不會在第二圖表顯示在網頁上?

+0

什麼是'Model.HeadPerHour'?當你看到頁面的視圖源時,你看到了什麼? – Shyju

+0

該成員中有一個值。但是,我在html源代碼中看到的只有一個圖像(第一個圖表) – rigamonk

回答

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個圖像標籤,併爲圖像調用這2個動作方法源

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

如果同時你的圖表都在不同的y軸數據都相同,您可以使用相同的操作方法,並通過不同的數據集。

一些鏈接,瞭解更多參考

  1. Passing Chart Series from Controller to Razor View