本文详细介绍了qcustomplot绘制曲线图的流程，一段代码一段代码运行看效果。通过阅读本文，读者可以了解到每一项怎么用代码进行配置，进而实现自己想要的图表效果。（本文只针对曲线图）
1 最简单的图形（入门）
- 头文件
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
#include "qcustomplot.h"
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget();
public:
void paintLine(QCustomPlot *customPlot);
private:
Ui::Widget *ui;
};
#endif // WIDGET_H
- 源文件
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
paintLine(ui->lineWidget);
}
Widget::~Widget()
{
delete ui;
}
void Widget::paintLine(QCustomPlot *customPlot)
{
QVector<double> x(101), y(101);
for (int i = 0; i < x.size(); i++)
{
x[i] = i / 50.0 - 1; // x从-1 到 1
y[i] = x[i] * x[i]; // 二次函数
}
customPlot->addGraph(); // 添加一幅折线图
customPlot->graph(0)->setData(x, y); // 为曲线图添加数据 注意这个方法只能是double类型 库内就是这样声明与定义的
customPlot->graph(0)->setName("y=x^{2}");
// 设置x与y坐标轴的范围
customPlot->xAxis->setRange(-1, 1);
customPlot->yAxis->setRange(0, 1);
// 设置x与y坐标轴的标签
customPlot->xAxis->setLabel("x");
customPlot->yAxis->setLabel("y");
// 显示图例
customPlot->legend->setVisible(true);
}
- 运行效果
2 美化一下
美化之前，先有几个名词声明一下
- 轴线
- 轴刻度线（长的刻度线）
- 轴子刻度线（短的刻度线）
- 轴刻度值
- 轴标签
2.1 设置背景颜色、轴、刻度线、刻度值、刻度标签
QLinearGradient plotGradient;
plotGradient.setStart(0, 0);
plotGradient.setFinalStop(0, 350);
plotGradient.setColorAt(0, QColor(80, 80, 80));
plotGradient.setColorAt(1, QColor(50, 50, 50));
customPlot->setBackground(plotGradient); // 设置背景颜色
customPlot->axisRect()->setBackground(Qt::red);
// 设置轴风格
customPlot->xAxis->setBasePen(QPen(Qt::white, 1));
customPlot->xAxis->setTickPen(QPen(Qt::white, 1)); // 轴刻度线和画笔
注意这两张图像的区别，非常微小的区别
上边这张是设置轴，下边这张是设置轴刻度
customPlot->xAxis->setSubTickPen(QPen(Qt::white, 1)); // 轴子刻度线的画笔
发现区别了吗？发现具体配置的效果显示在哪了吗？如果没有发现，请仔细对比。
customPlot->xAxis->setTickLabelColor(Qt::white); // 设置轴刻度颜色
customPlot->xAxis->setLabel("标签"); // 只有设置了标签，轴标签颜色才会显示
customPlot->xAxis->setLabelColor(Qt::white); // 设置轴标签颜色
customPlot->xAxis->setTickLengthIn(133); // 为了效果明显 将值设置的大一点，原来是这个效果 轴线内刻度的长度
customPlot->xAxis->setTickLengthOut(125); // 为了效果明显 将值设置的大一点，原来是这个效果 轴线外刻度的长度
customPlot->xAxis->setUpperEnding(QCPLineEnding::esSpikeArrow); // 设置轴结束的箭头
// 设置网格的风格
customPlot->xAxis->grid()->setPen(QPen(Qt::red, 1, Qt::DotLine));
// 设置水平线
customPlot->yAxis->grid()->setPen(QPen(Qt::yellow, 1, Qt::DotLine));
// 设置子刻度线
customPlot->xAxis->grid()->setSubGridVisible(true);
customPlot->xAxis->grid()->setSubGridPen(QPen(Qt::blue, 1, Qt::DotLine));
customPlot->yAxis->grid()->setSubGridVisible(true);
customPlot->yAxis->grid()->setSubGridPen(QPen(Qt::green, 1, Qt::DashLine));
// 设置刻度为0时的网格线的画笔
customPlot->xAxis->grid()->setZeroLinePen(QPen(Qt::red, 3));
customPlot->yAxis->grid()->setZeroLinePen(QPen(Qt::red));
至此，有关图像轴的设置就介绍完了
2.2 线型
利用官网的例子进行介绍
// 图表的风格
QPen pen;
// 存放曲线的风格名称
QStringList lineNames;
lineNames << "lsNone" << "lsLine" << "lsStepLeft" << "lsStepRight" << "lsStrepCenter" << "lsImpulse";
for(int i = 0; i < lineNames.size(); i++)
{
customPlot->addGraph();
pen.setColor(QColor(qSin(i * 1 + 1.2) * 80 + 80, qSin(i * 0.3) * 80 + 80, qSin(i * 0.3 + 1.5) * 80 + 80));
customPlot->graph()->setPen(pen);
customPlot->graph()->setName(lineNames.at(i));
customPlot->graph()->setLineStyle((QCPGraph::LineStyle)i);
customPlot->graph()->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssCircle, 6));
QVector<double> x(15), y(15);
for (int j = 0; j < x.size(); j++)
{
x[j] = j / 15.0 * 5 * 3.14 + 0.01;
y[j] = 7 * qSin(x[j]) / x[j] - (i - QCPGraph::lsNone) * 5 + (QCPGraph::lsImpulse) * 5 + 2;
}
customPlot->graph()->setData(x, y);
customPlot->graph()->rescaleAxes(true);
}
本文参考：
https://blog.csdn.net/qq10097355/article/details/104845706
https://www.qcustomplot.com/ 官网
