張小呆的碎碎唸

在上一篇的寫法是在ASPX拉進Chart Controls後，在CS中將資料塞到Chart中。而這篇所要講的是，如何從CS檔中，直接建立一個Chart，並且將其顯示在頁面上。

1.在ASPX中，拉進一個IMAGE Controls。


2.切到CS檔中，開始寫Code。
using System.IO;
using System.Drawing;
using System.Web.UI.DataVisualization.Charting;

namespace UsingChartControls
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            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;

            //將圖顯示在頁面上
            chart.Page = this;
            HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
            chart.RenderControl(writer);

            //將資料寫到Page中
            System.IO.MemoryStream ms = new System.IO.MemoryStream();
            chart.SaveImage(ms, ChartImageFormat.Png);
            ms.Seek(0, System.IO.SeekOrigin.Begin);
            Response.ContentType = "application/octet-stream";
            Response.BinaryWrite(ms.ToArray());

            //將資料塞到Image中
            string tmpImageFile1 = Path.GetTempFileName() + ".png";
            chart.SaveImage(tmpImageFile1, ChartImageFormat.Png);
            Image1.Attributes.Add("src", tmpImageFile1);
        }
    }
}

3.在上面的Code中，有標明紅色的部份，是三種將圖片顯示於PAGE中的方式，當然不一定只有這三種就是了。以下就來介紹這三種的輸出效果。

第一種寫法：這種寫法主要是微軟官方SAMPLE當中的寫法，會在PAGE中，產生一個IMAGE Controls。
chart.Page = this;
HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
chart.RenderControl(writer);


第二種寫法：會將MemoryStream的資料，利用Response.BinaryWrite，寫到PAGE中。所以這時候，按右鍵選檢視原始碼是看不到的。
System.IO.MemoryStream ms = new System.IO.MemoryStream();
chart.SaveImage(ms, ChartImageFormat.Png);
ms.Seek(0, System.IO.SeekOrigin.Begin);
Response.ContentType = "application/octet-stream";
Response.BinaryWrite(ms.ToArray());


第三種寫法：是將資料先存在一個TEMP檔中，再將路徑指給IMAGE Controls顯示。
string tmpImageFile1 = Path.GetTempFileName() + ".png";
chart.SaveImage(tmpImageFile1, ChartImageFormat.Png);
Image1.Attributes.Add("src", tmpImageFile1);


以上是輸出的方式，若有更好的方式，也請多多指教。第三篇，將會介紹MVC的寫法。