C#窗体Winform，使用实时图表：折线图、柱状图

如何在C#窗体中使用实时图表，这里需要用到Chart控件。先看下Demo效果图：

 

 

一、创建Winform窗体，并找到Chart控件

 

Chart控件，目前仅在.net framework下才有，.net core下暂时还没有。所以本文针对的环境是.net framework下的winform窗体。

如上图，在工具箱中找到“数据”->“Chart”控件。请注意，在“所有Windows窗体”那里，是找不到Chart控件的。

二、将Chart控件拖入到窗体中

 

然后设置Dock属性为Fill，效果如下图所示：

 

三、创建X轴变量名

 

如上图，找到Series属性，它表示X轴的变量，可以设置多个的，作为演示，我们仅选择简单的入门为主，即只使用一个X轴变量。

 

我们设置Series属性，名称叫做“次数”，图形使用连线方式。“确定”后效果如下图：

 

 

四、我们生成一些随机金额

为了让图表动态起来，我们假设每次的付款金额是有一个随机值的，那么X轴就是次数， Y轴就是每次的付款金额。

 

我们搞一个“启动”按钮在上面，双击该按钮，写入一些业务代码：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;

namespace WindowsFormsApp2
{
    public partial class BetForm : Form
    {
        /// 

        /// 过往的金额
        /// 
        private readonly List _pastMoney;
        private double _maxAxisY, _minAxisY;

        public BetForm()
        {
            InitializeComponent();

            this._pastMoney = new List();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            //启动一个后台线程
            Task.Run(() =>
            {
                Random random = new Random();
                for (; ; )
                {
                    //生成一个四舍五入带2位小数点的随机金额
                    double yValue = Math.Round(random.NextDouble() * 100, 2, MidpointRounding.AwayFromZero);

                    this.UpdateChart(yValue);
                }
            });
        }

        /// 

        /// 每秒钟不停的更新图形，最多允许5个节点
        /// 
        /// 
        private void UpdateChart(double totalMoney)
        {
            this.Invoke(new Action(() =>
            {
                Series serie = this.chart1.Series[0];

                serie.Points.SuspendUpdates();
                if (serie.Points.Count == 5)
                {
                    serie.Points.RemoveAt(0);
                    this._pastMoney.RemoveAt(0);

                    this._maxAxisY = this._pastMoney.Max(q => q);
                    this._minAxisY = this._pastMoney.Min(q => q);
                }

                if (this._maxAxisY < totalMoney)
                {
                    this._maxAxisY = totalMoney;
                }
                if (this._minAxisY > totalMoney)
                {
                    this._minAxisY = totalMoney;
                }

                //不断的更新图表的最大值和最小值范围，使得折线图总是显示最好看。
                this.chart1.ChartAreas[0].AxisY.Maximum = _maxAxisY;
                this.chart1.ChartAreas[0].AxisY.Minimum = _minAxisY;

                //仅修改Y轴的值
                serie.Points.AddY(totalMoney);
                serie.Points.ResumeUpdates();

                this._pastMoney.Add(totalMoney);
            }));

            Thread.Sleep(1000);
        }
    }
}

上面是完整代码，您可以直接复制使用。

五、最后看下demo效果图