asp.net微軟圖表控件MsChart

前段時間，開發項目時，由於需要，需要將一些數據統計，並以圖表形式顯示。由於是asp.net，所以就找到了MsChart圖表控件，還是挺方便實用的，分享一下。

MsChart控件的主要組成如圖所示

工具欄中找到“Chart”控件，將其拖進前台中

一旦將Chart控件拖放至前台，強大的IDE幫助你完成了一些事情

並引用了System.Web.DataVisualization動態庫，而且還在網站配置文件Web.config中添加了

其中在配置文件中添加的代碼，在正式發布網站時，要做些許修改，后面我們再詳說。

詳細的MSChart參數，可以查看MSDN文檔。

前台代碼中，添加控件

<asp:Chart ID="Chart1" runat="server" Width="500px" BorderDashStyle="Solid" Palette="BrightPastel" imagetype="Png"  BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2" backcolor="#D3DFF0" BorderColor="26, 59, 105">
            <Titles>
                <asp:Title Font="微軟雅黑, 16pt" Name="Title1" Text="****統計表">
                </asp:Title>
            </Titles>
            <borderskin skinstyle="Emboss"></borderskin>
            <Series>
                <asp:Series Name="Series1"  ChartType="Bubble" MarkerSize="8" MarkerStyle="Circle">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1"  BorderColor="64, 64, 64, 64" BackSecondaryColor="Transparent" BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

在后台代碼中，首先創建一個函數，用於存儲數據，用Datatable存儲。

        /// <summary>
        /// 創建一張二維數據表
        /// </summary>
        /// <returns>Datatable類型的數據表</returns>
        DataTable CreatData()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Language", System.Type.GetType("System.String"));
            dt.Columns.Add("Count", System.Type.GetType("System.String"));

            string[] n = new string[] { "C#", "Java", "Object-C" };
            string[] c = new string[] { "30", "50", "35" };

            for (int i = 0; i < 3; i++)
            {           
                DataRow dr = dt.NewRow();
                dr["Language"] = n[i];
                dr["Count"] = c[i];
                dt.Rows.Add(dr);
            }
            return dt;
        }

接下來，對Chart控件進行數據綁定、屬性設置等操作。

哲學圖

            DataTable dt = CreatData();

            #region 折線圖
            Chart1.DataSource = dt;//綁定數據
            Chart1.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Line;//設置圖表類型
            Chart1.Series[0].XValueMember = "Language";//X軸數據成員列
            Chart1.Series[0].YValueMembers = "Count";//Y軸數據成員列
            Chart1.ChartAreas["ChartArea1"].AxisX.Title = "語言";//X軸標題
            Chart1.ChartAreas["ChartArea1"].AxisX.TitleAlignment = StringAlignment.Far;//設置Y軸標題的名稱所在位置位遠
            Chart1.ChartAreas["ChartArea1"].AxisY.Title = "統計";//X軸標題
            Chart1.ChartAreas["ChartArea1"].AxisY.TitleAlignment = StringAlignment.Far;//設置Y軸標題的名稱所在位置位遠
            Chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;//X軸數據的間距
            Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;//不顯示豎着的分割線
            Chart1.Series[0].IsValueShownAsLabel = true;//顯示坐標值
            #endregion

效果圖

同樣的方法實現其他幾種圖形

樣條圖（平滑曲線）

#region 樣條圖（平滑曲線）
            Chart2.DataSource = dt;//綁定數據
            Chart2.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Spline;//設置圖表類型
            Chart2.Series["Series1"].MarkerStyle = System.Web.UI.DataVisualization.Charting.MarkerStyle.Cross;//設置點的樣式，十字形
            Chart2.Series[0].XValueMember = "Language";//X軸數據成員列
            Chart2.Series[0].YValueMembers = "Count";//Y軸數據成員列
            Chart2.ChartAreas["ChartArea1"].AxisX.Title = "語言";//X軸標題
            Chart2.ChartAreas["ChartArea1"].AxisX.TitleAlignment = StringAlignment.Far;//設置Y軸標題的名稱所在位置位遠
            Chart2.ChartAreas["ChartArea1"].AxisY.Title = "統計";//X軸標題
            Chart2.ChartAreas["ChartArea1"].AxisY.TitleAlignment = StringAlignment.Far;//設置Y軸標題的名稱所在位置位遠
            Chart2.ChartAreas["ChartArea1"].AxisX.Interval = 1;//X軸數據的間距
            Chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;//不顯示豎着的分割線
            Chart2.Series[0].IsValueShownAsLabel = true;//顯示坐標值
            #endregion

效果圖

條形圖

#region 條形圖
            Chart3.DataSource = dt;//綁定數據
            Chart3.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Bar;//設置圖表類型
            Chart3.Series[0].XValueMember = "Language";//X軸數據成員列
            Chart3.Series[0].YValueMembers = "Count";//Y軸數據成員列
            Chart3.ChartAreas["ChartArea1"].AxisX.Title = "語言";//X軸標題
            Chart3.ChartAreas["ChartArea1"].AxisX.TitleAlignment = StringAlignment.Far;//設置Y軸標題的名稱所在位置位遠
            Chart3.ChartAreas["ChartArea1"].AxisY.Title = "統計";//X軸標題
            Chart3.ChartAreas["ChartArea1"].AxisY.TitleAlignment = StringAlignment.Far;//設置Y軸標題的名稱所在位置位遠
            Chart3.ChartAreas["ChartArea1"].AxisX.Interval = 1;//X軸數據的間距
            Chart3.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;//不顯示豎着的分割線
            Chart3.Series[0].IsValueShownAsLabel = true;//顯示坐標值
            #endregion

效果圖

餅形圖

            #region 餅形圖
            Chart4.DataSource = dt;//綁定數據
            Chart4.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;//設置圖表類型
            Chart4.Series[0].XValueMember = "Language";//X軸數據成員列
            Chart4.Series[0].YValueMembers = "Count";//Y軸數據成員列
            Chart4.Series[0].LegendText = "Language";
            Chart4.Series[0].IsValueShownAsLabel = true;//顯示坐標值
            #endregion

效果圖

更多圖表例子，可參考msdn的demo。

微軟demohttp://code.msdn.microsoft.com/mschart

文章開頭，我們談到添加MSChart控件時，IDE會自動修改了我們Web.config中的代碼。

我們在正式上傳網站到服務器時，如果不修改一些地方，會出現MSChart錯誤。我要在Web.config中將如下代碼修改

改成

目的是改成相對地址，避免在上傳到服務器時，路徑出現錯誤。

還需在解決方案下新增TempImages文件夾

OK，基本的MsChart控件使用就這樣，更詳細的使用可以參考MSDN或者微軟提供的Demo。

本文例子Demo下載

著作權聲明：本文由http://www.cnblogs.com/suguoqiang 原創，歡迎轉載分享。請尊重作者勞動，轉載時保留該聲明和作者博客鏈接，謝謝！