Qt之QCustomPlot繪圖（一）配置和第一個例子

最近一個用Qt開發的項目需要繪制坐標曲線，我在老師的指點下使用了QCustomPlot這個插件，使用方法簡單，功能還算不錯。

可是在網上找了很多資料和博文都只是將官方提供的例子演示一遍，沒有系統全面的學習資料，所以我決定把自己在探索過程中獲得的一些開發實例和經驗分享出來，與大家共同學習交流，請各位朋友多多指教。

一、QCustomPlot的安裝

官方下載地址:http://www.qcustomplot.com/index.php/download

推薦下載第一個鏈接，里面有很多官方給的例子可以參考。

 

下載之后將文件解壓到任意一個文件夾中，不要有中文路徑。

打開QT，新建一個窗體工程

將解壓得到的文件夾里面的頭文件qcustomplot.h和源文件qcustomplot.cpp復制粘貼到工程文件夾下。

在Qt中，對着工程名右鍵，添加已有文件，將頭文件qcustomplot.h和源文件qcustomplot.cpp都添加到工程中來。

接着在工程的pro文件的第9行末尾加入代 printsupport，如下圖

打開界面文件，進入圖形化設計界面，向主窗口中添加一個widget區域，對着所添加的widget區域點擊右鍵，選擇“提升為”按鈕。

提升類名稱輸入“QCustomPlot”，點擊添加。

在之后的界面中選中QCustomPlot，點擊提升按鈕，我們創建的widget就被提升為QCustomPlot類了。

現在我們運行一下程序，就會出現一個簡單的坐標系了。

恭喜你，QCustomPlot的基本配置就做好了。

二、第一個例子

首先解釋一下原理：

我們可以理解為QCustomPlot就是一個繪圖板的類，它繼承於Widget，界面中的Widget類提升為QCustomPlot才能夠繪圖。

QCustomPlot中的每一個曲線是一個Graph對象，凡是跟顯示數據有關的我們就對Graph進行操作或調用Graph對象提供的方法。

一個QCustomPlot里有四個坐標軸，其中xAxis和yAxis就是我們上圖看到的x和y坐標軸，還有兩個坐標軸xAxis1和yAxis1為上方和右方的x、y坐標，默認隱藏，可以通過程序設計顯示。

具體繪圖執行步驟：

首先我們將上面提升為QCustomPlot類的容器界面的對象重命名為qCustomPlot。

此時，我們只需要在主類Widget構造函數中加入如下代碼，即可繪制一個標准標准的y=x^3的曲線，代碼含義代碼中有注釋。

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    //定義兩個可變數組存放繪圖的坐標數據
    QVector<double> x(101),y(101);//分別存放x和y坐標的數據,101為數據長度
    //添加數據，我們這里演示y=x^3,為了正負對稱，我們x從-10到+10
    for(int i=0;i<101;i++)
    {
        x[i] = i/5 - 10;
        y[i] = x[i] * x[i] * x[i];
    }

    //向繪圖區域QCustomPlot(從widget提升來的)添加一條曲線
    ui->qCustomPlot->addGraph();
    //添加數據
    ui->qCustomPlot->graph(0)->setData(x,y);

    //設置坐標軸標簽名稱
    ui->qCustomPlot->xAxis->setLabel("x");
    ui->qCustomPlot->yAxis->setLabel("y");

    //設置坐標軸顯示范圍,否則我們只能看到默認的范圍
    ui->qCustomPlot->xAxis->setRange(-11,11);
    ui->qCustomPlot->yAxis->setRange(-1100,1100);
    
    //重繪，這里可以不用，官方例子有，執行setData函數后自動重繪
    //我認為應該用於動態顯示或者是改變坐標軸范圍之后的動態顯示，我們以后探索
    //ui->qCustomPlot->replot();

}

這樣我們就簡單的繪制好一個3次方的曲線了