Simple usage summary of QCustomPlot
Written before , here I only summarize: How to use the QCustomPlot library under VS2013+QT5.7.1 .
First, let me show you the interface I implemented with QCustomPlot, as shown in the screenshot below:
Part 1: Download and Installation of QCustomPlot
Method 1: official website download;
method 2: Baidu cloud network disk download, portal , (corresponding to QCustomPlot2.0 version).
Part II: The use of QCustomPlot under VS2013+QT
Step 1: Unzip the downloaded installation package, as shown below:
Step 2: Copy the "qcustomplot.cpp" and "qcustomplot.h" files in the above folder to the newly created QT directory. As shown in the following figure:
Note the place (the settings of the project properties are explained here) :
First note:
Precondition : Build Qt5 Projects -> Qt Application project, the project name is assumed to be QPlot;
problem : "Unable to open include file: "GLES2/gl2.h": No such file or directory" when compiling;
Solution :
"Project properties -> Configuration (C): All Configurations"
"Project Properties -> Configuration Properties -> C/C++ -> General -> Additional Include Directories" add "$(QTDIR)\include\QtANGLE";The second point of attention:
add the QCustomPlot.h and QCustomPlot.cpp files to the project, then open the qplot.ui file through qtcreator, add a widget, then right-click "promote to...", the promoted class name: QCustomPlot, header file :qcustomplot.h, objectName:customPlot;* The third point of attention: *
Preconditions : build Qt5 Projects -> Qt Application project, the project name is assumed to be QPlot;
problem : "Cannot find QtPrintSupport" when compiling;
Solution :
"Project Properties -> Configuration (C) : Add "$(QTDIR)\include\QtPrintSupport" in "All Configurations"
"Project Properties -> Configuration Properties -> C/C++ -> General -> Additional Include Directories";
Step 3: first as shown in the picture.
Right-click the Widget control just now, and you will get the following window:
Enter: QCustomPlot in the promoted class name, and it will be included globally.
Step 4: Enter the following code in the constructor that enters the ui window:
//之前的控件名对应着ImgQCustomPlot
connect(ui.ImgQCustomPlot->xAxis, SIGNAL(rangeChanged(QCPRange)), ui.ImgQCustomPlot->xAxis2, SLOT(setRange(QCPRange)));
connect(ui.ImgQCustomPlot->yAxis, SIGNAL(rangeChanged(QCPRange)), ui.ImgQCustomPlot->yAxis2, SLOT(setRange(QCPRange)));
ui.ImgQCustomPlot->xAxis2->setVisible(true);
ui.ImgQCustomPlot->xAxis2->setTickLabels(false);
ui.ImgQCustomPlot->yAxis2->setVisible(true);
ui.ImgQCustomPlot->yAxis2->setTickLabels(false);
ui.ImgQCustomPlot->xAxis->setLabel(GBK::ToUnicode("参考方法值"));
ui.ImgQCustomPlot->yAxis->setLabel(GBK::ToUnicode("对比方法值"));
ui.ImgQCustomPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);
ui.ImgQCustomPlot->addGraph();
//初始化
//针对拟合直线进行初始化
QPen pen(QColor("red"));
ui.ImgQCustomPlot->graph()->setPen(pen); //设置点的颜色
ui.ImgQCustomPlot->graph()->setLineStyle(QCPGraph::LineStyle::lsNone);
ui.ImgQCustomPlot->graph()->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssDisc, 1)); //1:点的尺寸
//针对上边界线
ui.ImgQCustomPlot->addGraph();
QPen penUpper(QColor("black"));
ui.ImgQCustomPlot->graph(1)->setPen(penUpper); //设置点的颜色
ui.ImgQCustomPlot->graph(1)->setLineStyle(QCPGraph::LineStyle::lsNone);
ui.ImgQCustomPlot->graph(1)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssDisc, 1)); //1:点的尺寸
//针对下边界线
ui.ImgQCustomPlot->addGraph();
QPen penLower(QColor("black"));
ui.ImgQCustomPlot->graph(2)->setPen(penLower); //设置点的颜色
ui.ImgQCustomPlot->graph(2)->setLineStyle(QCPGraph::LineStyle::lsNone);
ui.ImgQCustomPlot->graph(2)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssDisc, 1)); //1:点的尺寸
//针对20组数据点集
ui.ImgQCustomPlot->addGraph();
QPen penPnts(QColor("blue"));
ui.ImgQCustomPlot->graph(3)->setPen(penPnts); //设置点的颜色
ui.ImgQCustomPlot->graph(3)->setLineStyle(QCPGraph::LineStyle::lsNone);
ui.ImgQCustomPlot->graph(3)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssDisc, 3)); //1:点的尺寸
ui.ImgQCustomPlot->yAxis->ticker()->setTickStepStrategy(ui.ImgQCustomPlot->xAxis->ticker()->tickStepStrategy());
//ui.ImgQCustomPlot->setBackground(Qt::GlobalColor::black);
Step 5: In the response function corresponding to the display picture button of the ui, you can refer to the following code implementation:
//显示数据点
void imgshowDlg::on_btnShowImg_clicked()
{
//将20组数据拟合出一条直线
//子窗口调用父窗口中的成员变量以及成员函数
QuickCalculate *p = (QuickCalculate *)parentWidget();
//将横坐标的值放到一个数值容器中
std::vector<double> xVec;
for (size_t i = 0; i < p->Point2dVec.size();i++)
{
xVec.push_back(p->Point2dVec[i].x);
}
//先找出横坐标的最大最小值
std::vector<double>::iterator biggest = std::max_element(std::begin(xVec),std::end(xVec));
double x_MaxValue = *biggest;
auto smallest = std::min_element(std::begin(xVec), std::end(xVec));
double x_MinValue = *smallest;
ui.ImgQCustomPlot->graph(0)->data().clear();
ui.ImgQCustomPlot->graph(1)->data().clear();
ui.ImgQCustomPlot->graph(2)->data().clear();
ui.ImgQCustomPlot->graph(3)->data().clear();
QVector<double> x_value, y_value;
int number = (int)(x_MaxValue - x_MinValue) / (0.01) + 1000;
double x = x_MinValue - 5;
double y = 0;
for (int i = 0; i < number; i++)
{
x_value.push_back(x);
y = p->k*(x - p->Pnt0.x) + p->Pnt0.y;
y_value.push_back(y);
x = x + 0.01;
}
//先绘制好拟合的直线 红色线
//先绘制上边界
ui.ImgQCustomPlot->graph(0)->setData(x_value,y_value);
ui.ImgQCustomPlot->graph(0)->rescaleAxes();
ui.ImgQCustomPlot->yAxis->setScaleRatio(ui.ImgQCustomPlot->xAxis, 1);
//再添加两条边界线
QVector<double> Upper_x_value, Upper_y_value;
double Upper_X = x_MinValue - 5;
double Upper_Y = 0;
for (size_t j = 0; j < number;j++)
{
Upper_x_value.push_back(Upper_X);
Upper_Y = p->k*(Upper_X - p->Pnt0.x) + p->Pnt0.y+p->R11_1;
Upper_y_value.push_back(Upper_Y);
Upper_X = Upper_X + 0.01;
}
ui.ImgQCustomPlot->graph(1)->setData(Upper_x_value, Upper_y_value);
ui.ImgQCustomPlot->graph(1)->rescaleAxes();
ui.ImgQCustomPlot->yAxis->setScaleRatio(ui.ImgQCustomPlot->xAxis, 1);
//再绘制下边界
QVector<double> Lower_x_value, Lower_y_value;
double Lower_X = x_MinValue - 5;
double Lower_Y = 0;
for (size_t t = 0; t < number; t++)
{
Lower_x_value.push_back(Lower_X);
Lower_Y = p->k*(Lower_X - p->Pnt0.x) + p->Pnt0.y-p->R11_1;
Lower_y_value.push_back(Lower_Y);
Lower_X = Lower_X + 0.01;
}
ui.ImgQCustomPlot->graph(2)->setData(Lower_x_value, Lower_y_value);
ui.ImgQCustomPlot->graph(2)->rescaleAxes();
ui.ImgQCustomPlot->yAxis->setScaleRatio(ui.ImgQCustomPlot->xAxis, 1);
//绘制20组点数据
QVector<double> xPnts, yPnts;
for (size_t m = 0; m < p->Point2dVec.size();m++)
{
xPnts.push_back(p->Point2dVec[m].x);
yPnts.push_back(p->Point2dVec[m].y);
}
ui.ImgQCustomPlot->graph(3)->setData(xPnts, yPnts);
ui.ImgQCustomPlot->graph(3)->rescaleAxes();
ui.ImgQCustomPlot->yAxis->setScaleRatio(ui.ImgQCustomPlot->xAxis, 1);
ui.ImgQCustomPlot->replot();
ui.btnSaveImg->setEnabled(true);
}
Step 6: If you need to save the picture, the following code is for reference:
//保存图片
void imgshowDlg::on_btnSaveImg_clicked()
{
QString imgName="img.bmp";
QString SavePath = imgPath + imgName;
QByteArray byteA = SavePath.toLatin1();
char *imgNameTem = byteA.data();
ui.ImgQCustomPlot->saveBmp(imgNameTem); //关键代码
}
In summary, after the above steps, you can use QCustomPlot to draw multiple curves, display point sets, and at the same time, you can zoom and display the curve graph.