懶人畫圖的好碰由：M$ Chart Control (一)

下一個CASE會要畫圖，所以今天在玩作圖，先讀點書免得下禮拜太慘。 大致上就是M$收購了一家作圖公司並把元件加進來了，所以現在大家都有免費的元件可以用。 當然除了M$ chart control還有很多種畫圖的方式，先只分享chart control
chart control一開始不在VS2010裡面要額外安裝
1.chart controls for ms .net framework 3.5 下載後安裝
http://www.microsoft.com/zh-tw/download/details.aspx?id=14422
2.chart controls的add-on，裝了之後可以在工具箱裡面直接拖出來用
http://www.microsoft.com/en-us/download/details.aspx?id=23903
3.chart controls的說明文件
http://www.microsoft.com/en-us/download/details.aspx?id=11001
4.範例，非常多範例有空可以下載看看
http://archive.msdn.microsoft.com/mschart
前台的部分

        <asp:FileUpload ID="fuBtachFile" runat="server" />
        &nbsp;<asp:Button ID="btnChart" runat="server" Text="匯圖" OnClick="btnChart_Click"/>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="45%">
            <HeaderStyle BackColor="#996633" ForeColor="White" />
            <AlternatingRowStyle BackColor="#ffffcc" />
            <RowStyle HorizontalAlign="Center" />
            <Columns>
                <asp:BoundField DataField="FileSerNo" HeaderText="流水號"/>
                <asp:BoundField DataField="FacNo" HeaderText="廠商序號"/>
                <asp:BoundField DataField="ViolateName" HeaderText="廠商負責人"/>
                <asp:BoundField DataField="Price" HeaderText="報價"/>
                <asp:BoundField DataField="Staff" HeaderText="員工數"/>
                <asp:BoundField DataField="Capital" HeaderText="資本額"/>
            </Columns>
        </asp:GridView>
        <asp:Chart ID="Chart1" runat="server">
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
            <Series>
                <asp:Series Name="Series1">
                </asp:Series>
            </Series>
        </asp:Chart>

前台長這樣，在把chart control拉進來的時候可以看到有超多種選擇可以選的

後台，一口氣全貼了，最後有附檔。

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Web.UI.DataVisualization.Charting;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;
using NPOI.HSSF.UserModel;
using NPOI.HPSF;
using NPOI.POIFS.FileSystem;
using System.Text.RegularExpressions;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Chart1.Visible = false;
        GridView1.Visible = false;
    }
    protected void btnChart_Click(object sender, EventArgs e)
    {
        string FileName = System.IO.Path.GetRandomFileName() + ".xls";
        string PathName = Server.MapPath(ConfigurationManager.AppSettings["ChartUpload"]) + FileName;
        fuBtachFile.PostedFile.SaveAs(PathName);
        SetStep2(PathName);
    }
    private void SetStep2(string PathName)//檢核作業
    {
        DataTable tUpFileTable;
        bool GetUpFileDataIsOK = UpFileDataToDataTable(PathName, out tUpFileTable);
        GridView1.DataSource = (DataTable)tUpFileTable;
        GridView1.DataBind();
        GridView1.Visible = true;
        CreateChart(tUpFileTable);
    }
    private bool UpFileDataToDataTable(string PathName, out DataTable Table)//資料填入table
    {
        Table = PayBatchNew_EmptyDataTable();
        HSSFWorkbook hssfworkbook;
        System.IO.FileStream fs = new FileStream(PathName, FileMode.Open);//開檔
        hssfworkbook = new HSSFWorkbook(fs);
        fs.Close();
        HSSFSheet sheet = (HSSFSheet)hssfworkbook.GetSheetAt(0);//選擇excel中第一張表
        int rowCount = sheet.LastRowNum;//總列數
        int RowStart = sheet.FirstRowNum + 1;//第一列
        for (int i = RowStart; i <= sheet.LastRowNum; i++)//將excel中的資料填入datatable
        {
            HSSFRow row = (HSSFRow)sheet.GetRow(i);
            DataRow dataRow = Table.NewRow();
            dataRow["FileSerNo"] = i - RowStart + 1;
            if (row.GetCell(0) != null) { dataRow["FacNo"] = row.GetCell(0).ToString(); }
            if (row.GetCell(1) != null) { dataRow["ViolateName"] = row.GetCell(1).ToString(); }
            if (row.GetCell(2) != null) { dataRow["Price"] = row.GetCell(2).ToString(); }
            if (row.GetCell(3) != null) { dataRow["Staff"] = row.GetCell(3).ToString(); }
            if (row.GetCell(4) != null) { dataRow["Capital"] = row.GetCell(4).ToString(); }
            Table.Rows.Add(dataRow);
        }
        return true;
    }
    private DataTable PayBatchNew_EmptyDataTable()//建立table
    {
        DataTable workTable = new DataTable("ReNewBatchNew");
        workTable.Columns.Add("FileSerNo", typeof(int));//流水號
        workTable.Columns.Add("FacNo", typeof(String));//廠商序號
        workTable.Columns.Add("ViolateName", typeof(String));//負責人姓名
        workTable.Columns.Add("Price", typeof(int));//報價    
        workTable.Columns.Add("Staff", typeof(int));//公司人數
        workTable.Columns.Add("Capital", typeof(int));//公司資本額
        return workTable;
    }
    public void CreateChart(DataTable upFileTable)
    {
        Chart Chart = new Chart();//宣告ChartControl        
        Chart.ChartAreas.Add(new ChartArea("Areas"));//在control中宣告ChartAreas
        
        Chart.Series.Clear();//清空
        ///chart.series.add(" ") " "裡面放長條的名字，自己取
        ///這次做了三條所以add三條
        Chart.Series.Add("Price");//報價
        Chart.Series.Add("Staff");//員工數
        Chart.Series.Add("Capital");//資本額
        ///以下是綁定X、Y軸的內容
        ///可以自己定義或是做資料連結，此為資料連結
        ///XValueMenber是X軸的文字，YValueMember則是Y軸
        ///X軸可以是文字或數字，但Y軸一定要是數字
        Chart.Series["Price"].XValueMember = "ViolateName";
        Chart.Series["Price"].YValueMembers = "Price";
        Chart.Series["Staff"].XValueMember = "ViolateName";
        Chart.Series["Staff"].YValueMembers = "Staff";
        Chart.Series["Capital"].XValueMember = "ViolateName";
        Chart.Series["Capital"].YValueMembers = "Capital";
        Chart.DataSource = upFileTable;
        Chart.DataBind();
        this.Page.Form.Controls.Add(Chart);
    }
}

重點是最後一個涵式，把DataTable傳進來之後要先設定一些屬性，像是要有幾條長條，他們各自對應的資料欄位，因為Chart可以DataBind( )所以除了這邊做的excel上傳之外也可以直接連SQL。
最後的完成圖

這並不是一個好的圖，因為資本額遠遠大於員工人數和報價，所以圖根本看不出來另外兩項，所以應該要有讓使用者決定看資本額或是報價的選擇功能。

這是最陽春的版本，其他像3D效果或是顏色、寬度等等都要藉由修改chart的屬性來達成，這邊會在(二)再玩!

範例下載
點連結後左上角file選download即可