Razor - второй график вообще не отображается

Question

У меня есть проект, использующий базовую структуру ASP.Net MVC в VS 2015. У меня есть 2 диаграммы на странице, а второй график вообще не отображается.

Парциальная страница 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: Почему не второй дисплей диаграммы на странице?

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 тега изображения и называть эти 2 метода действий для изображения источник

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

Если оба ваших графики одинаковы во всем, за исключением данных оси у, вы можете использовать тот же метод действия и передать другой набор данных.

Некоторые ссылки для дополнительной ссылки

1. Passing Chart Series from Controller to Razor View