在ASP.NET MVC3項目實施MS圖表

Question

我有一個MVC應用程序，它在業務邏輯是這樣產生的圖表：

StatisticsModel.Chart.Width = 150 
    StatisticsModel.Chart.Height = 300 
    StatisticsModel.Chart.Attributes.Add("align", "left") 

    StatisticsModel.Chart.Titles.Add("Statistics for: " + StatisticsModel.ProductNumbers) 
    StatisticsModel.Chart.ChartAreas.Add(New ChartArea) 

    StatisticsModel.Chart.Series.Add(New Series) 

    StatisticsModel.Chart.Series(0).ChartType = SeriesChartType.Column 

    StatisticsModel.Chart.Series(0).Points.DataBindXY(StatisticsModel.FailedTPDescriptionList, "key", StatisticsModel.FailedTPDescriptionList, "value") 

現在，我想實現它的視圖，但我閱讀過很多文章，他們建議我把圖表放在一個不同的控制器中。但這意味着我必須在那裏發送Chart對象，因爲我有許多功能，需要一個圖表，我認爲最簡單的方法是在模型中實現它，然後從那裏進行渲染。

我試着使用：http://code-inside.de/blog-in/2008/11/27/howto-use-the-new-aspnet-chart-controls-with-aspnet-mvc/

但：

@Code 
Dim writer As New HtmlTextWriter(Page.Response.Output) 
End Code 

並沒有爲我工作。我正在使用VB.NET

任何人都可以幫助我嗎？建議是非常受歡迎的。

Answer 1

在MVC中創建和顯示圖表有很多種方法，你提到的鏈接是相當不錯的。我使用C＃，但我做的方式是在視圖中使用IMG標記和SRC屬性指向一個控制器動作：

<img id="diagram" src="<%=Url.Action("DrawChartImage", "Home") %>" alt="Chart Diagram" /> 

控制器動作返回一個FileContentResult：

public ActionResult DrawChartImage() 
    { 
     using (var chartHelper = new ChartHelper()) 
     { 
      //get data 
      var data = GetSomeDataForTheChart(); 

      //draw chart 
      chartHelper.Draw(data); 

      //return chart as png image 
      return File(chartHelper.Image, "image/png"); 
     } 
    } 

的ChartHelper類實現了IDisposable並具有返回圖表作爲文件的輔助屬性（圖片），請注意，這只是示例/代碼片段展示了我的意思：

public class ChartHelper : IDisposable 
{ 
    private readonly Chart _chart; 
    public Chart Chart 
    { 
     get 
     { 
      return _chart; 
     } 
    } 

    public byte[] Image 
    { 
     get 
     { 
      using (var ms = new MemoryStream()) 
      { 
       _chart.SaveImage(ms); 
       return ms.GetBuffer(); 
      } 
     } 
    } 

    public ChartHelper() 
    { 
     _chart = new Chart(); 
     _chart.Height = 300; 
     _chart.Width = 800; 
     _chart.ImageType = ChartImageType.Png; 
     _chart.Titles.Add("some title"); 
     _chart.Legends.Add("some legend"); 
     _chart.ChartAreas.Add("some chart area"); 
    } 

    public void Draw(List<Data> data) 
    { 
     var dataArrays = GetDataArrays(data); //another helper method... 

     var series = new Series(tag); 
     series.Name = tag; 
     series.Legend = "tags"; 
     series.ChartType = SeriesChartType.Spline; 
     series.BorderWidth = 4; 

     //sample way to add data below... 
     series.Points.DataBindXY(dataArrays.Item1, dataArrays.Item2); 

     _chart.Series.Add(series); 
    } 

    public void Dispose() 
    { 
     _chart.Dispose(); 
    } 
} 

義和ks對我來說很好，希望它能幫助即使它在C＃中。

編輯如果你想創建業務邏輯的圖像/圖表從你的「主」控制器動作叫，也許你可以做這樣的事情，你生成圖像/圖表，然後將其保存到磁盤，緩存或數據庫，並從所述圖像繪製控制動作把它撿起來：

 public ActionResult Index() 
    { 
     //this is call to your business logic or similar which generates the chart 
     byte[] image = GenerateImage(); 
     //save image to cache, disk or from database 
     HttpContext.Cache["image"] = image; 
     return View(); 
    } 

    public ActionResult Image() 
    { 
     //get image from cache, disk or from database 
     var image = HttpContext.Cache["image"] as byte[]; 
     return File(image, "image/png"); 
    } 

    //some sample/dummy code to generate image from a template 
    private byte[] GenerateImage() 
    { 
     using (var ms = new MemoryStream()) 
     { 
      using (var image = System.Drawing.Image.FromFile(@"c:/temp/template.png")) 
      using (var brush = new SolidBrush(System.Drawing.Color.Black)) 
      using (var bmp = new System.Drawing.Bitmap(image, image.Width, image.Height)) 
      using (var g = System.Drawing.Graphics.FromImage(bmp)) 
      { 
       g.DrawString(DateTime.Now.ToLongTimeString(), new Font("Consolas", 10), brush, 10, 10); 
       bmp.Save(ms, ImageFormat.Png); 
      } 
      return ms.ToArray(); 
     } 
    } 

和視圖將是：

<img src="@Url.Action("Image")"/>