C# 實時曲線圖

示例目的：使用時間器添加曲線圖的點，以達到實時描繪曲線圖的效果。X軸顯示時分，Y軸顯示0-20的隨機數

1. 必須安裝DevExpress控件，沒有安裝的朋友可以使用下面的雲盤鏈接下載安裝

鏈接：https://pan.baidu.com/s/1nXPoRsIr_RR95GHtuN4LJg

提取碼：yh98

 

2. 新建Windows窗體應用程序，直接在工具箱搜索ChartControl並使用改組件

 

3. 添加曲線圖，並設置其屬性

當拖拉該組件到窗體設計頁面時，會彈出【Chart Designer】，可在此處添加曲線圖，並設置其基本屬性

Series Collection：在此處添加曲線圖，實例添加的是Line Series下的Line曲線

設置基本屬性：

LabelsVisibility：顯示點對應Y軸的數值

MARKER OPTIONS：線上的實心點設置

APPEARANCE：線的設置

 

4. 開始實現功能

using DevExpress.Utils;
using DevExpress.XtraCharts;
using System;
using System.Windows.Forms;
 
namespace ChartControl
{
    public partial class Form1 : Form
    {
        private const int _pointsCount = 15;  //固定保留15個點
        private int _hour = 0;
        private int _minute = 0;
        private SeriesPointCollection _points;
 
        public Form1()
        {
            InitializeComponent();
            var series = chartControl1.Series[0];
            _points = series.Points;
 
            #region 常用屬性，可按需求設置
            series.ArgumentScaleType = ScaleType.Qualitative;     //使用自定義時間
            //chartControl1.ToolTipEnabled = DefaultBoolean.True; //顯示曲線端點值
            //chartControl1.ToolTipOptions.ShowForSeries = true;  //顯示曲線名稱
            //chartControl1.CrosshairEnabled = DefaultBoolean.False;//隱藏十字線
 
            //XYDiagram diagram = (XYDiagram)chartControl1.Diagram;
            ////設定曲線圖縮放
            //diagram.EnableAxisXScrolling = true;
            //diagram.EnableAxisXZooming = true;
            //diagram.EnableAxisYScrolling = true;
            //diagram.EnableAxisYZooming = true;
            ////設定曲線圖視野，注意要先設置WholeRange
            //diagram.AxisY.WholeRange.SetMinMaxValues(-10, 30);
            //diagram.AxisY.VisualRange.SetMinMaxValues(-10, 30);
            #endregion
        }
 
        private void timer1_Tick(object sender, EventArgs e)
        {
            if (_minute >= 60)
            {
                _hour += 1;
                _minute = 0;
            }
            if (_hour == 24)
            {
                _hour = 0;
            }
            if (_points.Count >= _pointsCount)
            {
                _points.RemoveAt(0);
            }
            var argument = $"{_hour.ToString().PadLeft(2, '0')}:{_minute.ToString().PadLeft(2, '0')}";  // X軸數據
            var value = Math.Round(new Random().NextDouble() * 20, 2);  // Y軸數據
            var seriesPoint = new SeriesPoint(argument, value);
            _points.Add(seriesPoint);
            _minute += 1;
        }
    }
}

 

 

5. 啟用計時器，查看效果

 

 

有其他需求可以查看控件屬性進行修改，我在這里就不詳述了。

實例源碼鏈接：https://github.com/Jcanc/ChartControl