Qt之QCustomPlot(图形库)

简述

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

QCustomPlot可以导出为各种格式,比如:PDF文件和位图(如:PNG、JPG、BMP)。

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

  • 简述
  • 下载
  • 配置
    • 文档
    • 集成到QtCreatorAssistant
  • 使用
    • 效果
    • 源码
  • 截图

下载

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

进入QCustomPlot下载页,下载最新的完整包(包含:源码、文档、示例)!

Qt之QCustomPlot(图形库)_第1张图片

将下载好的安装包进行解压缩,里面包含文档、示例、更改日志、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拷贝到工程目录下,右键 -> 添加现有文件…,将这两个文件添加至工程。

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

效果

Qt之QCustomPlot(图形库)_第2张图片

源码

#include "qcustomplot.h"

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

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

    // 可变数组存放绘图的坐标的数据,分别存放x和y坐标的数据,101为数据长度
    QVector 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。

Qt之QCustomPlot(图形库)_第3张图片Qt之QCustomPlot(图形库)_第4张图片Qt之QCustomPlot(图形库)_第5张图片
Qt之QCustomPlot(图形库)_第6张图片Qt之QCustomPlot(图形库)_第7张图片Qt之QCustomPlot(图形库)_第8张图片
Qt之QCustomPlot(图形库)_第9张图片Qt之QCustomPlot(图形库)_第10张图片Qt之QCustomPlot(图形库)_第11张图片
Qt之QCustomPlot(图形库)_第12张图片Qt之QCustomPlot(图形库)_第13张图片Qt之QCustomPlot(图形库)_第14张图片
Qt之QCustomPlot(图形库)_第15张图片Qt之QCustomPlot(图形库)_第16张图片Qt之QCustomPlot(图形库)_第17张图片

你可能感兴趣的:(Qt之QCustomPlot(图形库))