使用QT第三方库QCustomPlot绘制柱状图

一、环境配置

1.在.pro文件中进行第三方库环境配置（QT += widgets printsupport），QCustomPlot官网下载头文件和cpp文件。

2、使用次控件类绘制图形显示，需要在ui界面创建QWidget窗口，将其提升到QCustomPlot类，记得修改为自己的头文件路径。

3、直接在界面调用此类就可以运行出来绘图对象。

4、可以使用代码创建次绘图类，将其加入布局中。

    QVBoxLayout *tu=new QVBoxLayout(ui->widget);
    this->plot=new QCustomPlot;
    tu->addWidget(plot);

5.在.cpp使用定时器进行数据刷新显示

    timer = new QTimer(this);
    connect(timer,SIGNAL(timeout()),this,SLOT(Time_Update()));
    timer->start(1000);

6.界面修改成自己所需样式

// 刻度显示
       this->plot->xAxis->setTicks(true);
       this->plot->yAxis->setTicks(true);
       // 刻度值显示
       this->plot->xAxis->setTickLabels(true);
       this->plot->yAxis->setTickLabels(true);
       // 网格显示
       this->plot->xAxis->grid()->setVisible(true);
       this->plot->yAxis->grid()->setVisible(true);
       // 子网格显示
       this->plot->xAxis->grid()->setSubGridVisible(true);
       this->plot->yAxis->grid()->setSubGridVisible(true);
       // 右和上坐标轴、刻度值显示
       this->plot->xAxis->setVisible(true);
       this->plot->yAxis->setVisible(true);
       this->plot->xAxis->setTicks(true);
       this->plot->yAxis->setTicks(true);
       this->plot->yAxis->setTickLabels(false);

       this->plot->xAxis->setBasePen(QPen(Qt::white));
       this->plot->xAxis->setTickPen(QPen(Qt::black));
       this->plot->xAxis->setTickLabelColor(Qt::black);
       this->plot->xAxis2->setBasePen(QPen(Qt::white));

        this->plot->yAxis->setBasePen(QPen(Qt::white));
        this->plot->yAxis->setTickPen(QPen(Qt::white));
        this->plot->yAxis->setTickLabelColor(Qt::white);
        this->plot->yAxis2->setBasePen(QPen(Qt::white));

7、设置绘图图标显示

this->plot->legend->setVisible(true);           
this->plot->legend->setFont(QFont("Helvetica", 5
this->plot->legend->setTextColor(Qt::red);      
this->plot->legend->setBrush(QBrush(Qt::transpar
this->plot->axisRect()->insetLayout()->setInsetA
this->plot->legend->setIconSize(20, 10);//设置图标大小

8、将x轴设置为时间轴

// 可放大缩小和移动                                                   
this->plot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom)
//设置x轴格式                                                      
QSharedPointer<QCPAxisTickerTime> timeTicker(new QCPAxisTicker
//设置tick个数                                                    
timeTicker->setTickCount(10);                                 
//毫秒为单位                                                       
timeTicker->setTimeFormat("%s.%z");                           
this->plot->xAxis->setTicker(timeTicker);                     
this->plot->axisRect()->setupFullAxesBox();                   
                                                              
//设置x轴为当前时间                                                   
int nowtime = QTime::currentTime().msecsSinceStartOfDay(); //获
double key = nowtime;                                         
//设置初始坐标轴的x坐标                                                 
this->plot->xAxis->setRange(key * 0.001, 10, Qt::AlignRight); 

9、可以全屏显示柱状图

void Widget::Time_Update(void)
{

QVector<double> key;                                                          
   QVector<double> value;                                                     
   for(int i = 0; i < 50; i++)                                                
   {                                                                          
       //QCPItemText的效果类似于一个label                                             
       QCPItemText *itemText = new QCPItemText(this->plot);                   
       itemText->setClipToAxisRect(false);                                    
       //设置itemText的位置是跟随坐标系的                                                 
       itemText->position->setType(QCPItemPosition::ptPlotCoords);            
       //设置itemText跟随的坐标系为 ui->customplot->xAxis, ui->customplot->yAxis       
       itemText->position->setAxes(this->plot->xAxis, this->plot->yAxis);     
       //设置itemText放置的位置                                                      
       itemText->setPositionAlignment(Qt::AlignTop | Qt::AlignHCenter);       
       key.append(i + 1);                                                     
       value.append((i + 1) * 1000 + 123);                                    
                                                                              
                                                                              
       //设置itemText显示的内容                                                      
       itemText->setText(QString::number(value.at(i)));                       
       //设置itemText显示的位置的坐标                                                   
       itemText->position->setCoords(key.at(i), value.at(i));                 
                                                                              
   }                                                                          
                                                                              
   bars->addData(key, value);                                                 
                                                                              
   //设置 ui->customplot->xAxis 的范围，以便能够看到全部的柱状图                                
  this->plot->xAxis->setRange(0, key.length() + 1);                           
   //ui->customplot->yAxis 自适应范围                                              
   this->plot->yAxis->rescale();                                              
                                                                              
   this->plot->replot();                                                      
   // 移除第一个数据点                                                                
       bars->data()->removeBefore(value.at(1));      

}                        

10、可以通过定时器刷新数据

void Widget::Time_Update(void)
{
    // 创建柱状图
    QCPBars *bars = new QCPBars(this->plot->xAxis, this->plot->yAxis);
    bars->setWidth(0.8); // 设置柱状图宽度
    bars->setPen(Qt::NoPen); // 设置柱状图边框
    bars->setBrush(QColor(50, 50, 200, 100)); // 设置柱状图颜色
    QTime t;
        t=QTime::currentTime();
        qsrand(QTime(0, 0, 0).secsTo(QTime::currentTime()));
        cnt=qrand()%50;
        qDebug()<<"cnt--:"<<cnt;
//        Show_Plot(ui->widget);
        QVector<double> key(10);
            QVector<double> value(10);
            QVector<double> value2(10);

            for(int i=0; i<9; i++)
            {
                num[i] = num[i+1];
            }
            num[9] = cnt;
            for(int i=0;i<10;i++)
            {
                key[i]   = i;
                value[i]  = num[i];
                value2[i]  = num[i]+5;
            }

//            static QTime time(QTime::currentTime());

//                   double key = time.elapsed()/1500.0; // 开始到现在的时间，单位秒
            bars->setData(key,value);

            this->plot->addGraph();
            this->plot->graph(0)->setPen(QPen(Qt::black));
            this->plot->graph(0)->setData(key,value2);

            this->plot->xAxis->setLabel("Time(s)");
            this->plot->yAxis->setLabel("uA");

            this->plot->xAxis->setRange(0,50);
            this->plot->yAxis->setRange(0,100);
//            频繁绘制数据可以设置排队绘制参数 replot(QCustomPlot::rpQueuedReplot)
            this->plot->replot();

}