Qt之QCustomPlot（圖形庫）

簡述

QCustomPlot是一個基於Qt C++的圖形庫，用於繪制和數據可視化 - 制作漂亮的2D圖 - 曲線圖、趨勢圖、坐標圖、柱狀圖等，並為實時可視化應用程序提供高性能服務。它沒有進一步的依賴關系，並有着良好的文檔記錄。

QCustomPlot可以導出為各種格式，比如：PDF文件和位圖（如：PNG、JPG、BMP）。

可在自己的項目中直接使用兩個源文件（qcustomplot.h與qcustomplot.cpp），或預先編譯成庫。

 

• 簡述
• 下載
• 配置
  • 文檔
  • 集成到QtCreatorAssistant
• 使用
  • 效果
  • 源碼
• 截圖

 

下載

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。