注：演示所使用版本号
Qt：Version 5.14.2
QCustomPlot： Version 2.1.1
一、QCustomPlot 的安装以及配置
本节内容是 对QCustomPlot 的安装以及配置 的演示，以及生成一个简单的项目。
1、下载
在官网上下载所需要版本的QCustomPlot的压缩包QCustomPlot.tar.gz
官网地址：https://www.qcustomplot.com 点击进行下载
下载解压后会得到qcustomplot的.cpp与.h文件，这两个文件是我们需要的
2、添加到项目
2.1、新建Qt项目
2.2、把这两个文件复制粘贴到项目下；
2.3、添加到项目
右键点击项目名 → 添加现有文件，选中之前复制到项目文件下有关QCustomPlot的两个文件；
当项目下出现如图所示的两个文件，则表示添加成功
2.4、添加变量
2.4.1、如果你的QT版本是5.0及以上，我所使用的Qt为5.14.2，那么.pro文件中的QT变量必须添加一个printsupport，添加完成之后，保存一下，如图所示：
2.4.2、此时我们已经可以使用QCustomPlot的相关功能了，我们一起完成一个简单的案例，实际步骤如下：
注：QCustomPlot是继承自 QWidget 的，使用时，首先生成一个QWidget控件，然后右键点击这个控件，选择提升为QCustomPlot，这样我们就得到了一个可操作的 QCustomPlot 控件。
第一步：
第二步：
注：当你完成此步骤之后，后续的点击提升为 QCustomPlot 便可以直接选择。
3、添加帮助文档
在下载的documentation文件夹下有个qcustomplot.qch文件，将它拷贝Qt的文档目录下：
查找此目录可以通过搜索 assistanct 选择合适版本右键打开文件路径位置
（我的位置为：C:\Users\27586\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Qt 5.14.2\5.14.2\MinGW 7.3.0 (64-bit)）
然后在QtCreator ——>工具——>选项——>帮助——>文档——>添加，选择qcustomplot.qch文件
确定，以后按F1就能跳转到QCustomPlot的帮助文档了。
4、项目运行
完成以上步骤之后，点击运行（或者使用 win+R快捷键），此时项目已经生成了一个简单的 基于QCustomPlot完成 表格，可以显示一个有着坐标轴和网格线的空画布，如图所示：
此时，安装和配置 QCustomPlot 的步骤已经全部完成了。但是，我们并没有对此表格进行任何的操作，下面我们使用基本绘图，让表格出现我们希望的各种图像吧！
二、QCustomPlot 的基础操作
本节内容是 使用 QCustomPlot 进行基本绘图。
注：本篇教程都将使用 QcpText 这个变量，它是一个指向 QCustomPlot实例的指针，当然，在我们的项目中，我们是通过 ui->QcpText 来访问这些 QCustomPlot 的实例
1、基本用法
1.1、创建画布
ui->QcpText->addGraph();// 每个Graph及其上的线构成一幅图
1.2、给画布分配数据点
假设我们有两个QVector<double>，分别存放了一组点的x和y坐标（Key与Value）。不过QCustomPlot更倾向于使用Key与Value而非x与y，这样可以更灵活地区分哪个轴具有什么样的功能。所以当我们定义左边轴为Key轴而底部轴为Value轴时，我们就可以沿着左边的轴绘制一幅直立的图。
ui->QcpText->graph(0)->setData(x,y); // x、y是大小相等的一组数据，其中x中存储的是横坐标，y中存储的是纵坐标。
注：我们通过查看 QCustomPlot 源码，可得知 x , y 的类型为 QVector<double>类型。
1.3、设置轴的范围
QCustomPlot 有4个轴 xAxis, yAxis, xAxis2, 和 yAxis2，它们都是QCPAxis类型的，分别对应表格的下、左、上、右。
例如：如果要设置下轴的范围为(0,100)，可以用：
ui->QcpText->xAxis->setRange(0,100); // 设置轴的范围
1.4、重绘
当我们对画布做了任何修改，可以用进行重绘。
ui->customPlot->replot(); // 画布重绘
注：每当Widget被拉伸或者触发了内置用户交互时，都会自动进行重绘；这里的交互是指通过鼠标拖动坐标轴的范围、用鼠标滚轮缩放等。
1.5、案例
绘制一个 速度 与 时间 关系的表格
// 绘制第一个表格
void qcptext::text1()
{
QVector<double> x,y; // 创建两个动态数组，用来存放数据
for(int c = 0; c < 50; c++){
x.append(c * 1.8);
}
for (int c = 0; c < 50; c = c + 1.8){
y.append(c * 1.5);
}
ui->QcpText->addGraph(); // 创建画布,设置画布上的点数据
ui->QcpText->graph(0)->setData(x,y);
ui->QcpText->xAxis->setLabel("时间(h)"); // 设置坐标轴标签
ui->QcpText->yAxis->setLabel("速度(km/h)");
ui->QcpText->xAxis->setRange(0,100); // 设置坐标轴范围，以便我们可以看到全部数据
ui->QcpText->yAxis->setRange(0,100);
ui->QcpText->replot();
}
注：坐标轴刻度、间隔和显示的数字是由axis ticker决定的，它是QCPAxisTicker类型的变量，通过xAxis->ticker()访问。可以通过xAxis->ticker()->setTickCount(6)来调整坐标轴上显示的刻度数值的个数。默认情况下，这个个数是自适应的最少的个数。不过，也有一些特殊的情况，比如坐标轴是时间、日期、分类、对数坐标系的情况。具体可以看QCPAxisTicker。
2、改变样式
2.1、画布
2.1.1、线的样式
graph->setLineStyle(..)
有哪些线的样式，可以看QCPGraph::LineStyle。
2.1.2、画笔
ui->QcpText->graph(0)->setPen(QPen(Qt::blue)); // 设置线的颜色为 蓝色
2.1.3、点的样式
customPlot->graph(0)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ScatterShape::ssPlus,5));//数据点+号
有哪些点的样式，可以看参考大佬帖子 https://blog.csdn.net/yxy244/article/details/100033549
2.1.4、填充色
设置填充的颜色，填充该线和0刻度线围成的区域。
ui->QcpText->graph(0)->setBrush(QBrush(QColor(0,0,255,20))); //用半透明的蓝色填充
ui->QcpText->graph(0)->setChannelFillGraph(otherGraph)：//填充两条线之间的区域；如果要移除线间填充，只需要把参数设置为0即可，这时填充的区域为该线与0刻度线围成的区域。
ui->QcpText->graph(0)->setBrush(Qt::NoBrush) // 完全移除区域填充
2.2、坐标轴
坐标轴多是通过改变画笔和字体进行修改的。可以看QCPAxis。
这里给出一些比较重要的特性：
setBasePen, setTickPen, setTickLength, setSubTickLength, setSubTickPen, setTickLabelFont, setLabelFont, setTickLabelPadding, setLabelPadding.
我们可以用 setRangeReversed 来颠倒一个坐标轴（例如按照从高到低的顺序绘制）。
如果想修饰坐标轴的尾部（例如添加箭头），可以用 setLowerEnding 或 setUpperEnding 。
2.3、网格线
网格线是 QCPGrid 对象
2.3.1网格线与坐标
网格线是和坐标轴绑定的，水平网格线是与左坐标轴绑定的，例如
customPlot->yAxis->grid()
2.3.1、网格线外观
网格线的外观由绘制它的画笔决定
yAxis->grid()->setPen()
位于0刻度处的网格线可以用不同的画笔绘制，该画笔样式通过setZeroLinePen进行配置。如果我们不想用特殊的画笔绘制零刻度线，只需要把它设置为Qt::NoPen即可，这样0刻度线就和普通刻度线的绘制方法一样了。
子网格线默认是隐藏的，可以用 grid()->setSubGridVisible(true) 激活。
3、案例
// 绘制 两幅图叠加绘制
void qcptext::text2()
{
// 第一幅图
ui->QcpText->addGraph();
// 线的颜色
ui->QcpText->graph(0)->setPen(QPen(Qt::blue));
// 设置点的样式
ui->QcpText->graph(0)->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ScatterShape::ssPlus,5));
// 用半透明的蓝色填充
ui->QcpText->graph(0)->setBrush(QBrush(QColor(0,0,255,20)));
//第二幅图
ui->QcpText->addGraph();
ui->QcpText->graph(1)->setPen(QPen(Qt::red));
//生成数据点
QVector<double> x(251),y0(251),y1(251);
for(int i=0;i<251;i++){
x[i]=i;
y0[i]=qExp(-i/150.0)*qCos(i/10.0);//指数衰减的余弦曲线
y1[i]=qExp(-i/150.0);//指数包裹曲线
}
//配置上和右坐标轴来显式刻度,但是不显示数字
ui->QcpText->xAxis2->setVisible(true);
ui->QcpText->xAxis2->setTickLabels(false);
ui->QcpText->yAxis2->setVisible(true);
ui->QcpText->yAxis->setTickLabels(false);
//修改左和底坐标轴,使之与右和上坐标轴始终匹配
connect(ui->QcpText->xAxis, SIGNAL(rangeChanged(QCPRange)), ui->QcpText->xAxis2, SLOT(setRange(QCPRange)));
connect(ui->QcpText->yAxis, SIGNAL(rangeChanged(QCPRange)), ui->QcpText->yAxis2, SLOT(setRange(QCPRange)));
//为每幅图设置点
ui->QcpText->graph(0)->setData(x,y0);
ui->QcpText->graph(1)->setData(x,y1);
//使图0自适应范围
ui->QcpText->graph(0)->rescaleAxes();
//图1页一样,但是只允许放大,以免比图0小
ui->QcpText->graph(1)->rescaleAxes(true);
//注意,以上两步也可以用ui->customPlot->rescaleAxes();来代替
//允许用户用鼠标拖拉、缩放、选择任一幅图
ui->QcpText->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);
}
案例展示
参考：
1：qcustomplot使用教程--基本绘图-CSDN博客 （https://blog.csdn.net/wanglu22006281/article/details/129953660?ops_request_misc=%7B%22request%5Fid%22%3A%22171066778216800185846346%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=171066778216800185846346&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-129953660-null-null.142^v99^pc_search_result_base5&utm_term=QCustomPlot使用教程&spm=1018.2226.3001.4187）
2：[Qt：QCustomPlot使用教程 - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/660696823)
注：大佬们写得挺好，但是感觉对于小白来说还是不够简单，于是我在参考学习的时候也自己学着写了一篇帖子，步骤和代码都是本人实现过的，如果有疑问，可以私信询问。
