Qt之QCustomPlot的二次封装：实现支持多数据线条的时间轴实时动态曲线显示的widget类

前言

在这里读了不少关于Qt图表的文章，遇到了不少大神的文章让我受益匪浅，但遇到更多的是不接地气的事例。一看文章便知道作者肯定没干过工程的，写Qt代码还是基于“玩票儿”或者学习，和真正用于工程实践的东西严重脱节的。
所以从今天开始，我会陆续对Qt的一些关于图表方面的知识一边学习，一边进行介绍，和很多博主不同的是，文章产生的相关代码，是一定可以直接拿到工程实践中方便使用的。
废话不多说，今天就介绍一个基于QCustomPlot第三方图表类而实现的时间轴实时曲线图表。

开发环境的搭建

我使用的Qt版本是：Qt 5.8.0(MSVC 2015,32bit)，Qt Creator 4.2.1。如何安装就不多介绍了。
第三方控件QCustomPlot是我从官方网站上下载的，大家可以去下载，也可以从本文的附件里获得，下面就简单介绍一下如何让你的工程支持QCustomPlot。
新建一个Qt Widget Application工程。

现在我们把QCustomPlot.h和QCustomPlot.cpp拷贝到工程的目录里面，记住，是你的开发目录，不是build开头的那个编译生成的文件夹，然后将其加入到工程中。
然后在pro文件中的greaterThan(QT_MAJOR_VERSION, 4): QT += widgets后面加一个词：printsupport。
到这里，你的工程就支持QCustomPlot类了，是不是很简单，接下来我就对如何封装一个支持多曲线实时显示的图表控件做下介绍。

关键步骤介绍

新建一个Qt 设计师界面类

这个类就是我们要进行二次封装的载体，很多人直接拿代码实现界面。个人认为，除非你是大牛，否则作为入门不深的开发者，还是老老实实的直接靠拖拽来实现自己的Widget吧，提升复用啥的也方便，笨人有笨办法，先学会走再想着飞，否则你就算实现了，也不知道怎么在工程里使用。

我给我新建的Widget类取名叫TimeDynamicListForm,然后在他的上面拖入一个Widget，我给它起个名字叫custom_plot_widget，然后栅格化，让它铺满整个Form。

选中custom_plot_widget，右键“提升为”，将其提升成QCustomPlot，头文件默认即可，然后点击“添加”，然后再点“提升”，编译一下，如果没有错，说明你搭的环境成功了。

为了进一步验证，在mainwindow里面拽出来一个Widget，然后把它提升为咱们自定义的TimeDynamicListForm，方法和刚才提升QCustomPlotL类似，这也是以后我们复用自定义widget的方法，再次编译，如果你得到了这样界面，说明准备工作已经完成了。

好了，准备工作就绪，下面我对实现动态实时显示的关键代码进行介绍。

InitTimeAxis函数：初始化横坐标，让其作为时间轴

void TimeDynamicListForm::InitTimeAxis(int temp_tick_count,double max_second)
{
   
    QSharedPointer<QCPAxisTickerDateTime> date_time_ticker(new QCPAxisTickerDateTime);

    date_time_ticker->setDateTimeFormat("hh:mm:ss");//显示格式

    tick_count=temp_tick_count;
    date_time_ticker->setTickCount(tick_count);//刻度数设置
    date_time_ticker->setTickStepStrategy(QCPAxisTicker::tssMeetTickCount);

    ui->custom_plot_widget->xAxis->setTickLabelRotation(1);//刻度线稍微倾斜，节省空间，参数是角度

    ui->custom_plot_widget->xAxis->setTicker(date_time_ticker);//将其作用于x坐标轴

    //1作为最小单位刻度
    ui->custom_plot_widget->xAxis->setSubTickLength(1);

    max_second_count=max_second;//max_second_count是类成员变量，这里只赋值，在其他函数中使用
}

第一个参数是设置刻度的数量的；第二个参数是设置最大要显示的秒数，这个函数只是赋了值，会在其他函数中使用。
在mainwindow中调用完后编译，效果是这样的：

SetValueState函数：设置线条的个数、标题等

void TimeDynamicListForm::SetValueState(QStringList temp_title_list, QList<QColor> color_list)
{
   
    cur_line_count=temp_title_list.count();

    int count=color_list.count();

    if(cur_line_count!=count)
    {
   
        return;
    }

    if(cur_line_count>MAX_TIME_DYNAMIC_LINES_COUNT)
    {
   
        cur_line_count=MAX_TIME_DYNAMIC_LINES_COUNT;
    }

    title_list.clear();

    for(int i=0;i<cur_line_count