asp.net中使用mschart控件

著作权声明：本文由http://www.cnblogs.com/suguoqiang 原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢！

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

本是菜鸟，偶做老鸟，略读半卷书，坐井说天阔。大志无所为，海斗量得失，年到老时方恨晚，怒指生不逢时。

asp.net中使用mschart控件相关推荐

ASP.NET中 Calendar(日期控件)的使用
ylbtech-ASP.NET-Control-Basic:Calendar(日期控件)的使用 ASP.NET中 Calendar(日期控件)的使用. 1.A,运行效果返回顶部 Calendar(日期 ...
asp.net中显示DataGrid控件列序号的几种方法
在aps.net中多数据绑定的控件很多,论功能来说,应该属DataGrid最为齐全,但它没有提供现成的显示记录序号的功能,不过我们可以通过它所带的一些参数来间接得到序号,下面来看看怎样得到和显示序号值 ...
ASP.NET中的AdRotator控件即广告控件的使用
场景 ASP.NET中新建Web网站并部署到IIS上(详细图文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107199 ...
Asp.net中服务端控件事件是如何触发的(笔记)
Asp.Net 中在客户端触发服务器端事件分为两种情况: 一. WebControls中的Button 和HtmlControls中的Type为submit的HtmlInputButton 这两 ...
Asp.net中使用ActiveX控件
在asp.net项目项目中,使用了一个第三方的没有签名的ActiveX控件,代码如下: <SCRIPT LANGUAGE="JavaScript"> function ...
ASP.NET中的Menu控件的应用
1.首先建立一个Default.aspx的主页面,再建立一个站点地图:Web.sitemap 2.Default.aspx的主页面的设计 <%@ Page Language="C#&q ...
在ASP.NET中使用ListView控件对数据进行显示、分页和排序
最终效果图如下所示: 使用ListView控件是不需要写代码的,下面我们来看一下ListView的操作流程: 1.首先新建一个ASP窗体 2.然后拖入一个ListView和一个SqlDataSourc ...
ASP.NET 中获取html控件的值的方法
一.知识点: 1.name是用来提交数据的,提供给表单用,可以重复: 2.id则针对文档操作时候用,不能重复.如:document.getElementById(): document.getE ...
ASP.Net中的TreeView控件中对节点的上移和下移操作
Web中的TreeView中的没有PreNode和NextNode属性. 但它的集合属性中有一个IndexOf属性,从而能够找到它的前一个节点知后一个节点. TreeView中要么只有一个根节点:要么 ...
解决Asp.net中的Chart控件运行出现错误提示“ ChartImg.axd 执行子请求时出错”
首先经过错误提示看出需要保存路径之类的,所以猜测是不是配置文件出错了.看了一下配置文件只有连接字符串的配置.后来重新把vs2010关了重新打开,又新建了一个页面,重新添加空间然后运行使用.然后再看配置 ...

asp.net中使用mschart控件

asp.net中使用mschart控件相关推荐

最新文章

热门文章