前段時間,開發項目時,由于需要,需要將一些數據統計,并以圖表形式顯示。由于是asp.net,所以就找到了MsChart圖表控件,還是挺方便實用的,分享一下。
MsChart控件的主要組成如圖所示
asp控件如何使用、工具欄中找到“Chart”控件,將其拖進前臺中
一旦將Chart控件拖放至前臺,強大的IDE幫助你完成了一些事情
asp數據源控件有哪些。并引用了System.Web.DataVisualization動態庫,而且還在網站配置文件Web.config中添加了
其中在配置文件中添加的代碼,在正式發布網站時,要做些許修改,后面我們再詳說。
詳細的MSChart參數,可以查看MSDN文檔。
asp控件添加?
前臺代碼中,添加控件
<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 Chart2.DataSource = dt;//綁定數據 3 Chart2.Series["Series1"].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Spline;//設置圖表類型 4 Chart2.Series["Series1"].MarkerStyle = System.Web.UI.DataVisualization.Charting.MarkerStyle.Cross;//設置點的樣式,十字形 5 Chart2.Series[0].XValueMember = "Language";//X軸數據成員列 6 Chart2.Series[0].YValueMembers = "Count";//Y軸數據成員列 7 Chart2.ChartAreas["ChartArea1"].AxisX.Title = "語言";//X軸標題 8 Chart2.ChartAreas["ChartArea1"].AxisX.TitleAlignment = StringAlignment.Far;//設置Y軸標題的名稱所在位置位遠 9 Chart2.ChartAreas["ChartArea1"].AxisY.Title = "統計";//X軸標題 10 Chart2.ChartAreas["ChartArea1"].AxisY.TitleAlignment = StringAlignment.Far;//設置Y軸標題的名稱所在位置位遠 11 Chart2.ChartAreas["ChartArea1"].AxisX.Interval = 1;//X軸數據的間距 12 Chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;//不顯示豎著的分割線 13 Chart2.Series[0].IsValueShownAsLabel = true;//顯示坐標值 14 #endregion
asp數據控件、效果圖
條形圖
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
效果圖
winform表格?
餅形圖
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
效果圖
excel控件動態圖表。更多圖表例子,可參考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 原創,歡迎轉載分享。請尊重作者勞動,轉載時保留該聲明和作者博客鏈接,謝謝!