前言

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

展示效果如下：

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

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

實際硬件傳入的是一個數(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ù)據(jù)大家會發(fā)現(xiàn)，數(shù)據(jù)深度值會由小變大，達到一個最大值后，再會由大變小，直到0位置。

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

那么，我們該如何實時繪制圖形，展示出最開始的效果來呢？

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

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

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

1.QChart配置以及使用

1.1QChart環(huán)境配置

我們要在Qt中使用QChart控件，需要在項目中進行配置，效果如下：

1.2控件使用

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

提升方法，如下：

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

1.3代碼配置

添加頭文件：#include <QtCharts>

并且需要使用QtChart的命名空間：using namespace QtCharts;

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

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

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

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

//x坐標軸
QValueAxis *m_pAxisX = new QValueAxis();
m_pAxisX->setMin(0);
m_pAxisX->setMax(100);
//y坐標軸
QValueAxis *m_pAxisY = new QValueAxis();
m_pAxisY->setRange(-40, 0);
//創(chuàng)建折線類
QLineSeries *m_pLineSeries = new QLineSeries(); //創(chuàng)建折線繪制對象
m_pLineSeries->setPointsVisible(true); //設(shè)置數(shù)據(jù)點可見
m_pLineSeries->attachAxis(m_pAxisX); //X軸綁定
m_pLineSeries->attachAxis(m_pAxisY); //Y軸綁定
//創(chuàng)建QChart
QChart *m_pChart = new QChart();
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ù)據(jù)變動

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

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

大家看好了！！是：添加或者替換。

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

思路：

1：開啟一個定時器。

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

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

定時器處理代碼：

if (event->timerId() == m_nTimerId)
{
	int nCount = m_pLineSeries->points().size();
	m_pChart->axisX()->setMin(nCount - 100);
	m_pChart->axisX()->setMax(nCount);

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

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

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

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

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

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

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

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

void SetReceiveRealTimeData(int nData)
{
    m_nDepth = nData; //始終記錄最新的深度值
}

定時器代碼修改操作：

if (event->timerId() == m_nTimerId)
{
	int nCount = m_pLineSeries->points().size();
	m_pChart->axisX()->setMin(nCount - 100);
	m_pChart->axisX()->setMax(nCount);

	m_pLineSeries->append(QPointF(nCount, m_nDepth);
}

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

4.總結(jié)

我們在使用QChart中的優(yōu)點：

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

2：界面頻繁刷新不會導致頁面閃爍

3：操作簡單

那么，對于QChart有哪些缺點呢？

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

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

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

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

解釋：我這里有個特殊需求，在進行實際數(shù)據(jù)繪制過程中，需要實時更改圖形的曲線，最后展示的一定是一條直線，而不是像文章開始的效果一樣

標準展示方式，如下：

如此以來使用QChart控件就無法滿足我的需求了，在這里我也嘗試了替換這種方法，結(jié)果操作太多，圖形可以展示，但是在修改過程中會導致圖像刷新緩慢，最后，我還是放棄了使用QChart控件了。

到此這篇關(guān)于Qt利用QChart實現(xiàn)實時波形圖的繪制的文章就介紹到這了,更多相關(guān)Qt繪制實時波形圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論