Qt折線圖最簡實現

本文將演示如何用Qt Charts快速實現一個最簡單的折線圖顯示。

若是您想直接運行體驗效果，能夠直接點擊這裏下載源碼編譯：

0x00 最終效果

​ 本文最後將會實現以下效果：

0x01 添加charts模塊

​ Qt Charts做爲一個獨立的模塊，在使用前須要在項目的pro文件中添加：

• QtExample.pro：

# 添加Qt charts模塊
QT    += charts

0x02 包含charts頭文件並引用QT charts命名空間

• main.cpp:

// 包含line chart須要的頭文件
#include <QChartView>
#include <QLineSeries>
// 引用命名空間
QT_CHARTS_USE_NAMESPACE

int main(){
    ...
}

0x03 建立QLineSeries並添加數據

​ 折線圖的實現須要建立一個QLineSeries對象用於保存和繪製折線數據：

• main.cpp:

// new 一個 QLineSeries實例
QLineSeries *series = new QLineSeries();
// 添加實驗數據,能夠用 append 方法或者 >> 操做符
series->append(0,2);
series->append(QPointF(2,6));
series->append(3,8);
series->append(7,9);
series->append(11,3);

*series << QPointF(11,2) << QPointF(15,5) << QPointF(18,4) << QPointF(19,2);

0x04 建立QChart用於顯示數據

​ 建立好series後，須要建立一個QChart實例並關聯series，建立座標才能將數據顯示出來：

• main.cpp:

QChart *chart = new QChart();
// 將圖例隱藏
chart->legend()->hide();
// 關聯series，這一步很重要，必需要將series關聯到QChart才能將數據渲染出來：
chart->addSeries(series);
// 開啓OpenGL，QLineSeries支持GPU繪製，Qt其餘有的圖表類型是不支持的。
series->setUseOpenGL(true);
// 建立默認的座標系（笛卡爾座標）
chart->createDefaultAxes();
// 設置圖表標題
chart->setTitle(QStringLiteral("Qt line chart example"));

0x05 建立QChartView對象並顯示圖表

​ 這裏建立QChartView對象是爲了將最終結果顯示到界面，若是不想用QChartView，也能夠選擇QGraphicsView scene來顯示。

• main.cpp:

QChartView *view = new QChartView(chart);
// 開啓抗鋸齒，讓顯示效果更好
view->setRenderHint(QPainter::Antialiasing);
view->resize(400,300);
// 顯示圖表
view->show();

0x06 完整源碼

• QtExamples.cpp:

QT  += charts
SOURCES += \
        main.cpp

• main.cpp:

// 包含頭文件
#include <QApplication>
#include <QChartView>
#include <QLineSeries>
// 引用命名空間
QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);


    QLineSeries *series = new QLineSeries();

    series->append(0,2);
    series->append(QPointF(2,6));
    series->append(3,8);
    series->append(7,9);
    series->append(11,3);

    *series << QPointF(11,2) << QPointF(15,5) << QPointF(18,4) << QPointF(19,2);

    QChart *chart = new QChart();
    // 將圖例隱藏
    chart->legend()->hide();
    // 關聯series，這一步很重要，必需要將series關聯到QChart才能將數據渲染出來：
    chart->addSeries(series);
    // 開啓OpenGL，QLineSeries支持GPU繪製，Qt其餘有的圖表類型是不支持的。
    series->setUseOpenGL(true);
    // 建立默認的座標系（笛卡爾座標）
    chart->createDefaultAxes();
    // 設置圖表標題
    chart->setTitle(QStringLiteral("Qt line chart example"));

    QChartView *view = new QChartView(chart);
    // 開啓抗鋸齒，讓顯示效果更好
    view->setRenderHint(QPainter::Antialiasing);
    view->resize(400,300);
    // 顯示圖表
    view->show();

    return a.exec();
}

0x07 參考

• Qt LineChart Example，或者直接在Qt Creator搜索linechart：

​

0x08 The end :)

文章首發自公衆號:： nullobject 。
我的站點： https://www.nullobject.cn