淺談Qt的圖表開(kāi)發(fā)

陳嘉敏 趙云峰 史家樂(lè)

摘 要：在實(shí)際開(kāi)發(fā)中如果我們想要快速的開(kāi)發(fā)出一款簡(jiǎn)單實(shí)用的上位機(jī)軟件，而我們又是側(cè)重底層開(kāi)發(fā)或者剛?cè)腴T(mén)的新手，先前沒(méi)有進(jìn)行過(guò)相關(guān)的操作，這時(shí)Qt將是你的一個(gè)非常好的選擇。Qt采用C++進(jìn)行編程，完全向下兼容C語(yǔ)言，而且還有豐富的控件，這對(duì)于新手是非常容易上手的。而且Qt自帶了很多模塊，為我們的帶來(lái)了很多便利。本文我將著重就上位機(jī)開(kāi)發(fā)中經(jīng)常要用到的數(shù)據(jù)處理結(jié)合我前些日子做的一個(gè)小例子給大家分享一下如何用Qt實(shí)現(xiàn)數(shù)據(jù)的接收、存儲(chǔ)和圖形化顯示。

關(guān)鍵詞：Qt；圖表；數(shù)據(jù)庫(kù)

引言

本人一直在從事的都是底層的硬件驅(qū)動(dòng)，使用的都是面向過(guò)程的語(yǔ)言C語(yǔ)言。但前些日子由于業(yè)務(wù)需求需要開(kāi)發(fā)一個(gè)簡(jiǎn)單的上位軟件監(jiān)控界面，因此自學(xué)了C++和Qt，并最終完成了該監(jiān)控界面程序的開(kāi)發(fā)，可以實(shí)現(xiàn)常用的數(shù)據(jù)圖表化顯示，實(shí)現(xiàn)簡(jiǎn)單的曲線圖的繪制。下面我將簡(jiǎn)單總結(jié)一下這段時(shí)間以來(lái)本人的一些經(jīng)驗(yàn)和遇到的問(wèn)題，希望能給有這方面需求的人帶來(lái)一些幫助。

一、準(zhǔn)備工作

1）在工程的pro文件中添加QT += charts，這個(gè)語(yǔ)句是用來(lái)導(dǎo)入圖表模塊charts，如果沒(méi)有導(dǎo)入這個(gè)模塊，圖表相關(guān)的類(lèi)都不能使用。

2）在mainwindow.h中添加#include，包含圖表類(lèi)通用的頭文件，在使用各自的類(lèi)時(shí)要添加相應(yīng)的頭文件.

3）在mainwindow.h中添加如下代碼：

QT_CHARTS_BEGIN_NAMESPACE

class QLineSeries；

class QChart；

QT_CHARTS_END_NAMESPACE

QT_CHARTS_USE_NAMESPACE

代碼分析：從Qt源碼定義中可以看出若把上面的代碼展開(kāi)看，就是定義了一個(gè)命名空間QT_CHARTS_NAMESPACE，并把需要的兩個(gè)類(lèi)添加進(jìn)這個(gè)命名空間中。

二、相關(guān)的類(lèi)及具體實(shí)現(xiàn)

想要在Qt中實(shí)現(xiàn)曲線圖的繪制需要的最基本的類(lèi)即為Qchart類(lèi)，除此之外還需要QLineSeries、QChartView、QValueAxis等類(lèi)。下面我將一一介紹各個(gè)類(lèi)的作用

1）QValueAxis類(lèi)

這個(gè)類(lèi)的作用是用來(lái)自定義坐標(biāo)軸的。其實(shí)Qchart類(lèi)里也有一個(gè)默認(rèn)的坐標(biāo)軸，但是一般都不太符合我們的要求，所以一般的做法就是使用這個(gè)類(lèi)定義一個(gè)新的（坐標(biāo)軸）對(duì)象，設(shè)置相應(yīng)的參數(shù)后設(shè)置為Qchar的默認(rèn)坐標(biāo)軸。應(yīng)用代碼如下：

QValueAxis *axisX = new QValueAxis；axisX->setRange（0，10）；//設(shè)置坐標(biāo)軸范圍

axisX->setLabelFormat（"%g"）；//設(shè)置坐標(biāo)軸格axisX->setTitleText（"Samples"）；

