Qt 之 QCustomPlot（图形库）

Posted 2022-03-26 一去丶二三里

简述

QCustomPlot是一个基于Qt C++的图形库，用于绘制和数据可视化 - 制作漂亮的2D图 - 曲线图、趋势图、坐标图、柱状图等，并为实时可视化应用程序提供高性能服务。它没有进一步的依赖关系，并有着良好的文档记录。

QCustomPlot可以导出为各种格式，比如：PDF文件和位图（如：PNG、JPG、BMP）。

可在自己的项目中直接使用两个源文件（qcustomplot.h与qcustomplot.cpp），或预先编译成库。

| 版权声明：一去、二三里，未经博主允许不得转载。

下载

QCustomPlot首页：http://www.qcustomplot.com/

进入QCustomPlot下载页，下载最新的完整包（包含：源码、文档、示例）！

将下载好的安装包进行解压缩，里面包含文档、示例、更改日志、GPL授权、以及最重要的两个文件qcustomplot.h与qcustomplot.cpp。

配置

文档

完整的API文档在complete API documentation上面，或者作为完整包的一部分，在解压缩后的目录中可以找到。里面包含一个html文档的层次结构和qch帮助文件用于QtCreator/Assistant集成。如果使用QtCreator或Assistant，应考虑使用qch文件，这将极大地提高工作效率！

集成到QtCreator/Assistant

集成qch文件相当简单：

1. 复制qcustomplot.qch文件到你需要存储的地方（例如：本地QtCreator配置目录）。

2. 在QtCreator中，选择：工具 -> 选项 -> 帮助 -> 文档，你会看到一个加载文档模块的列表，以及添加/删除模块的按钮。点击”添加…”按钮，选择qcustomplot.qch文件。

这样，我们就添加完成了。可以通过：帮助 -> 索引，来搜索QCustomPlot相关的类或函数。

当你把光标放在任何QCustomPlot相关的类或函数上时，按下F1键，就会有相应的文档项弹出，就像Qt组件一样。

使用

在examples中我们会看到一些自带的示例，可以运行看一下效果。

如果在自己的项目中使用，需要进行以下配置：

首先，在pro中需要添加（由于QCustomPlot中存在导出功能，使用了printsupport模块）：

QT += printsupport

然后，将qcustomplot.h与qcustomplot.cpp拷贝到工程目录下，右键 -> 添加现有文件…，将这两个文件添加至工程。

下面，我们来实现一个曲线图，为了增强效果，我们设置一些样式。

效果

源码

#include "qcustomplot.h"

MainWindow::MainWindow(QWidget *parent)
    : CustomWindow(parent)

    ...

    QCustomPlot *pCustomPlot = new QCustomPlot(this);
    pCustomPlot->resize(300, 300);

    // 可变数组存放绘图的坐标的数据，分别存放x和y坐标的数据，101为数据长度
    QVector<double> x(101), y(101);

    // 添加数据，这里演示y = x^3，为了正负对称，x从-10到+10
    for (int i = 0; i < 101; ++i)
    
        x[i] = i/5 - 10;
        y[i] = qPow(x[i], 3);  // x的y次方;
    

    // 向绘图区域QCustomPlot添加一条曲线
    QCPGraph *pGraph = pCustomPlot->addGraph();

    // 添加数据
    pCustomPlot->graph(0)->setData(x, y);

    // 设置坐标轴名称
    pCustomPlot->xAxis->setLabel("x");
    pCustomPlot->yAxis->setLabel("y");

    // 设置背景色
    pCustomPlot->setBackground(QColor(50, 50, 50));

    pGraph->setPen(QPen(QColor(32, 178, 170)));

    // 设置x/y轴文本色、轴线色、字体等
    pCustomPlot->xAxis->setTickLabelColor(Qt::white);
    pCustomPlot->xAxis->setLabelColor(QColor(0, 160, 230));
    pCustomPlot->xAxis->setBasePen(QPen(QColor(32, 178, 170)));
    pCustomPlot->xAxis->setTickPen(QPen(QColor(128, 0, 255)));
    pCustomPlot->xAxis->setSubTickPen(QColor(255, 165, 0));
    QFont xFont = pCustomPlot->xAxis->labelFont();
    xFont.setPixelSize(20);
    pCustomPlot->xAxis->setLabelFont(xFont);

    pCustomPlot->yAxis->setTickLabelColor(Qt::white);
    pCustomPlot->yAxis->setLabelColor(QColor(0, 160, 230));
    pCustomPlot->yAxis->setBasePen(QPen(QColor(32, 178, 170)));
    pCustomPlot->yAxis->setTickPen(QPen(QColor(128, 0, 255)));
    pCustomPlot->yAxis->setSubTickPen(QColor(255, 165, 0));
    QFont yFont = pCustomPlot->yAxis->labelFont();
    yFont.setPixelSize(20);
    pCustomPlot->yAxis->setLabelFont(yFont);

    // 设置坐标轴显示范围，否则只能看到默认范围
    pCustomPlot->xAxis->setRange(-11, 11);
    pCustomPlot->yAxis->setRange(-1100, 1100);

    ...

如果需要导出，我们可以调用对应的save…接口。

例如，导出一张为PNG格式，宽度、宽度分别为400px、300px的图片：

pCustomPlot->savePng("customPlot.png", 400, 300);

截图

下面的截图显示了QCustomPlot实现的一些效果，仅仅通过很少的代码而已。要查看代码，可以进入：QCustomPlot首页，然后点击相应的图片即可。所有可用代码也可以在完整包中找到，导航到：examples/plots/plot-examples.pro。