这段时间我在学习DevExpress控件的知识,这款控件功能强大、UI精美和兼容性好,可以说是.Net开发必知必会了,据说熟练掌握DevExpress面试时加分哟!今天我将教大家如何使用DevExpress的ChartControl控件绘制实时曲线。
1.安装DevExpress
访问官网下载,新用户30天试用,成功安装DevExpress后,在VS的工具箱可以看到DX开头的控件。
2.新建VS项目
这里需要注意目标框架尽量高级,低版本部分DX控件会不支持,我使用的是.Net Framework 4.7.2。
3.创建图表
ChartControl支持的图表类型很丰富,实例演示的是一个点图,直接在Form1_Load函数中添加如下代码即可得到一个简单的点图。
using System; using System.Windows.Forms; using DevExpress.XtraCharts; // ... private void Form1_Load(object sender, EventArgs e) { // Create a new chart. ChartControl pointChart = new ChartControl(); // Create a point series. Series series1 = new Series("Series 1", ViewType.Point); // Set the numerical argument scale type for the series, // as it is qualitative, by default. series1.ArgumentScaleType = ScaleType.Numerical; // Add points to it. series1.Points.Add(new SeriesPoint(1, 10)); series1.Points.Add(new SeriesPoint(2, 22)); series1.Points.Add(new SeriesPoint(3, 14)); series1.Points.Add(new SeriesPoint(4, 27)); series1.Points.Add(new SeriesPoint(5, 15)); series1.Points.Add(new SeriesPoint(6, 28)); series1.Points.Add(new SeriesPoint(7, 15)); series1.Points.Add(new SeriesPoint(8, 33)); // Add the series to the chart. pointChart.Series.Add(series1); // Access the view-type-specific options of the series. PointSeriesView myView1 = (PointSeriesView)series1.View; myView1.PointMarkerOptions.Kind = MarkerKind.Star; myView1.PointMarkerOptions.StarPointCount = 5; myView1.PointMarkerOptions.Size = 20; // Access the type-specific options of the diagram. ((XYDiagram)pointChart.Diagram).EnableAxisXZooming = true; // Hide the legend (if necessary). pointChart.Legend.Visible = false; // Add a title to the chart (if necessary). pointChart.Titles.Add(new ChartTitle()); pointChart.Titles[0].Text = "A Point Chart"; // Add the chart to the form. pointChart.Dock = DockStyle.Fill; this.Controls.Add(pointChart); }
4.曲线水平移动
图表的点数如果不加以限制,会随着点数的增加而不断压缩整个图表使得显示效果不佳,我们可以通过“删旧加新”的方法实现曲线水平移动的效果,具体的思路是当点数超过我们设定的最大值时,先删除最左侧的点,再添加一个新点。这里我通过定时器加载addPoint事件,每秒添加一个新点。
private void addPoint(object source, System.Timers.ElapsedEventArgs e) { row = row + 1;//点数自增 value = rd.Next(15, 40);//生成随机值 //点数超过50个时,曲线水平向左运动 if (row < 50) { series1.Points.Add(new SeriesPoint(row, value));//添加新点 label2.Text = value.ToString(); } else { if (series1.Points.Count > 0) { series1.Points.RemoveAt(0);//删除最左侧的点 series1.Points.Add(new SeriesPoint(row, value));//添加新点 label2.Text = value.ToString(); } } }
5.添加水平线
增加水平线作为参考可以让数据呈现更直观,这里我添加了一条上限和一条下限。
//创建上下限线条 XYDiagram diagram = (XYDiagram)pointChart.Diagram; diagram.DefaultPane.BackColor = Color.LemonChiffon;//背景颜色 diagram.AxisY.ConstantLines.Clear(); ConstantLine constantLine1 = new ConstantLine("上限", 30); constantLine1.Color = Color.Black;//直线颜色 constantLine1.Title.TextColor = Color.Black;//直线文本字体颜色 diagram.AxisY.ConstantLines.Add(constantLine1); ConstantLine constantLine2 = new ConstantLine("下限", 20); constantLine2.Color = Color.Black; constantLine2.Title.TextColor = Color.Black; diagram.AxisY.ConstantLines.Add(constantLine2);
6.设置Y轴可视范围
X-Y图表是以坐标系为基准的,如果实际运行中突然采集了一个数据偏移特别大的点,就会导致图表被严重拉伸变形,我们可以通过设定X-Y轴的可视范围来限制显示区间。这里我设定了Y轴的可视范围为15-39,设定X轴的方法相同只需要将AxisY改为AxisX即可。
//设置Y轴最小值和最大值,即默认情况下Y轴显示的范围 AxisRange DIA = (AxisRange)((XYDiagram)pointChart.Diagram).AxisY.Range; DIA.SetMinMaxValues(15, 39);
疑惑:
我原本还想设置条件改变点的颜色,比如数值在上限和下限间为绿色,超过上限为红色,低于下限为黑色,实际操作后发现只能改变整条曲线的颜色,不能改变某个点的颜色。
代码全文:
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using DevExpress.XtraCharts; using System.Timers; namespace lianxi3 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } int row = 0;//点数 int value = 0;//数值 Random rd = new Random();//随机值 // 创建一个点图 ChartControl pointChart = new ChartControl(); // 创建一条曲线 Series series1 = new Series("Series 1", ViewType.Point); private void addPoint(object source, System.Timers.ElapsedEventArgs e) { row = row + 1;//点数自增 value = rd.Next(15, 40);//生成随机值 //点数超过50个时,曲线水平向左运动 if (row < 50) { series1.Points.Add(new SeriesPoint(row, value));//添加新点 label2.Text = value.ToString(); } else { if (series1.Points.Count > 0) { series1.Points.RemoveAt(0);//删除最左侧的点 series1.Points.Add(new SeriesPoint(row, value));//添加新点 label2.Text = value.ToString(); } } } private void Form1_Load(object sender, EventArgs e) { //定时器 System.Timers.Timer t = new System.Timers.Timer(1000);//实例化Timer类,设置间隔时间为1000毫秒; t.Elapsed += new System.Timers.ElapsedEventHandler(addPoint);//到达时间的时候执行事件; t.AutoReset = true;//设置是执行一次(false)还是一直执行(true); t.Enabled = true;//是否执行System.Timers.Timer.Elapsed事件; t.Start();//启动 //设置序列的数字参数比例类型,默认情况下是定性的。 series1.ArgumentScaleType = ScaleType.Numerical; //将线条加入到表中 pointChart.Series.Add(series1); //访问该系列的特定于视图类型的选项。 PointSeriesView myView1 = (PointSeriesView)series1.View; myView1.PointMarkerOptions.Kind = MarkerKind.Circle; myView1.PointMarkerOptions.StarPointCount = 5; myView1.PointMarkerOptions.Size = 5; myView1.PointMarkerOptions.BorderColor = Color.Lime;//点的颜色 //创建上下限线条 XYDiagram diagram = (XYDiagram)pointChart.Diagram; diagram.DefaultPane.BackColor = Color.LemonChiffon;//背景颜色 diagram.AxisY.ConstantLines.Clear(); ConstantLine constantLine1 = new ConstantLine("上限", 30); constantLine1.Color = Color.Black;//直线颜色 constantLine1.Title.TextColor = Color.Black;//直线文本字体颜色 diagram.AxisY.ConstantLines.Add(constantLine1); ConstantLine constantLine2 = new ConstantLine("下限", 20); constantLine2.Color = Color.Black; constantLine2.Title.TextColor = Color.Black; diagram.AxisY.ConstantLines.Add(constantLine2); //访问图表的特定于类型的选项。 ((XYDiagram)pointChart.Diagram).EnableAxisXZooming = true; //隐藏图例(如有必要)。 pointChart.Legend.Visible = false; //向图表添加标题(如有必要)。 pointChart.Titles.Add(new ChartTitle()); pointChart.Titles[0].Text = "数量表";//标题 //将图表添加到界面。 pointChart.Dock = DockStyle.Fill; this.Controls.Add(pointChart); //设置Y轴最小值和最大值,即默认情况下Y轴显示的范围 AxisRange DIA = (AxisRange)((XYDiagram)pointChart.Diagram).AxisY.Range; DIA.SetMinMaxValues(15, 39); } private void Button1_Click(object sender, EventArgs e) { System.Diagnostics.Process.Start("https://www.daboke.com");//欢迎访问大博客! } private void Button2_Click(object sender, EventArgs e) { System.Diagnostics.Process.Start("https://www.daboke.com/devexpress1");//原文链接! } } }
原文链接:https://www.daboke.com/devexpress/devexpress1.html
源码下载:https://pan.baidu.com/s/1cUV0BmY55IeSEt3p3YjECg 提取码:epbt