强大的Winform Chart图表控件使用说明

强大的Winform Chart图表控件使用说明

引言

以前经常开发网页端的软件,图表组件一般用echart,功能和样式都非常齐全。但是当用winform开发时,类似的组件就很少了,而且稍微好点的都还收费。
后来探索了下winform自带的 chart控件,发现其功能非常强大,只要你有好看的设计图,基本上都可以按设计图调整出来,下面展示下自己做技术测试的图片:
winform chart使用样例

使用说明

工具箱-数据分组中我们就可以看到chart控件,使用时拖拽到界面即可。可以通过属性面板设置其样式,也可以通过代码来调整样式。设置的属性可参照:
https://www.cnblogs.com/arxive/p/5861960.html

总结了部分设置chart样式功能的通用类:

	public class ChartHelper
    {
        /// <summary>
        /// Name:添加序列
        /// Author:by boxuming 2019-04-28 13:59
        /// </summary>
        /// <param name="chart">图表对象</param>
        /// <param name="seriesName">序列名称</param>
        /// <param name="chartType">图表类型</param>
        /// <param name="color">颜色</param>
        /// <param name="markColor">标记点颜色</param>
        /// <param name="showValue">是否显示数值</param>
        public static void AddSeries(Chart chart, string seriesName, SeriesChartType chartType, Color color, Color markColor, bool showValue = false)
        {
            chart.Series.Add(seriesName);
            chart.Series[seriesName].ChartType = chartType;
            chart.Series[seriesName].Color = color;
            if (showValue)
            {
                chart.Series[seriesName].IsValueShownAsLabel = true;
                chart.Series[seriesName].MarkerStyle = MarkerStyle.Circle;
                chart.Series[seriesName].MarkerColor = markColor;
                chart.Series[seriesName].LabelForeColor = color;
                chart.Series[seriesName].LabelAngle = -90;
            }
        }

        /// <summary>
        /// Name:设置标题
        /// Author:by boxuming 2019-04-28 14:25
        /// </summary>
        /// <param name="chart">图表对象</param>
        /// <param name="chartName">图表名称</param>
        public static void SetTitle(Chart chart, string chartName, Font font, Docking docking, Color foreColor)
        {
            chart.Titles.Add(chartName);
            chart.Titles[0].Font = font;
            chart.Titles[0].Docking = docking;
            chart.Titles[0].ForeColor = foreColor;
        }

        /// <summary>
        /// Name:设置样式
        /// Author:by boxuming 2019-04-23 14:04
        /// </summary>
        /// <param name="chart">图表对象</param>
        /// <param name="backColor">背景颜色</param>
        /// <param name="foreColor">字体颜色</param>
        public static void SetStyle(Chart chart, Color backColor, Color foreColor)
        {
            chart.BackColor = backColor;
            chart.ChartAreas[0].BackColor = backColor;
            chart.ForeColor = Color.Red;
        }

        /// <summary>
        /// Name:设置图例
        /// Author:by boxuming 2019-04-23 14:30
        /// </summary>
        /// <param name="chart">图表对象</param>
        /// <param name="docking">停靠位置</param>
        /// <param name="align">对齐方式</param>
        /// <param name="backColor">背景颜色</param>
        /// <param name="foreColor">字体颜色</param>
        public static void SetLegend(Chart chart, Docking docking, StringAlignment align, Color backColor, Color foreColor)
        {
            chart.Legends[0].Docking = docking;
            chart.Legends[0].Alignment = align;
            chart.Legends[0].BackColor = backColor;
            chart.Legends[0].ForeColor = foreColor;
        }

        /// <summary>
        /// Name:设置XY轴
        /// Author:by boxuming 2019-04-23 14:35
        /// </summary>
        /// <param name="chart">图表对象</param>
        /// <param name="xTitle">X轴标题</param>
        /// <param name="yTitle">Y轴标题</param>
        /// <param name="align">坐标轴标题对齐方式</param>
        /// <param name="foreColor">坐标轴字体颜色</param>
        /// <param name="lineColor">坐标轴颜色</param>
        /// <param name="arrowStyle">坐标轴箭头样式</param>
        /// <param name="xInterval">X轴的间距</param>
        /// <param name="yInterval">Y轴的间距</param>
        public static void SetXY(Chart chart, string xTitle, string yTitle, StringAlignment align, Color foreColor, Color lineColor, AxisArrowStyle arrowStyle, double xInterval, double yInterval)
        {
            chart.ChartAreas[0].AxisX.Title = xTitle;
            chart.ChartAreas[0].AxisY.Title = yTitle;
            chart.ChartAreas[0].AxisX.TitleAlignment = align;
            chart.ChartAreas[0].AxisY.TitleAlignment = align;
            chart.ChartAreas[0].AxisX.TitleForeColor = foreColor;
            chart.ChartAreas[0].AxisY.TitleForeColor = foreColor;
            chart.ChartAreas[0].AxisX.LabelStyle = new LabelStyle() { ForeColor = foreColor };
            chart.ChartAreas[0].AxisY.LabelStyle = new LabelStyle() { ForeColor = foreColor };
            chart.ChartAreas[0].AxisX.LineColor = lineColor;
            chart.ChartAreas[0].AxisY.LineColor = lineColor;
            chart.ChartAreas[0].AxisX.ArrowStyle = arrowStyle;
            chart.ChartAreas[0].AxisY.ArrowStyle = arrowStyle;
            chart.ChartAreas[0].AxisX.Interval = xInterval;
            chart.ChartAreas[0].AxisY.Interval = yInterval;
        }

        /// <summary>
        /// Name:设置网格
        /// Author:by boxuming 2019-04-23 14:55
        /// </summary>
        /// <param name="chart">图表对象</param>
        /// <param name="lineColor">网格线颜色</param>
        /// <param name="xInterval">X轴网格的间距</param>
        /// <param name="yInterval">Y轴网格的间距</param>
        public static void SetMajorGrid(Chart chart, Color lineColor, double xInterval, double yInterval)
        {
            chart.ChartAreas[0].AxisX.MajorGrid.LineColor = lineColor;
            chart.ChartAreas[0].AxisY.MajorGrid.LineColor = lineColor;
            chart.ChartAreas[0].AxisX.MajorGrid.Interval = xInterval;
            chart.ChartAreas[0].AxisY.MajorGrid.Interval = yInterval;
        }
    }

