asp.net微軟圖表控制元件MsChart
阿新 • • 發佈：2021-07-08
前段時間，開發專案時，由於需要，需要將一些資料統計，並以圖表形式顯示。由於是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儲存。
1 /// <summary>
2 /// 建立一張二維資料表
3 /// </summary>
4 /// <returns>Datatable型別的資料表</returns>
5 DataTable CreatData()
6 {
7 DataTable dt = new DataTable();
8 dt.Columns.Add("Language", System.Type.GetType("System.String"));
9 dt.Columns.Add("Count", System.Type.GetType("System.String"));
10
11 string[] n = new string[] { "C#", "Java", "Object-C" };
12 string[] c = new string[] { "30", "50", "35" };
13
14 for (int i = 0; i < 3; i++)
15 {
16 DataRow dr = dt.NewRow();
17 dr["Language"] = n[i];
18 dr["Count"] = c[i];
19 dt.Rows.Add(dr);
20 }
21 return dt;
22 }接下來，對Chart控制元件進行資料繫結、屬性設定等操作。
哲學圖
1 DataTable dt = CreatData(); 2 3 #region 折線圖 4 Chart1.DataSource = dt;//繫結資料 5 Chart1.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Line;//設定圖表型別 6 Chart1.Series[0].XValueMember = "Language";//X軸資料成員列 7 Chart1.Series[0].YValueMembers = "Count";//Y軸資料成員列 8 Chart1.ChartAreas["ChartArea1"].AxisX.Title = "語言";//X軸標題 9 Chart1.ChartAreas["ChartArea1"].AxisX.TitleAlignment = StringAlignment.Far;//設定Y軸標題的名稱所在位置位遠 10 Chart1.ChartAreas["ChartArea1"].AxisY.Title = "統計";//X軸標題 11 Chart1.ChartAreas["ChartArea1"].AxisY.TitleAlignment = StringAlignment.Far;//設定Y軸標題的名稱所在位置位遠 12 Chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;//X軸資料的間距 13 Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;//不顯示豎著的分割線 14 Chart1.Series[0].IsValueShownAsLabel = true;//顯示座標值 15 #endregion
效果圖
同樣的方法實現其他幾種圖形
樣條圖（平滑曲線）
樣條圖（平滑曲線）效果圖
條形圖
1 #region 條形圖 2 Chart3.DataSource = dt;//繫結資料 3 Chart3.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Bar;//設定圖表型別 4 Chart3.Series[0].XValueMember = "Language";//X軸資料成員列 5 Chart3.Series[0].YValueMembers = "Count";//Y軸資料成員列 6 Chart3.ChartAreas["ChartArea1"].AxisX.Title = "語言";//X軸標題 7 Chart3.ChartAreas["ChartArea1"].AxisX.TitleAlignment = StringAlignment.Far;//設定Y軸標題的名稱所在位置位遠 8 Chart3.ChartAreas["ChartArea1"].AxisY.Title = "統計";//X軸標題 9 Chart3.ChartAreas["ChartArea1"].AxisY.TitleAlignment = StringAlignment.Far;//設定Y軸標題的名稱所在位置位遠 10 Chart3.ChartAreas["ChartArea1"].AxisX.Interval = 1;//X軸資料的間距 11 Chart3.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;//不顯示豎著的分割線 12 Chart3.Series[0].IsValueShownAsLabel = true;//顯示座標值 13 #endregion
效果圖
餅形圖
1 #region 餅形圖 2 Chart4.DataSource = dt;//繫結資料 3 Chart4.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;//設定圖表型別 4 Chart4.Series[0].XValueMember = "Language";//X軸資料成員列 5 Chart4.Series[0].YValueMembers = "Count";//Y軸資料成員列 6 Chart4.Series[0].LegendText = "Language"; 7 Chart4.Series[0].IsValueShownAsLabel = true;//顯示座標值 8 #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原創，歡迎轉載分享。請尊重作者勞動，轉載時保留該宣告和作者部落格連結，謝謝！