ASP.NET MVC 3 新HTML Helper筆記(4) -- Chart Class

有了WebImage類別的基礎後,在來看Chart類別比較輕鬆一些。

Chart類別是圖表類別,之前有介紹過「ASP.NET+jqPlot實作線上即時統計圖表(Chart)」是一樣的意思,最重要的是傳入「數值」然後產生圖表圖片,然後輸出。

在 HomeController.vb 新增一個Sub的Action
Sub GetChart()
    ' 建立一個 600 * 400,藍色樣式的圖表
    Dim demo = New Chart(600, 400, ChartTheme.Blue)
    ' 加入圖表資料
    demo.AddSeries("Demo Chart",
                   chartType:="bar",
                   legend:="Demo Chart",
                   xValue:=New String() {"一月", "二月", "三月", "四月", "五月"},
                   yValues:=New String() {"10", "20", "30", "40", "50"})
    ' 輸出為一個 image
    demo.Write()
End Sub


ChartTheme圖表樣式有:

  • Blue
  • Green
  • Vanilla
  • Vanilla3D
  • Yellow

Chart Type可到MSDN的「Chart Types (Chart Controls)」查詢,基本需求,Chart類別的圖表類型,應該都能滿足你了。

資料來源當然不可能用手Key-in,我們可以從「Displaying Data in a Chart」學到這項技術。

2 則留言:

  1. 請問bruce:
    chart數據寫死OK。從資料庫讀數據就失敗,錯誤訊息:不支援指定的方法,標示 (return File……) 錯誤。
    我的問題跟這網址類似 http://www.cnblogs.com/kayc/archive/2012/06/26/2563946.html
    用書裡DataBind範例也一樣錯誤。

    var data = db.T1.Where("class==@0 ", "x");
    ……
    chart.AddSeries(chartType: "column", name: "項目", xValue: data, xField: "F1", yValues: data, yValues: "F2");
    ……
    return File(chart.GetBytes(), "image/jpeg");

    回覆刪除
  2. 我好像搞錯了,改成下面寫法就OK了。

    var data = db.T1.Where("class==@0 ", "x").ToList();
    ……
    return View();

    回覆刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。