示例目的:使用时间器添加曲线图的点,以达到实时描绘曲线图的效果。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. 开始实现功能
1 using DevExpress.Utils; 2 using DevExpress.XtraCharts; 3 using System; 4 using System.Windows.Forms; 5 6 namespace ChartControl 7 { 8 public partial class Form1 : Form 9 { 10 private const int _pointsCount = 15; //固定保留15个点 11 private int _hour = 0; 12 private int _minute = 0; 13 private SeriesPointCollection _points; 14 15 public Form1() 16 { 17 InitializeComponent(); 18 var series = chartControl1.Series[0]; 19 _points = series.Points; 20 21 #region 常用属性,可按需求设置 22 series.ArgumentScaleType = ScaleType.Qualitative; //使用自定义时间 23 //chartControl1.ToolTipEnabled = DefaultBoolean.True; //显示曲线端点值 24 //chartControl1.ToolTipOptions.ShowForSeries = true; //显示曲线名称 25 //chartControl1.CrosshairEnabled = DefaultBoolean.False;//隐藏十字线 26 27 //XYDiagram diagram = (XYDiagram)chartControl1.Diagram; 28 ////设定曲线图缩放 29 //diagram.EnableAxisXScrolling = true; 30 //diagram.EnableAxisXZooming = true; 31 //diagram.EnableAxisYScrolling = true; 32 //diagram.EnableAxisYZooming = true; 33 ////设定曲线图视野,注意要先设置WholeRange 34 //diagram.AxisY.WholeRange.SetMinMaxValues(-10, 30); 35 //diagram.AxisY.VisualRange.SetMinMaxValues(-10, 30); 36 #endregion 37 } 38 39 private void timer1_Tick(object sender, EventArgs e) 40 { 41 if (_minute >= 60) 42 { 43 _hour += 1; 44 _minute = 0; 45 } 46 if (_hour == 24) 47 { 48 _hour = 0; 49 } 50 if (_points.Count >= _pointsCount) 51 { 52 _points.RemoveAt(0); 53 } 54 var argument = $"{_hour.ToString().PadLeft(2, \'0\')}:{_minute.ToString().PadLeft(2, \'0\')}"; // X轴数据 55 var value = Math.Round(new Random().NextDouble() * 20, 2); // Y轴数据 56 var seriesPoint = new SeriesPoint(argument, value); 57 _points.Add(seriesPoint); 58 _minute += 1; 59 } 60 } 61 }
5. 启用计时器,查看效果
有其他需求可以查看控件属性进行修改,我在这里就不详述了。