C# 历史曲线控件 基于时间的曲线控件 可交互的高级曲线控件 HslControls曲线控件使用教程...

本篇博客主要对 HslControls 中的曲线控件做一个详细的教程说明，大家可以根据下面的教程开发出高质量的曲线控件

 

Prepare

---

先从nuget下载到组件，然后就可以使用组件里的各种组件信息了。

 

在Visual Studio 中的NuGet管理器中可以下载安装，也可以直接在NuGet控制台输入下面的指令安装：

Install-Package HslControls

　　

NuGet安装教程  http://www.cnblogs.com/dathlin/p/7705014.html

Demo

---

 

demo项目的源代码，https://github.com/dathlin/HslControlsDemo

有一个demo程序可以下载，地址为 demo.zip

所支持的控件信息如下：

曲线控件先上图，看看

 

 

适用场景

---

 

正式开始文章之前，我们先来看看这个曲线控件到底为了解决什么样子的问题的，在工业的场景中，我们会采集一些设备的工艺参数信息，比如锅炉和模具温度，锅炉压力，仓库湿度，等等情况的信息，我们会在数据库建立一张数据表，可能2秒钟存储一条数据，可能5秒钟存储一条数据等等，甚至可能30秒，现在我们有数据了，需要将数据进行显示出来，使用本控件即可以快速的开发可交互式的曲线显示。

如下就是一个数据库的示例

 

曲线显示

---

 当然实际中你可以根据自己的情况来，不过这都无所谓，应该本控件是需要传入处理过的数据的，ok，我们现在界面上拖一个控件

 

先调整两侧坐标轴的，比如温度的范围是0-250，压力的范围是0-5，我们就调整这个控件的属性来实现功能

还可以调整分割线的情况，我们调整成如下的数据

然后显示如下：

 

 我们再调整下文字，设置为空，在新增一个按钮，点击的时候就要去数据库查询数据了，由于查询的时间不定，需要花费一些时间，我们还需要进行友好的提示信息，比如正在查询数据...

 

然后我们完善代码

        private void button1_Click( object sender, EventArgs e )
        {
            hslCurveHistory1.Text = "正在加载数据...";
            hslCurveHistory1.RemoveAllCurve( );
            new Thread( new ThreadStart( ThreadReadExample1 ) ) { IsBackground = true }.Start( );
        }

        private void ThreadReadExample1( )
        {
            // 模拟下查询时间
            Thread.Sleep( 2000 );
           
            // 这里数据数据，实际应该是你的真实的数据
            float[] temp = new float[2000];
            for (int i = 0; i < temp.Length; i++)
            {
                temp[i] = Convert.ToSingle( random.NextDouble( ) * 40 + 100 );
            }

            // 显示出数据信息来
            Invoke( new Action( ( ) =>
            {
                // 设置曲线属性，名称，数据，颜色，是否平滑，格式化显示文本
                hslCurveHistory1.SetLeftCurve( "温度", temp, Color.DodgerBlue, true, "{0:F1} ℃" );
                hslCurveHistory1.RenderCurveUI( );
            } ) );
        }

        private Random random = new Random( );

此处只有一条曲线，横轴还没设置，这已经是最简单的曲线显示了，而且支持按钮多次重复点击，不会发生数据叠加。效果如下：

 

当光标移动的时候，还会提示当前的光标所在位置的数据信息，目前所具备的功能还是比较简单的，我们从数据库获取到数据，通常还包含了时间轴，此处就要传入同等数量长度的时间轴信息

注意，时间轴是随着时间逐渐增加的信息，确保是单向增加的。

所以我们的代码改成如下：

        private void ThreadReadExample1( )
        {
            // 模拟下查询时间
            Thread.Sleep( 2000 );
           
            // 这里数据数据，实际应该是你的真实的数据
            float[] temp = new float[2000];
            DateTime[] times = new DateTime[2000];