制图显示问题

我在正确显示我的视图中显示饼图时遇到问题。使用下面的代码，我已经确认字节正在成功写入模型并传递给视图。我甚至确认我可以将饼图保存到视图目录中的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

不错，我会用你的解决方案为未来的读者更新我的答案。 –

制图显示问题

回答

相关问题