Qt使用QtCharts畫滾動動態曲線

1. Qt畫圖太難了呀😭

        Qt雖屬於圖形用戶界面應用程序開發框架，但是不提供例如matlab以及python的plot接口，這使得Qt的繪圖顯得比較繁瑣，但是沒有集成化的接口使用，Qt也提供了畫圖的對象，相比於plot庫，我們需要實例化一個畫圖對象，配置座標軸、綁定數據以及將圖表加入窗口顯示。雖說較爲繁瑣，但是靈活性也更高☀️ 。

        首先，我們先放出基於本博文做出來的圖表效果：自行判斷本博文有沒有參考價值📝 

2. QtCharts圖表組件📈

        過去聽說^{我也沒用過🏃} ，Qt官方並沒有提供畫圖的庫需要安裝第三方的qcustomplot^功能不全和qwt^安裝麻煩插件，自從Qt5推出後，官方就集成了QtCharts，但是需要我們在安裝選項中進行勾選，也可以使用MaintenanceTool進行後續安裝我試了，沒成功，項目比較趕，就選擇了重裝，太菜了🎍 !有方法的大佬記得文末評論，互相學習

圖2-1 Qt安裝組件選項界面

3. QtCharts畫二維曲線圖步驟

        參看如下步驟，只說大致，細節添加頭文件、定義數據成員等需要參考源代碼：

3.1 修改.pro文件

        值得注意的是，QtCharts並不是Qt的默認核心組件，使用QtCharts我們需要修改.pro工程文件，添加引用QtCharts的腳本。

QT       += core gui
# 添加如下腳本
QT    +=charts

3.2 使用命名空間

        QtCharts相關的數據結構僅僅通過引入頭文件是不夠的，比如使用QChart定義數據成員，就算添加了頭文件也會發信啊報如下錯誤：

unknown type name 'QChart'

        錯誤的原因主要是沒有使用相對應的命名空間，這時候有些同學就要扛了，我使用全稱不久行了嘛？當然也可以！但是使用命名空間會顯得代碼沒那麼臃腫。在頭文件中加入如下“宏”^[1]

QT_CHARTS_USE_NAMESPACE

[1] 不知道導入命名空間的語句屬於啥？😕 

3.3 初始化QChart

         QChart屬於圖表本身，QChartView是圖表展示的載體 (編不下去了，我也不懂爲啥要這樣分，使用得不深，有待研究)。

         初始化QChart主要做如下幾個配置，注意：不是必須的，你默認也可能🏃‍♀  沒啥問題。

• 綁定數據：實例化數據對象、往數據集合添加數據、使用addSeries()綁定數據；
• 設置XY座標軸：這裏有多種方式，可以實例化一個軸對象、也可以設置默認座標軸。具體看代碼吧。。。

    splineSeries = new QSplineSeries();
    QPen pen(0x000001);
    pen.setWidth(1);
    splineSeries->setPen(pen);              //設置畫筆顏色和大小

    scatterSeries = new QScatterSeries();
    scatterSeries->setMarkerSize(5);        //設置散點大小
    scatterSeries->setColor(0x0000FF);      //設置散點顏色

    chart = new QChart();
    chart->addSeries(splineSeries);         //添加數據源
    chart->addSeries(scatterSeries);        //添加數據源
    chart->legend()->hide();                //關閉圖例
    chart->setTitle("實時動態曲線");
    chart->createDefaultAxes();

    //設置X軸,此類方式已經被棄用（不推薦，會報警告，但可讀性更高）
//    chart->axisX()->setRange(0, maxX);
//    chart->axisX()->setGridLineVisible(false);
//    chart->axisX()->setTitleText("X軸");
    //設置Y軸
//    chart->axisY()->setRange(0, maxY);
//    chart->axisY()->setGridLineVisible(false);
//    chart->axisY()->setTitleText("Y軸");


    //上述方式已經被下面這種方式代替(推薦，不會報警告，但可讀性不高)
    chart->axes(Qt::Horizontal).back()->setRange(0, maxX);
    chart->axes(Qt::Horizontal).back()->setGridLineVisible(false);
    chart->axes(Qt::Horizontal).back()->setTitleText("X軸");
    chart->axes(Qt::Vertical).back()->setRange(0, maxY);
    chart->axes(Qt::Vertical).back()->setGridLineVisible(false);
    chart->axes(Qt::Vertical).back()->setTitleText("Y軸");

       第一種方式設置軸會報出警告，當然如下警告問題不大，但是不適合長期使用。

warning:'axisX' is deprecated.		//該功能被棄用了，雖說被棄用，只是說官方不推薦，還可以用

3.4 初始化QChartView

       最基本的QChartView初始化非常簡單，只需要利用已初始化的QChart實例化一個QChartView即可：

    //爲chart對象實例化一個Qchartview
    chartView = new QChartView(chart);

3.5 將QChartView加入窗口

       QChartView並不是Qt的基本控件，需要依賴於基本空間顯示，我們使用的是MainWindow窗口中自帶的widget顯示我們的圖表：

    QHBoxLayout *layout = new QHBoxLayout();
    layout->addWidget(chartView);
    ui->centralWidget->setLayout(layout);

       至此，我們的圖表就可以展示出來啦，但是我的代碼還沒有往數據集合中添加數據，所以不會出現數據曲線，大家注意！

4. 模擬滾動動畫

       所謂的滾動動畫，其實就是刪除頭數據，整體數據前移一個單位，尾插入最新的數據。我們可以使用刪除操作更方便的鏈表進行數據存儲。由於QChart之前已經綁定了數據集合，此時我們修改圖表數據只需要修改對應的數據集合即可，無須進行刷新頁面操作。爲了更好的演示滾動動畫，我們引用了定時器，設定定時器200ms即發出信號，調用對應的槽函數。

啓動定時器：

    //初始化定時器,100ms定時一次
    timerId = startTimer(300);

槽函數：

void MainWindow::timerEvent(QTimerEvent *event)
{

    // 產生一個數據，模擬不停的接收到新數據
    int newData;
    if (event->timerId() == timerId) {
        newData = qrand() % maxY;
        data << newData;
        // 數據個數超過了最大數量,刪除首個，數據往前移，添加最後一個
        if (data.size() > maxSize) {
            data.pop_front();
        }
        //清空數據
        splineSeries->clear();
        scatterSeries->clear();

        //以1爲步長
        for (int i = 0; i < data.size(); ++i) {
            splineSeries->append(i, data.at(i));
            scatterSeries->append(i, data.at(i));
        }

    }

}

5.源代碼

• 有道雲下載鏈接

• 百度雲下載鏈接

       提取碼：urz0

• CSDN下載