使用示例

文章开头展示的图片中的四个统计图表可通过以下代码实现:

			chart1.Series.Clear();
            ChartHelper.AddSeries(chart1, "柱状图", SeriesChartType.Column, Color.Lime, Color.Red, true);
            ChartHelper.AddSeries(chart1, "曲线图", SeriesChartType.Spline, Color.Red, Color.Red);
            ChartHelper.SetTitle(chart1, "柱状图与曲线图", new Font("微软雅黑", 12), Docking.Bottom, Color.White);
            ChartHelper.SetStyle(chart1, Color.Transparent, Color.White);
            ChartHelper.SetLegend(chart1, Docking.Top, StringAlignment.Center, Color.Transparent, Color.White);
            ChartHelper.SetXY(chart1, "序号", "数值", StringAlignment.Far, Color.White, Color.White, AxisArrowStyle.SharpTriangle, 1, 2);
            ChartHelper.SetMajorGrid(chart1, Color.Gray, 20, 2);

            chart2.Series.Clear();
            ChartHelper.AddSeries(chart2, "饼状图", SeriesChartType.Pie, Color.Lime, Color.Red, true);
            ChartHelper.SetStyle(chart2, Color.Transparent, Color.White);
            ChartHelper.SetLegend(chart2, Docking.Top, StringAlignment.Center, Color.Transparent, Color.White);

            chart3.Series.Clear();
            ChartHelper.AddSeries(chart3, "曲线图", SeriesChartType.SplineRange, Color.FromArgb(100,46, 199, 201), Color.Red, true);
            ChartHelper.SetTitle(chart3, "曲线图", new Font("微软雅黑", 12), Docking.Bottom, Color.FromArgb(46, 199, 201));
            ChartHelper.SetStyle(chart3, Color.Transparent, Color.White);
            ChartHelper.SetLegend(chart3, Docking.Top, StringAlignment.Center, Color.Transparent, Color.White);
            ChartHelper.SetXY(chart3, "序号", "数值", StringAlignment.Far, Color.White, Color.White, AxisArrowStyle.SharpTriangle, 1, 2);
            ChartHelper.SetMajorGrid(chart3, Color.Gray, 20, 2);

            chart4.Series.Clear();
            ChartHelper.AddSeries(chart4, "饼状图", SeriesChartType.Funnel, Color.Lime, Color.Red, true);
            ChartHelper.SetStyle(chart4, Color.Transparent, Color.White);
            ChartHelper.SetLegend(chart4, Docking.Top, StringAlignment.Center, Color.Transparent, Color.White);
            
			RefreshData();

