製圖顯示問題

我在正確顯示我的視圖中顯示餅圖時遇到問題。使用下面的代碼，我已經確認字節正在成功寫入模型並傳遞給視圖。我甚至確認我可以將餅圖保存到視圖目錄中的PNG文件中，但每次嘗試在瀏覽器中顯示餅圖時，都不會顯示圖像。製圖顯示問題

您會看到我使用了帶有餅圖的部分視圖的索引視圖。該計劃將在索引視圖中呈現多個部分視圖。

我希望有人能幫助我克服這一點。提前致謝。

型號：

public byte[] PieChartBytes { get; set; } 

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

控制器：

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); 
}

索引視圖：

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

餅圖：

@{ 
    //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>

來源

2017-02-24 Anonymous3521

兩個注意事項：1）我沒有看到添加ChartArea的地方，這是數據顯示的區域。 2）餅圖的X值沒有意義。 – TaW

你可以在瀏覽器上打開該PNG嗎？「 – Tony

當圖像僅僅是一個存儲在服務器上的字節串，而不是一個文件的任何地方，你需要的前綴字節是這樣的：

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

這就是所謂的數據URL或數據URI

另外但是，我不確定你需要在這裏使用WebImage。您已經在Chart對象上調用了GetBytes（）。這應該返回，你可以用它來顯示圖像的字節數：

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

基於@ Anonymous3521的評論，此代碼工作：

控制器：

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

查看：

<img src="@imgSrc" />

來源

2017-02-24 15:59:38

這導致我的正確路徑。我無法得到確切的代碼工作，但我用了以下代碼：var base64 = Convert.ToBase64String（Model.PieChartBytes） ; var imgSrc = String.Format（「data：image/png; base64，{0}」，base64）; – Anonymous3521

不錯，我會用你的解決方案爲未來的讀者更新我的答案。 –

製圖顯示問題

回答

相關問題