第Qt利用QChart實(shí)現(xiàn)實(shí)時(shí)波形圖的繪制目錄前言1.QChart配置以及使用1.1QChart環(huán)境配置1.2控件使用1.3代碼配置2.QChat設(shè)置動(dòng)態(tài)折線圖2.1基礎(chǔ)數(shù)據(jù)設(shè)置2.2定時(shí)器控制數(shù)據(jù)變動(dòng)3.實(shí)際硬件數(shù)據(jù)采集圖形繪制4.總結(jié)

前言

前兩天需要做一個(gè)繪圖功能。我們的需求是這樣子的：硬件實(shí)時(shí)發(fā)送數(shù)據(jù)，繪制數(shù)據(jù)波形圖，要求波形圖根據(jù)數(shù)據(jù)實(shí)時(shí)變化。

展示效果如下：

如果有和我一樣的功能，大家可以繼續(xù)往下看，沒準(zhǔn)會(huì)對(duì)你有一定的幫助喲~

看上面的展示圖會(huì)發(fā)現(xiàn)，怎么這么丑！確實(shí)，根據(jù)硬件實(shí)時(shí)傳入的數(shù)據(jù)以及時(shí)間不同，產(chǎn)生的數(shù)據(jù)肯定會(huì)不美觀。

實(shí)際硬件傳入的是一個(gè)數(shù)據(jù)深度值，數(shù)據(jù)類似于以下的結(jié)構(gòu)：

[0,3,5,8,10,13,15,18,20,23,25,28,26,23,20,16,13,11,9,6,4,3,0]

根據(jù)實(shí)際數(shù)據(jù)大家會(huì)發(fā)現(xiàn)，數(shù)據(jù)深度值會(huì)由小變大，達(dá)到一個(gè)最大值后，再會(huì)由大變小，直到0位置。

數(shù)據(jù)的變化就是上面的規(guī)律，但是并不代表的硬件傳入的數(shù)據(jù)與上面我寫的是完全一致的，只是數(shù)據(jù)形式一致。

那么，我們?cè)撊绾螌?shí)時(shí)繪制圖形，展示出最開始的效果來呢？

為了簡單期間，我們采用Qt中特有的繪圖控件：QChart

開發(fā)環(huán)境：VS2017+Qt5.14.2

接下來，我會(huì)對(duì)功能進(jìn)行詳細(xì)講解，最后并說明使用QChart有哪些優(yōu)點(diǎn)以及不足。

1.QChart配置以及使用

1.1QChart環(huán)境配置

我們要在Qt中使用QChart控件，需要在項(xiàng)目中進(jìn)行配置，效果如下：

1.2控件使用

在Designer中拖出一個(gè)GrahpiceView控件，提升成QChart類。

提升方法，如下：

緊接著，我們就可以在項(xiàng)目中使用QChart控件啦！

1.3代碼配置

添加頭文件：#includeQtCharts

并且需要使用QtChart的命名空間：usingnamespaceQtCharts;

到這里，關(guān)于QChart的配置就已經(jīng)完成了，下面進(jìn)入到了實(shí)際應(yīng)用中了。

2.QChat設(shè)置動(dòng)態(tài)折線圖

靜態(tài)折線圖大家都不陌生，那么該如何設(shè)置動(dòng)態(tài)這點(diǎn)圖呢？類似于下面的動(dòng)態(tài)效果：

2.1基礎(chǔ)數(shù)據(jù)設(shè)置

//x坐標(biāo)軸

QValueAxis*m_pAxisX=newQValueAxis();

m_pAxisX-setMin(0);

m_pAxisX-setMax(100);

//y坐標(biāo)軸

QValueAxis*m_pAxisY=newQValueAxis();

m_pAxisY-setRange(-40,0);

//創(chuàng)建折線類

QLineSeries*m_pLineSeries=newQLineSeries();//創(chuàng)建折線繪制對(duì)象

m_pLineSeries-setPointsVisible(true);//設(shè)置數(shù)據(jù)點(diǎn)可見

m_pLineSeries-attachAxis(m_pAxisX);//X軸綁定

m_pLineSeries-attachAxis(m_pAxisY);//Y軸綁定

//創(chuàng)建QChart

QChart*m_pChart=newQChart();

