Qt 之 QCustomPlot（圖形庫）

簡述

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。