知識(shí)不是單獨(dú)的，一定是成體系的。更多我的個(gè)人總結(jié)和相關(guān)經(jīng)驗(yàn)可查閱這個(gè)專欄：Visual Studio。
戰(zhàn)斗背景：做了個(gè)串口接收界面，用來(lái)接收傳輸過(guò)來(lái)的信號(hào)。但是光用數(shù)字顯示太單調(diào)，需要用圖線顯示出來(lái)。
戰(zhàn)略目標(biāo)：干掉它。
戰(zhàn)術(shù)路線：Qt 繪圖可以使用 Qt Charts，先了解一些關(guān)于 Qt Charts 的基礎(chǔ)知識(shí)，然后根據(jù)自己的實(shí)時(shí)動(dòng)態(tài)曲線需求，將它融合到我的工程中。
1. 實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的折線圖
先上效果，再來(lái)解釋。操作步驟和效果如下圖：
文件 GUI.h
文件 GUI.cpp
最終運(yùn)行效果：
可能 Bug：C1083
參考這個(gè)文章解決就行了：【Visual Studio】報(bào)錯(cuò) C1083，使用 C++ 語(yǔ)言，配合 Qt 開(kāi)發(fā)串口通信界面。
背后蘊(yùn)藏的知識(shí)
Qt 提供的相關(guān)的 class 類有：
算了下，一共有 48 個(gè)類，實(shí)現(xiàn)一個(gè)圖表并不需要全部用到，根據(jù)所需實(shí)現(xiàn)的圖表，只需用到當(dāng)中的幾個(gè)就行，這些類，大致上可以分為如下幾類：
-
QChartView Class： 一個(gè)用來(lái)顯示圖表的區(qū)域，或者理解為畫(huà)布，可以在QChartView上實(shí)現(xiàn)所有Qt Chart支持的圖表。
QChartView -> QGraphicsView -> QAbstractScrollArea -> QFrame -> QWidget
-
QChart Class：QChart 是 QGraphicsWidget，可以在 QGraphicsScene 上顯示，用來(lái)管理圖表中的數(shù)據(jù)、圖例、坐標(biāo)軸等，
QChart -> QGraphicsWidget -> QGraphicsObject and QGraphicsLayoutItem QGraphicsObject <-- QObject and QGraphicsItem
-
QLineSeries Class這個(gè)是圖表的類型，其他的還有QSplineSeries，QAreaSeries，QScatterSeries等。
2. 配置一下 chart 圖表的顯示區(qū)域
上述步驟做出來(lái)的表格，其顯示位置是顯示在了整個(gè)界面框中，把其他內(nèi)容都給覆蓋掉了，這是肯定不行的。
接下來(lái)我就將從網(wǎng)上對(duì)比后，覺(jué)得不錯(cuò)的方式記錄下來(lái)。最終效果就是將圖表限制到一定區(qū)域內(nèi)。效果如下圖所示。
文件 GUI.ui
這里我使用的是添加一個(gè) Widget 的方法。
文件 GUI.cpp
可能 Bug：C2653
參考這個(gè)文章解決就行了：【Visual Studio】報(bào)錯(cuò) C2653，使用 C++ 語(yǔ)言，配合 Qt 開(kāi)發(fā)串口通信界面。
3. 添加 XY 軸并修改顯示范圍
實(shí)現(xiàn)動(dòng)態(tài)曲線之前，我們先要具備能修改坐標(biāo)軸顯示范圍的功能。否則，當(dāng)數(shù)據(jù)傳輸越來(lái)越多，而坐標(biāo)軸的顯示范圍沒(méi)有及時(shí)發(fā)生更改，那么數(shù)據(jù)就沒(méi)有辦法正常顯示出來(lái)。
文件 GUI.h
文件 GUI.cpp
4. 使用系統(tǒng)當(dāng)前時(shí)間作為 X 軸坐標(biāo)
文件 GUI.ui
文件 GUI.h
這里使用 qdatetimeaxis.h 來(lái)完成。
文件 GUI.cpp
5. 動(dòng)態(tài)曲線
動(dòng)態(tài)曲線，顧名思義，就是讓曲線動(dòng)起來(lái)。其實(shí)經(jīng)過(guò)了以上的這幾步，接下來(lái)只需要兩句話就能讓程序動(dòng)起來(lái)了。
我是將這兩句寫(xiě)到了我的串口接收程序中了，也就是接到數(shù)據(jù)，就進(jìn)行圖表的更新。大家可以根據(jù)自己的需求，放到合適的位置，讓他的更新機(jī)制更符合自己的項(xiàng)目需求。
最后，放一張此小項(xiàng)目的最終效果圖。再往下，就涉及到一些實(shí)驗(yàn)室保密數(shù)據(jù)了，因此，就不方便再繼續(xù)展示了。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-500504.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-500504.html
Ref.
- 一、Qt Charts
- QtCharts編程筆記：VS2019+Qt Charts 5.15.1環(huán)境配置
- Qt GUI開(kāi)發(fā)（一）—— Qt Chart的簡(jiǎn)單使用
- QChart雙Y軸實(shí)時(shí)更新曲線圖（橫坐標(biāo)為當(dāng)前時(shí)間）
- QChart繪制占比圖，但是以時(shí)間軸為X軸
到了這里，關(guān)于【Visual Studio】Qt 的實(shí)時(shí)繪圖曲線功能，使用 C++ 語(yǔ)言，配合 Qt 開(kāi)發(fā)串口通信界面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
