2021-03-10强大的Winform Chart图表控件使用说明

最新推荐文章于 2025-09-11 14:02:52 发布
转载 最新推荐文章于 2025-09-11 14:02:52 发布 · 1.8k 阅读 · 8 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/boxuming/article/details/89678159

本文介绍如何使用WinForm自带的Chart控件绘制多种图表，包括柱状图、曲线图、饼状图等，并提供了丰富的代码示例和图表样式设置技巧。

本文转载连接：https://blog.youkuaiyun.com/boxuming/article/details/89678159

 

引言
以前经常开发网页端的软件，图表组件一般用echart，功能和样式都非常齐全。但是当用winform开发时，类似的组件就很少了，而且稍微好点的都还收费。
后来探索了下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
————————————————
版权声明：本文为优快云博主「boxuming」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/boxuming/article/details/89678159
【愚公系列】2023年10月 Winform控件专题 Chart控件详解
时光隧道
09-08 3万+
Winform控件是Windows Forms中的用户界面元素，它们可以用于创建Windows应用程序的各种视觉和交互组件，例如按钮、标签、文本框、下拉列表框、复选框、单选框、进度条等。开发人员可以使用Winform控件来构建用户界面并响应用户的操作行为，从而创建功能强大的桌面应用程序。在WinForm中使用Chart控件时，可以通过设置DataSource属性来绑定数据源。以下是一些步骤：首先，确保已将Chart控件添加到窗体设计器中。在设计时或运行时，创建数据源，并将数据源绑定到Chart控件。
实现在C#程序中实现自定义图例功能
09-26
实现在C#程序中实现自定义图例功能，可以自己实现样式的设置
C# winform仪表盘控件及其使用源码示例
02-08
【测试环境】 vs2019,netframwork4.7.2 【博客地址】 blog.csdn.net/FL1623863129/article/details/136079354 【使用注意】 代码已经包含控件，下载后直接可以运行，注意环境
Highcharts网页图表控件实战示例
最新发布
weixin_31974443的博客
09-11 629
Highcharts 是一款基于 JavaScript 的开源图表库，凭借其丰富的图表类型、良好的跨平台兼容性和强大的交互能力，广泛应用于 Web 数据可视化领域。它不仅支持主流浏览器，还兼容移动端设备，成为企业级数据仪表盘、分析系统和可视化平台的首选图表工具之一。Highcharts 的核心优势在于其易用性与可扩展性：开发者可以通过简单的配置快速生成高质量图表，同时也支持模块化引入、动态数据加载、事件绑定、主题定制等高级功能。
C#应用6——chart数据显示(柱状图、饼图、横向柱状图、雷达图)
qq_42832272的博客
05-10 1万+
参考链接：https://blog.csdn.net/qq_38628970/article/details/91041879 柱状图 string[] x = new string[] { "南山大队", "福田大队", "罗湖大队", "宝安大队", "指挥处", }; double[] y = new double[] { 541, 574, 345, 854, 257 }; #region 柱状图 //标题
强大的Winform Chart图表控件使用说明
热门推荐
薄心之心
04-29 7万+
强大的Winform Chart图表控件使用说明引言使用说明使用示例资料 引言 以前经常开发网页端的软件，图表组件一般用echart，功能和样式都非常齐全。但是当用winform开发时，类似的组件就很少了，而且稍微好点的都还收费。 后来探索了下winform自带的 chart控件，发现其功能非常强大，只要你有好看的设计图，基本上都可以按设计图调整出来，下面展示下自己做技术测试的图片： 使用说明 ...
Winform仪表盘控件_C#_仪表盘_winform_
09-30
仪表盘控件，可以加载到winform中。也适合新手学习。
微软自带winform图表控件样例大全开源免费
10-07
在Windows Forms（WinForm）开发中，微软提供了一个强大的图表控件——Chart，它使得开发者能够在应用程序中轻松地创建各种类型的图表，如饼状图、雷达图、折线图、柱状图以及实时曲线图等。这个开源免费的“微软...
基于c#的chart图表控件使用demo
12-12
综上所述，"基于C#的Chart图表控件使用demo"是一个通过C#编程语言和Chart控件来实现数据可视化的实例。它涉及到了数据源的生成、图表系列的添加、数据绑定、样式定制以及事件处理等多个步骤，为学习和理解C#中的数据...
C# WinFrom Chart 图表控件 滚动条 日期时间坐标
05-17
在C# WinForm开发中，图表控件是用于可视化数据的一种强大工具，它可以帮助我们以图形方式展示复杂的数据。本文将深入探讨如何使用C# WinForm的Chart控件，特别是如何添加X轴滚动条以及设置日期时间坐标。此外，我们...
c# winForm chart控件动态更新 支持局部放大
10-22
在C# WinForm应用开发中，我们经常需要利用图表（Chart）控件来展示数据，以便用户能够直观地理解复杂的数值信息。本示例重点讨论如何实现Chart控件的动态更新以及支持局部放大的功能。在Visual Studio 2010环境下，...
C#自定义控件之Winform仪表盘控件.zip
11-08
通过自定义控件，编程实现的仪表盘形状的控件，可以加到Winform程序里做动态显示数据，美化界面。使用方便简单。
Winform控件 半圆仪表盘
08-15
自写的一个Winform控件 一个半圆仪表盘 可以应用在一些报表当中 应该还有BUG
c# Winform自定义控件-仪表盘功能
08-25
主要介绍了c#Winform自定义控件-仪表盘功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
C#编写《仪表盘》控件
01-06
使用C#编写的一个工业仪表盘的控件，控件可以变大小，背景颜色、指针等颜色可以改变。有意向童鞋可以下载参考。本人声明：本人为业余爱好者，编写控件纯粹是玩耍，所以控件并未经过严格测试，和代码冗余测试等等，若发现有错误，请谅解。 开发环境：Visual Studio 2010 开发语言：C# 本人声明：本人为业余爱好者，编写控件纯粹是玩耍，所以控件并未经过严格测试，和代码冗余测试等等，若发现有错误，请谅解。
ECharts 在winform中使用(访问JS)
08-31
ECharts 在winform中使用(访问JS)
winform自定义控件---InstrumentControl仪表控件
weixin_41683726的博客
01-31 2070
winform自定义控件---InstrumentControl仪表控件
DevExpress Winform 常用控件
weixin_30852419的博客
01-04 1303
Ø 前言 DevExpress 控件的功能比较强大，是全球知名控件开发公司，对于开发 B/S 或 C/S 都非常出色，可以实现很炫且功能强大的效果。 DevExpress Winform 常用控件是本人在前几个项目的一些笔记，在实际的项目中可能会经常涉及到，所以对常用控件的属性、方法、事件都列举出来。 Ø 在 Visual Stuodio 中添加 DevExpress 控件 1. 使用...
（五十四）c#Winform自定义控件-仪表盘
冰封一夏
09-11 8389
前提 入行已经7,8年了，一直想做一套漂亮点的自定义控件，于是就有了本系列文章。 GitHub：https://github.com/kwwwvagaa/NetWinformControl 码云：https://gitee.com/kwwwvagaa/net_winform_custom_control.git 如果觉得写的还行，请点个 star 支持一下吧 欢迎前来交流探讨： 企鹅群5...
C#winform chart图表控件折线图
07-23
在 C# WinForm 应用程序中，可以通过 `ChartControl` 或 `.NET` 自带的 `System.Windows.Forms.DataVisualization.Charting.Chart` 控件来创建折线图。以下以 `System.Windows.Forms.DataVisualization.Charting.Chart` 为例，展示如何创建一个基本的折线图。 ### 添加 Chart 控件 1. 在 Visual Studio 中打开 WinForm 设计器。 2. 在工具箱中找到 `Chart` 控件（如果未显示，请右键工具箱 -> 选择项 -> 添加 `System.Windows.Forms.DataVisualization.Charting.Chart`）。 3. 将 `Chart` 控件拖动到窗体上。 ### 创建折线图 在窗体的代码中编写以下逻辑，以创建一个简单的折线图： ```csharp using System; using System.Windows.Forms; using System.Windows.Forms.DataVisualization.Charting; namespace LineChartExample { public partial class Form1 : Form { public Form1() { InitializeComponent(); InitializeChart(); } private void InitializeChart() { // 设置图表区域 ChartArea chartArea = new ChartArea(); chartArea.Name = "MainChartArea"; chartArea.AxisX.Title = "X Axis"; chartArea.AxisY.Title = "Y Axis"; chart.ChartAreas.Add(chartArea); // 创建数据序列 Series series = new Series(); series.Name = "LineSeries"; series.ChartType = SeriesChartType.Line; series.XValueType = ChartValueType.Int; series.YValueType = ChartValueType.Int; // 添加数据点 series.Points.AddXY(1, 5); series.Points.AddXY(2, 10); series.Points.AddXY(3, 7); series.Points.AddXY(4, 15); series.Points.AddXY(5, 12); // 添加到图表 chart.Series.Add(series); } } } ``` ### 说明 - `ChartArea` 定义了图表的绘图区域，并设置 X 轴和 Y 轴的标题。 - `Series` 表示数据序列，通过 `ChartType` 设置为 `SeriesChartType.Line` 来指定折线图。 - 使用 `Points.AddXY()` 方法添加数据点，格式为 `(X, Y)`。 ### 自定义样式 可以通过以下方式调整图表外观： ```csharp // 设置网格线 chart.ChartAreas["MainChartArea"].AxisX.MajorGrid.Enabled = true; chart.ChartAreas["MainChartArea"].AxisY.MajorGrid.Enabled = true; // 设置图例 Legend legend = new Legend(); legend.Name = "MainLegend"; legend.Docking = Docking.Bottom; chart.Legends.Add(legend); // 设置数据点标记 series.MarkerStyle = MarkerStyle.Circle; series.MarkerSize = 8; ``` ### 运行效果 运行应用程序后，将在窗体中显示一个带有数据点的折线图，并且 X 轴和 Y 轴分别标注了标题，同时显示了图例和网格线。 ### 相关问题 如果需要更复杂的交互功能（如动态更新数据、响应鼠标事件等），可以进一步扩展代码逻辑。例如： ```csharp // 动态添加数据点 private void AddDataPoint(int x, int y) { chart.Series["LineSeries"].Points.AddXY(x, y); } ``` ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值