其中,均是通过调用通用类来进行设置,这样更方便一些。最后的RefreshData()是绑定图表数据的部分,否则没有数据的话图表是无法显示的。绑定数据部分代码如下:

		public void RefreshData()
        {
            List<int> x1 = new List<int>() { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 };
            List<int> y1 = new List<int>();
            Random ra = new Random();
            y1 = new List<int>() {
                ra.Next(1, 10),
                ra.Next(1, 10),
                ra.Next(1, 10),
                ra.Next(1, 10),
                ra.Next(1, 10),
                ra.Next(1, 10),
                ra.Next(1, 10),
                ra.Next(1, 10),
                ra.Next(1, 10),
                ra.Next(1, 10),
                ra.Next(1, 10),
                ra.Next(1, 10)
            };
            RefreshChart(x1, y1, "chart1");
            RefreshChart(x1, y1, "chart2");
            RefreshChart(x1, y1, "chart3");
            RefreshChart(x1, y1, "chart4");
        }

        public delegate void RefreshChartDelegate(List<int> x, List<int> y, string type);
        public void RefreshChart(List<int> x, List<int> y, string type)
        {
            if (type == "chart1")
            {
                if (this.chart1.InvokeRequired)
                {
                    RefreshChartDelegate stcb = new RefreshChartDelegate(RefreshChart);
                    this.Invoke(stcb, new object[] { x, y, type });
                }
                else
                {
                    chart1.Series[0].Points.DataBindXY(x, y);
                    chart1.Series[1].Points.DataBindXY(x, y);
                }
            }
            else if (type == "chart2")
            {
                if (this.chart2.InvokeRequired)
                {
                    RefreshChartDelegate stcb = new RefreshChartDelegate(RefreshChart);
                    this.Invoke(stcb, new object[] { x, y, type });
                }
                else
                {
                    chart2.Series[0].Points.DataBindXY(x, y);
                    List<Color> colors = new List<Color>() {
                        Color.Red,
                        Color.DarkRed,
                        Color.IndianRed,
                        Color.MediumVioletRed,
                        Color.OrangeRed,
                        Color.PaleVioletRed,
                        Color.Purple,
                        Color.DarkOrange,
                        Color.Maroon,
                        Color.LightCoral,
                        Color.LightPink,
                        Color.Magenta
                    };
                    DataPointCollection points = chart2.Series[0].Points;
                    for (int i = 0; i < points.Count; i++)
                    {
                        points[i].Color = colors[i];
                    }
                }
            }
            else if (type == "chart3")
            {
                if (this.chart3.InvokeRequired)
                {
                    RefreshChartDelegate stcb = new RefreshChartDelegate(RefreshChart);
                    this.Invoke(stcb, new object[] { x, y, type });
                }
                else
                {
                    chart3.Series[0].Points.DataBindXY(x, y);
                }
            }
            else if (type == "chart4")
            {
                if (this.chart4.InvokeRequired)
                {
                    RefreshChartDelegate stcb = new RefreshChartDelegate(RefreshChart);
                    this.Invoke(stcb, new object[] { x, y, type });
                }
                else
                {
                    chart4.Series[0].Points.DataBindXY(x, y);
                    List<Color> colors = new List<Color>() {
                        Color.Red,
                        Color.DarkRed,
                        Color.IndianRed,
                        Color.MediumVioletRed,
                        Color.OrangeRed,
                        Color.PaleVioletRed,
                        Color.Purple,
                        Color.DarkOrange,
                        Color.Maroon,
                        Color.LightCoral,
                        Color.LightPink,
                        Color.Magenta
                    };
                    DataPointCollection points = chart4.Series[0].Points;
                    for (int i = 0; i < points.Count; i++)
                    {
                        points[i].Color = colors[i];
                    }
                }
            }
        }

为了让图表展现动画效果,添加了一个定时器,用来实时改变数据,这样就可以看到动起来的图表了。定时器代码如下:

		private void Timer1_Tick(object sender, EventArgs e)
        {
            new Thread(new ThreadStart(RefreshData)).Start();
        }

资料

以上只是使用chart控件的几个简单示例,而chart控件的功能远远不止这些。为了更方便地了解和使用其他功能,特提供了一些资料,其中包括图表的属性说明文档、各类图表的样式和对应的代码、以及程序示例等,下载地址如下:
链接:https://pan.baidu.com/s/1mCxiwrEBxeCKkSltXMJPpA
提取码:9pgr

WinForm chart控件是一种用于在Windows Forms应用程序中显示图表控件。它提供了丰富的功能和灵活性,能够帮助开发者轻松地创建各种类型的图表,例如折线图、柱状图、饼图等。 WinForm chart控件具有以下特点: 1. 数据绑定:可以通过数据绑定功能,将数据源与图表控件相关联,实现动态的数据显示和更新。 2. 各种图表类型:WinForm chart控件支持多种图表类型,包括折线图、柱状图、饼图等。开发者可以根据需要选择合适的图表类型,展示不同类型的数据。 3. 自定义样式:开发者可以自定义图表的样式,包括颜色、字体、边框等,以满足不同的设计要求。 4. 交互功能:WinForm chart控件支持用户交互功能,例如鼠标悬停显示数据标签、缩放、平移等。这使得用户能够更加直观地了解图表中的数据。 5. 数据分析功能:WinForm chart控件提供了丰富的数据分析功能,例如计算平均值、最大值、最小值等。这些功能能够帮助开发者深入分析和理解图表中的数据。 6. 打印和导出:WinForm chart控件支持打印和导出功能,开发者可以将图表保存为图像文件或打印出来,方便与他人共享和使用。 总之,WinForm chart控件是一款功能强大、易于使用图表控件,通过它,开发者可以轻松地创建并展示各种类型的图表,为用户提供更好的数据可视化体验。
评论 39
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值