Probleme mit der Diagrammanzeige

Question

Ich habe Probleme, Tortendiagramme korrekt in meinen Ansichten anzuzeigen. Mit dem folgenden Code habe ich bestätigt, dass Bytes erfolgreich in das Modell geschrieben und an die Ansicht übergeben werden. Ich habe sogar bestätigt, dass ich das Kreisdiagramm in einer PNG-Datei in einem Verzeichnis aus der Ansicht speichern kann, aber jedes Mal, wenn ich versuche, das Kreisdiagramm im Browser anzuzeigen, wird kein Bild angezeigt.

Sie werden sehen, dass ich eine Indexansicht mit einer Teilansicht für das Kreisdiagramm verwende. Es ist geplant, mehrere Teilansichten in die Indexansicht einzublenden.

Ich hoffe, dass jemand mir helfen kann, vorbei zu kommen. Danke im Voraus.

Modell:

public byte[] PieChartBytes { get; set; } 

public class StatsForPieChart 
{ 
    public string dest { get; set; } 
    public long recordCount { get; set; } 
} 

Controller:

public ActionResult _DisplayPieChart (model.ViewModel model) 
{ 
    ArrayList xSeriesList = new ArrayList(); 
    ArrayList ySeriesList = new ArrayList(); 
    foreach (var item in model.statsforPieChart) 
    { 
     xSeriesList.Add(item.dest); 
     sSeriesList.Add(item.recordCount); 
    } 
    model.PieChartBytes = new Chart(width:800, height:600, theme: ChartThem.Blue) 
     .AddTitle("Title") 
     .AddLegend() 
     .AddSeries(
      name: "Name", 
      chartType: "Pie", 
      xValue: xSeriesList, 
      yValues: ySeriesList) 
     .GetBytes("png"); 
    return PartialView(model); 
} 

Übersicht:

Html.RenderAction("_DisplayPieChart", new { model = Model }); 

Kreisdiagramm anzeigen:

@{ 
    //the "Save" code is only used to prove the file bytes have been successfully passed and the image is present in the view: 
    string sImagePath = Server.MapPath("~") + "Content\\" + Guid.NewGuid().ToString + ".png" 
    WebImage myImage = new WebImage(Model.PieChartBytes); 
    myImage.Save(sImagePath); 
} 
<div class="text-center"> 
    <img src="@sImagePath" /> //works in debug mode, but gets blocked on web server - not desired solution. 
    <img src="@myImage" /> //desired solution, but produces no image. 
</div> 

Answer 1

Wo das Bild nur eine Folge von Bytes und nicht ein auf einem Server irgendwo gespeicherten Datei, müssen Sie die Bytes wie dieses Präfix:

<img src="data:image/png;base64,@myImage" /> 

Dies ist eine Daten URL oder Daten

URI aufgerufen wird

Zusätzlich Ich bin mir nicht sicher, ob Sie hier WebImage verwenden müssen. Sie rufen bereits GetBytes() für das Chart-Objekt auf. Das sollte die Bytes zurück, die Sie das Bild verwenden können, um anzuzeigen:

<img src="data:image/png;base64,@Model.PieChartBytes" /> 

Basierend auf @ Anonymous3521 Kommentar, dieser Code gearbeitet:

Controller:

var base64 = Convert.ToBase64String(Model.PieChartBytes); 
var imgSrc = String.Format("data:image/png;base64,{0}", base64); 

Ausblick:

<img src="@imgSrc" />