前言

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

展示效果如下：

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

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

實(shí)際硬件傳入的是一個(gè)數(shù)據(jù)深度值，數(shù)據(jù)類(lèi)似于以下的結(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ù)與上面我寫(xiě)的是完全一致的，只是數(shù)據(jù)形式一致。

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

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

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

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

1.QChart配置以及使用

1.1QChart環(huán)境配置

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

1.2控件使用

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

提升方法，如下：

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

1.3代碼配置

添加頭文件：#include <QtCharts>

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

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

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

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

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

//x坐標(biāo)軸
QValueAxis *m_pAxisX = new QValueAxis();
m_pAxisX->setMin(0);
m_pAxisX->setMax(100);
//y坐標(biāo)軸
QValueAxis *m_pAxisY = new QValueAxis();
m_pAxisY->setRange(-40, 0);
//創(chuàng)建折線(xiàn)類(lèi)
QLineSeries *m_pLineSeries = new QLineSeries(); //創(chuàng)建折線(xiàn)繪制對(duì)象
m_pLineSeries->setPointsVisible(true); //設(shè)置數(shù)據(jù)點(diǎn)可見(jiàn)
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í)器控制數(shù)據(jù)變動(dòng)

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

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

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

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

思路：

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

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

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

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

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í)際硬件數(shù)據(jù)采集圖形繪制

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

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

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

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

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

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

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

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

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ù)實(shí)際的深度值繪制出波形了。

4.總結(jié)

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

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

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

3：操作簡(jiǎn)單

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

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

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

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

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

解釋?zhuān)何疫@里有個(gè)特殊需求，在進(jìn)行實(shí)際數(shù)據(jù)繪制過(guò)程中，需要實(shí)時(shí)更改圖形的曲線(xiàn)，最后展示的一定是一條直線(xiàn)，而不是像文章開(kāi)始的效果一樣

標(biāo)準(zhǔn)展示方式，如下：

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

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

最新評(píng)論