DevExpress绘制实时曲线

这段时间我在学习DevExpress控件的知识，这款控件功能强大、UI精美和兼容性好，可以说是.Net开发必知必会了，据说熟练掌握DevExpress面试时加分哟！今天我将教大家如何使用DevExpress的ChartControl控件绘制实时曲线。

1.安装DevExpress

访问官网下载，新用户30天试用，成功安装DevExpress后，在VS的工具箱可以看到DX开头的控件。

图1-DevExpress控件

2.新建VS项目

这里需要注意目标框架尽量高级，低版本部分DX控件会不支持，我使用的是.Net Framework 4.7.2。

图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