2017-02-24 15 views
0

私のビューに円グラフを正しく表示させることに問題があります。以下のコードでは、バイトがモデルに正常に書き込まれ、ビューに渡されていることを確認しました。私は、ビューからディレクトリ内の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> 
+0

2つのノート:1)データが表示されている領域であるChartAreaをどこに追加するかわかりません。 2)円グラフのX値は無意味です。 – TaW

+0

ブラウザでそのPNGを開くことはできますか? – Tony

+0

答えて

0
画像は、ちょうどバイトの文字列ではなくどこでもサーバー上に保存されたファイルである、あなたはこのようなバイトの前に付ける必要があり

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

これは、データURLまたはデータURIと呼ばれている

さらに、しかし、ここでWebImageを使用する必要があるかどうかはわかりません。既にChartオブジェクトに対してGetBytes()を呼び出しています。 Anonymous3521のコメント@をに基づいて

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

は、このコードが働いた:

コントローラー:

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

ビュー:

<img src="@imgSrc" /> 
それはあなたが画像を表示するために使用できるバイト数を返す必要があります
+0

これは私の正しい道を導きました。私はその正確なコードを動作させることができませんでしたが、私は以下を使用しました:var base64 = Convert.ToBase64String(Model.PieChartBytes) ; var imgSrc = String.Format( "data:image/png; base64、{0}"、base64); Anonymous3521

+0

ニース。将来の読者のためにあなたの解答を更新します。 –

関連する問題