如何透過DataTable當作圖表的DataSource畫出圖表

JobType.GIF 

使用Micosoft Chart Control畫圖表，有2種餵值的方式:

1 是靜態的在aspx頁面上給定X軸Y軸的Value，也就是畫出Series的Point。
2 是動態的在C#後置碼中，將Chart圖表DataBinding Enumerable Data，也就是陣列型式的資料。

未來專案會很常使用到DataBinding動態的產生圖表，所以在這裡我要介紹的方法是使用DataBiding至DataTable的寫法。
由於我的專案是用ASP.NET配合MVC架構(非ASP.NET MVC Component)，首先先下一段SQL Command取出我要統計的資料。
工作類型統計:

(X軸)工作類型 (Y軸)人數
無選擇 1038
全職爸爸/媽媽 1010
人資 231
業務 643
客服 326
行銷 357
生產 199
企劃 325

接著就要用以上的資料來產生圖表，首先在Default.aspx頁面上加入Chart元件:

<asp:Chart ID="Chart1" runat="server" Height="400px" Width="500px"> 
    <series>
        <asp:series ChartArea="chartArea1" Name="series1" ></asp:series>
    </series>
    <chartareas>
        <asp:chartarea Name="chartArea1" ></asp:chartarea>
    </chartareas>
</asp:Chart>

再來在SQLServerDAL的部份寫一個Function回傳DataTable，主要是取得資料庫裡的值存入DataTable裡。

public DataTable GetJobChart()
{
    DataTable dt;
    try
    {
        dt = new DataTable();
        dt.Columns.Add(new DataColumn("JobType", typeof(string)));
        dt.Columns.Add(new DataColumn("BloggerCount", typeof(int)));

        DataRow dr;
        using (SqlDataReader sdr = SQLHelper.ExecuteReader(SQLHelper.CONN_STRING_GREENTXT, CommandType.Text, SQL_PROFILE_LIST))
        {
            while (sdr.Read())
            {
                dr = dt.NewRow();
                dr["JobType"] = ConvertJobType((int)sdr["JobType"]);
                dr["BloggerCount"] = (int)sdr["BloggerCount"];

                 dt.Rows.Add(dr);
            }
        }
        return dt;
    }
    catch (Exception e)
    {
        Console.Write("SQL Conn Error:" + e.Message);
        return null;
    }
}

 最後在頁面後置碼Default.aspx.cs的部分，將回傳的DataTable當作是Chart的DataSource來產生圖表。

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
         if (!IsPostBack)
            BuildChart1();
    }
   
    private void BuildChart1()
    {
        Blogger blogger = new Blogger();
        DataTable dt = blogger.GetJobChart();  //取得DataTable

        Chart1.DataSource = dt;
            
        Chart1.Series["series1"].XValueMember = "JobType";  //X軸的DataColumn
        Chart1.Series["series1"].YValueMembers = "BloggerCount";  //Y軸的DataColumn

        Chart1.DataBind();
    }

    protected void btnBuildChart1_Clicked(object sender, EventArgs e)
    {
        BuildChart1();
    }
}

我在Default.aspx頁面上多加了一個Button，當發生Click事件後就能去呼叫BuilChart1()這個Function動態的產生圖表。

其實Chart支援許多DataSource的用法:

  • SqlCommand
  • OleDbCommand
  • SqlDataAdapter
  • OleDbDataAdapter
  • DataView
  • DataSet
  • DataReader
  • List
  • Array
  • IList
  • IListSource
  • IEnumerable


    • 在微軟官方Sample裡並沒有介紹使用DataTable的方法，但我覺得用DataTable當DataSource很方便，簡單明瞭。
    我寫的專案中也很常使用Repeater這個元件，我也是餵它吃DataTable…

    Anyway 想快速上手DataBinding Microsoft Chart Contorol，這篇文章就供參考囉。

    arrow
    arrow
      全站熱搜
      創作者介紹
      創作者 pinylnln 的頭像
      pinylnln

      Piny's blog

      pinylnln 發表在 痞客邦 留言(1) 人氣()

      E-mail轉寄