C# 使用ChartControl控件制作曲線圖

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

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

鏈接:https://pan.baidu.com/s/1iRg8qLtBHjDV6IlRq6-mFg

提取碼:xyl2

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

3. 添加曲線圖,并設置其屬性

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

3.1. Series Collection:在此處添加曲線圖,實例添加的是Line Series下的Line曲線

GENERAL-LabelsVisibility:顯示點對應Y軸的數值

VIEW:MARKER OPTIONS:線上的實心點設置

VIEW:APPEARANCE:線的設置

3.2 因為時模擬的數據,所以我們要設置X軸的參數類型為自定義

4. 開始實現功能

 1 using DevExpress.XtraCharts; 2 using System; 3 using System.Windows.Forms; 4  5 namespace ChartControl 6 { 7     public partial class Form1 : Form 8     { 9         private const int _pointsCount = 15;  //固定保留15個點10         private int _hour = 0;11         private int _minute = 0;12         private SeriesPointCollection _points;13 14         public Form1()15         {16             InitializeComponent();17             _points = chartControl1.Series[0].Points;18         }19 20         private void timer1_Tick(object sender, EventArgs e)21         {22             if (_minute >= 60)23             {24                 _hour += 1;25                 _minute = 0;26             }27             if (_hour == 24)28             {29                 _hour = 0;30             }31             if (_points.Count >= _pointsCount)32             {33                 _points.RemoveAt(0);34             }35             var argument = $"{_hour.ToString().PadLeft(2, '0')}:{_minute.ToString().PadLeft(2, '0')}";  // X軸數據36             var value = math.round(new Random().NextDouble() * 20, 2);  // Y軸數據37             var seriesPoint = new SeriesPoint(argument, value);38             _points.Add(seriesPoint);39             _minute += 1;40         }41     }42 }

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

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

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