QValueAxis *axisY = new QValueAxis；axisY->setRange（0，100）；

axisY->setTitleText（"Humility"）；

2）QLineSeries類(lèi)

這個(gè)類(lèi)還有幾個(gè)相似的類(lèi)，例QXYSeries類(lèi)、QSplineSeries類(lèi)等，這些類(lèi)的都是用來(lái)平滑曲線，實(shí)現(xiàn)把點(diǎn)連接成線的目的。使用時(shí)只要把關(guān)鍵坐標(biāo)點(diǎn)添加進(jìn)則幾個(gè)點(diǎn)集中，然后再把這些點(diǎn)集設(shè)置成表格圖像要顯示的點(diǎn)集即可。要注意的是這幾個(gè)類(lèi)對(duì)關(guān)鍵點(diǎn)的處理方式是不同的，QLineSeries類(lèi)會(huì)把添加進(jìn)的點(diǎn)以直線方式連接，也即之后會(huì)生成折線圖，而QSplineSeries類(lèi)會(huì)把關(guān)鍵點(diǎn)以平滑曲線連接，也即最后會(huì)生成一個(gè)曲線圖，在本次項(xiàng)目中我選擇的是QLineSeries類(lèi)來(lái)連接關(guān)鍵點(diǎn)，生成曲線圖。代碼示例如下：

QLineSeries *m_series = new QLineSeries；

QVector points；//矢量點(diǎn)集

points.append（QPointF（0，20））；points.append（QPointF（1，23））；

points.append（QPointF（2，12））；points.append（QPointF（3，45））；

points.append（QPointF（4，23））；points.append（QPointF（5，43））；

points.append（QPointF（6，3））； points.append（QPointF（7，43））；

points.append（QPointF（8，89））；points.append（QPointF（9，34））；

points.append（QPointF（10，76））；

m_series->replace（points）；

代碼分析：上面的代碼先是定義了一個(gè)矢量點(diǎn)集points，然后向這個(gè)點(diǎn)集中添加了11個(gè)點(diǎn)的坐標(biāo)，然后用replace函數(shù)替代m_series中的默認(rèn)坐標(biāo)點(diǎn)集。

3）QChart類(lèi)設(shè)置圖表格式

QChart類(lèi)是真正用來(lái)生成圖形曲線的，用這個(gè)類(lèi)可以對(duì)生成的曲線圖進(jìn)行各種格式的設(shè)置，代碼如下：

QChart *m_chart = new QChart；m_chart->addSeries（m_series）；//添加系列

m_chart->setAxisX（axisX，m_series）；//設(shè)置橫坐標(biāo)軸

m_chart->setAxisY（axisY，m_series）；//設(shè)置縱坐標(biāo)軸

m_chart->legend（）->hide（）；//將默認(rèn)的圖例樣式隱藏

m_chart->setTitle（"Chart test"）；//設(shè)置標(biāo)題

4）QchartView類(lèi)顯示出圖表

QchartView類(lèi)的作用是為了顯示的顯示出圖表，代碼設(shè)置如下：

QChartView *chartView = newQChartView（m_chart）；chartView->setParent（this）；

代碼分析：第一句代碼的作用是定義一個(gè)QChartView類(lèi)的對(duì)象指針，同時(shí)為該指針開(kāi)辟空間，并調(diào)用構(gòu)造函數(shù)用先前設(shè)置好的圖表m_chart去初始化該對(duì)象。第二句代碼的作用是把該對(duì)象指針（控件）添加進(jìn)主窗口，以能夠顯示在主窗上。

最后整體的顯示效果圖如下：

參考文獻(xiàn)

[1]（美）普拉達(dá)（Prata，S.）著；姜佑譯.C Primer Plus（第6版）[M].北京：人民郵電出版社，2016：576-589

[2]（美）Bruce Eckel.Thinking in C++（第一卷）[M].（美）新澤西：Prentice Hall，1998：319-454

[3]霍亞飛.Qt Creator快速入門(mén)[M].北京：北京航空航天大學(xué)出版社，2012，5：367-383

[4]霍亞飛.Qt及Qt Quick開(kāi)發(fā)實(shí)戰(zhàn)精解[M].北京：北京航空航天大學(xué)出版社，2012，5：79-100