張小呆的碎碎唸

此篇所要說的是在ASP.NET MVC中使用Microsoft Chart Controls，關於MVC的相關文章，可參考保哥的部落格或者demo小鋪，這邊就不談MVC相關的觀念。以下就開始今天的議題：

1.首先建立一個新的MVC專案


2.在Models中，新增LINQ TO SQL，來建立資料來源。




3.將Northwind中的Employees拉進LINQ TO SQL中。


4.請將CHART參考進MVC專案中。




5.建立一個新的Controller。




6.開始在Controller中撰寫程式。

using ProMvcChart.Models;
using System.Web.UI.DataVisualization.Charting;

namespace ProMvcChart.Controllers
{
    public class ChartController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult ChartIndex()
        {
            MyDataContext db = new MyDataContext();

            //建立一個新的Chart
            Chart chart = new Chart();
            chart.ID = "Chart1";

            //建立一個ChartAreas，並對ChartAreas設定格式
            chart.ChartAreas.Add("ChartAreas1");
            chart.ChartAreas["ChartAreas1"].BorderColor = System.Drawing.Color.FromArgb(64, 64, 64, 64);
            chart.ChartAreas["ChartAreas1"].BorderDashStyle = ChartDashStyle.Solid;
            chart.ChartAreas["ChartAreas1"].BackSecondaryColor = System.Drawing.Color.White;
            chart.ChartAreas["ChartAreas1"].BackColor = System.Drawing.Color.FromArgb(64, 165, 191, 228);
            chart.ChartAreas["ChartAreas1"].ShadowColor = System.Drawing.Color.Transparent;
            chart.ChartAreas["ChartAreas1"].BackGradientStyle = GradientStyle.TopBottom;
            chart.ChartAreas["ChartAreas1"].Area3DStyle.Rotation = 10;
            chart.ChartAreas["ChartAreas1"].Area3DStyle.Perspective = 10;
            chart.ChartAreas["ChartAreas1"].Area3DStyle.Inclination = 15;
            chart.ChartAreas["ChartAreas1"].Area3DStyle.IsRightAngleAxes = false;
            chart.ChartAreas["ChartAreas1"].Area3DStyle.WallWidth = 0;
            chart.ChartAreas["ChartAreas1"].Area3DStyle.IsClustered = false;
            chart.ChartAreas["ChartAreas1"].AxisY.LineColor = System.Drawing.Color.FromArgb(64, 64, 64, 64);
            chart.ChartAreas["ChartAreas1"].AxisY.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8.25f, System.Drawing.FontStyle.Bold);
            chart.ChartAreas["ChartAreas1"].AxisY.MajorGrid.LineColor = System.Drawing.Color.FromArgb(64, 64, 64, 64);
            chart.ChartAreas["ChartAreas1"].AxisX.LineColor = System.Drawing.Color.FromArgb(64, 64, 64, 64);
            chart.ChartAreas["ChartAreas1"].AxisX.LabelStyle.Font = new System.Drawing.Font("Trebuchet MS", 8.25f, System.Drawing.FontStyle.Bold);
            chart.ChartAreas["ChartAreas1"].AxisX.MajorGrid.LineColor = System.Drawing.Color.FromArgb(64, 64, 64, 64);

            //新增一個Series
            chart.Series.Add("Series1");

            var result = from el in db.Employees
                         group el by el.City into g
                         select new
                         {
                             City = g.Key,
                             Count = g.Count()
                         };

            //將資料塞入Chart Controls
            foreach (var item in result)
            {
                chart.Series["Series1"].Points.AddXY(item.City, item.Count);
            }

            //顯示長條圖的數據
            chart.Series["Series1"].IsValueShownAsLabel = true;

            System.IO.MemoryStream ms = new System.IO.MemoryStream();
            chart.SaveImage(ms, ChartImageFormat.Png);
            ms.Seek(0, System.IO.SeekOrigin.Begin);

            return File(ms, "image/png");
        }
    }
}

7.建立Views。


8.建立一個UserControl。


9.在UserControl中加入以下的Code，會傳回一個二進制串流的圖。

<%=Url.Action("ChartIndex", "Chart") %>

10.在Chart/Index中，加入以下的Code，來顯示Chart/ChartIndex所產生的圖。

<div>
        <img id="img1" src="/Chart/ChartIndex" />
</div>

11.成果：


以上是使用ASP.NET MVC來使用Chart的範本。