asp.net中使用mschart控件

最新推荐文章于 2020-05-22 11:16:31 发布

komla168

最新推荐文章于 2020-05-22 11:16:31 发布

阅读量1.8k

点赞数 3

分类专栏：网页

网页专栏收录该内容

5 篇文章 0 订阅

订阅专栏

著作权声明：本文由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

效果图