快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门新葡萄app下载_龟发之家论坛



前段光阴,开拓项目时,因为必要,必要将一些数据统计,并以图表形式显示。因为是asp.net,以是就找到了MsChart图表控件,照样挺方便实用的,分享一下。

MsChart控件的主要组成如图所示

对象栏中找到“Chart”控件,将其拖进前台中

一旦将Chart控件拖放至前台,强大年夜的IDE赞助你完成了一些工作

并引用了System.Web.DataVisualization动态库,而且还在网站设置设置设备摆设摆设文件Web.config中添加了

此中在设置设置设备摆设摆设文件中添加的代码,在正式宣布网站时,要做些许改动,后面我们再详说。

具体的MSChart参数,可以查看MSDN文档。

前台代码中,添加控件

asp:Chart ID="Chart1" runat="server" Widt澳门新葡萄app下载h="500px" BorderDashStyle="Solid" Palette="BrightPastel" imagetype="Png"BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2" backcolor="#D3DFF0" BorderColor="26, 59, 105">

Titles>as澳门新葡萄app下载p: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存储。

创建一张二维数据表

////// 创建一张二维数据表

////// Datatable类型的数据表

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

{DataRow dr = dt.N澳门新葡萄app下载ewRow();

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.澳门新葡萄app下载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控件应用就这样,更具体的应用可以参考MSD澳门新葡萄app下载N或者微软供给的Demo。

本文例子Demo下载

您可能还会对下面的文章感兴趣: