前段时间,开发项目时,由于需要,需要将一些数据统计,并以图表形式显示。由于是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 }