m_pChart-addAxis(m_pAxisX,Qt::AlignBottom);//將X軸添加到圖表上

m_pChart-addAxis(m_pAxisY,Qt::AlignRight);//將Y軸添加到圖表上

m_pChart-addSeries(m_pLineSeries);

m_pChart-setMargins(QMargins(0,0,0,0));

m_pChart-legend()-hide();//隱藏圖例

//綁定chart控件

ui.chart-setChart(m_pChart);

ui.chart-setRenderHint(QPainter::Antialiasing);

2.2定時(shí)器控制數(shù)據(jù)變動(dòng)

正常使用QChart情況下，圖形都是固定的，那么動(dòng)態(tài)效果該如何實(shí)現(xiàn)呢？

所謂的讓數(shù)據(jù)動(dòng)起來，其實(shí)就是需要在QChart中添加數(shù)據(jù)或者替換數(shù)據(jù)。

大家看好了?。∈牵禾砑踊蛘咛鎿Q。

一般情況下，做動(dòng)態(tài)圖時(shí)，想要效率和性能好最好的方式是替換。這個(gè)方式做優(yōu)化吧，這里只是將簡單的讓數(shù)據(jù)動(dòng)起來，我們采用一直追加的方式。

思路：

1：開啟一個(gè)定時(shí)器。

2：每次進(jìn)入定時(shí)器時(shí)，都需要重新設(shè)置X軸的區(qū)間范圍。

3：每次進(jìn)入定時(shí)器時(shí)，都需要append一條新數(shù)據(jù)。

定時(shí)器處理代碼：

if(event-timerId()==m_nTimerId)

intnCount=m_pLineSeries-points().size();

m_pChart-axisX()-setMin(nCount-100);

m_pChart-axisX()-setMax(nCount);

m_pLineSeries-append(QPointF(nCount,-rand()%40));

3.實(shí)際硬件數(shù)據(jù)采集圖形繪制

經(jīng)過前兩個(gè)部分的介紹，對(duì)于QChart進(jìn)行動(dòng)態(tài)畫圖已經(jīng)有了初步的了解，接下來，我們就需要對(duì)實(shí)際的數(shù)據(jù)進(jìn)行分析，并且繪制出如文章開始時(shí)的折線圖。

同樣采用append的方法。這里，就不是插入的隨機(jī)數(shù)：-rand()%40了，而是真實(shí)的數(shù)據(jù)。

定義接收硬件真實(shí)數(shù)據(jù)的接口：

SetReceiveRealTimeData(intnData);//設(shè)置：接收實(shí)時(shí)數(shù)據(jù)值

我們需要在程序中定義一個(gè)成員變量，時(shí)刻記錄最新的數(shù)據(jù)值，在定時(shí)器中，只需要實(shí)時(shí)繪制最新的數(shù)據(jù)值就可以了。

接收函數(shù)的實(shí)際操作：

voidSetReceiveRealTimeData(intnData)

m_nDepth=nData;//始終記錄最新的深度值

定時(shí)器代碼修改操作：

if(event-timerId()==m_nTimerId)

intnCount=m_pLineSeries-points().size();

m_pChart-axisX()-setMin(nCount-100);

m_pChart-axisX()-setMax(nCount);

m_pLineSeries-append(QPointF(nCount,m_nDepth);

只需要稍作修改，就可以根據(jù)實(shí)際的深度值繪制出波形了。

4.總結(jié)

我們?cè)谑褂肣Chart中的優(yōu)點(diǎn)：

1：讓控件幫助我們做圖形繪制，減少了不必要的繪圖操作

2：界面頻繁刷新不會(huì)導(dǎo)致頁面閃爍

3：操作簡單

那么，對(duì)于QChart有哪些缺點(diǎn)呢？

1：只要不append數(shù)據(jù)，波形就會(huì)卡頓

2：無法滿足邊刷新數(shù)據(jù)邊更改圖形操作。

3：存儲(chǔ)的數(shù)據(jù)會(huì)一直變多，動(dòng)態(tài)頁面時(shí)間過長會(huì)導(dǎo)致性能降低，消耗資源。

有人會(huì)問，什么叫做無法滿足便刷新數(shù)據(jù)邊更改圖形呢？

解釋：我這里有個(gè)特殊需求，在進(jìn)