ASP.NET图表控件MSChart

最新推荐文章于 2025-05-15 16:23:17 发布

转载最新推荐文章于 2025-05-15 16:23:17 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/captain_ccc/articles/4178863.html

文章标签：

#ui

本文介绍如何在ASP.NET项目中使用MsChart图表控件，包括安装、配置及多种图表类型的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间，开发项目时，由于需要，需要将一些数据统计，并以图表形式显示。由于是asp.net，所以就找到了MsChart图表控件，还是挺方便实用的，分享一下。

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

我们现在可以使用<asp:chart runat="server"/>了，相关文章及下载：

工具栏中找到“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存储。

创建一张二维数据表

接下来，对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

效果图

条形图

 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