一、前言

曲線面積圖其實就是在曲線圖上增加了顏色填充，單純的曲線可能就只有線條以及數據點，面積圖則需要從坐標軸的左下角和右下角聯合曲線形成完整的封閉區域路徑，然后對這個路徑進行顏色填充，為了更美觀的效果，一般這個填充顏色采用曲線條顏色的透明度值150繪制，看起來更具科幻感，面積圖和折線圖類似都可以重疊繪制多條，每條都可以是不同的顏色，如果數據點不較少的情況下，還可以開啟是否繪制數據值，開啟的話直接居中區域繪制對應的數據值。

為了更方便的使用二次開發改造的QCustomPlot，重命名了一些數據類型，比如曲線圖中的數據隊列一般有QVector，每次寫好多地方，可以重命名數據類型更短，寫起來更方便，還有就是針對一些曲線數據和屬性設置，定義成一個個數據結構體，在設置數據的時候只要先對結構體數據一個個設置好，最后一次性設置就行，參數看起來很短，最早期采用的分開的參數設置，搞得整個函數參數真多，比如曲線的名稱、坐標數據集合、線條寬度、線條顏色、數據點形狀、線條樣式、是否平滑曲線等一大堆參數，有時候突然用戶又新增一個要求又要增加一個參數，索性改成結構體數據存儲，這下清爽多了，增加個參數要改動的代碼量小很多，也更方便閱讀。

關于QCustomPlot曲線圖本身是不提供平滑曲線的，在這點上不得不承認Qt自帶的QChart是完爆QCustomPlot的，不僅有平滑曲線，還有各種切換動畫效果，看起來絲絲滑滑，數據平滑過渡一直往前進的感覺。在自定義QCustomPlot控件的時候就考慮到了這個問題，不改變QCustomPlot本身源碼的要求下，即可以是折線圖也可以是平滑曲線圖，平滑算法還有多種，比如采用Qt自帶的貝塞爾曲線cubicTo函數來形成平滑路徑，另外一種是網上找的開源的計算方法，兩種對比下來最明顯的區別就是一個峰更陡峭，甚至超過了對應的數據點，類似于有個慣性的感覺，線條滑的很厲害的時候剎車剎不住，還要慣性滑動一段路徑。

二、功能特點

采用分層設計，整體總共分三級界面，一級界面是整體布局，二級界面是單個功能模塊，三級界面是單個控件。

子控件包括餅圖、圓環圖、曲線圖、柱狀圖、柱狀分組圖、橫向柱狀圖、橫向柱狀分組圖、合格率控件、百分比控件、進度控件、設備狀態面板、表格數據、地圖控件、視頻控件等。

二級界面可以自由拖動懸浮，支持最小化隱藏、最大化關閉、響應雙擊自定義標題欄。

數據源支持模擬數據（默認）、數據庫采集、串口通信（需定制）、網絡通信（需定制）、網絡請求等，可自由設定每個子界面的采集間隔即數據刷新頻率。

采用純QWidget編寫，親測Qt4.6到Qt6.2任意版本，理論上支持后續其他Qt版本。

超強跨平臺，親測windows、linux、mac、國產uos、國產銀河麒麟kylin等系統，效果完美，同時還支持嵌入式linux比如樹莓派、香橙派、全志、imx6等。

同時集成了自定義控件、qchart餅圖、echart地圖等功能。

內置多套配色風格樣式（紫色、藍色、深藍、黑色），默認紫色，自適應任意分辨率。

可設置系統標題、目標分辨率、布局方案，啟動立即應用。

可設置主背景顏色、面板顏色、十字線游標顏色等各種顏色。

可設置多條曲線不同顏色，沒有設置顏色的情況下內置多套精美顏色隨機應用。

可設置標題欄背景顏色、文字顏色。

可設置曲線圖表背景顏色、文字顏色、網格顏色。

可設置正常顏色、警戒顏色、報警顏色、禁用顏色、百分比進度顏色。

可分別設置各種字體大小，比如全局字體、軟件名稱、標題欄、子標題欄、加粗標簽等。

可設置標題欄高度、表頭高度、行高度。

曲線支持游標、定位線、懸停高亮數據點、懸停顯示值。

柱狀圖支持頂部（可設置頂端、上部、中間、底部）顯示數據，全部自適應計算位置。

支持平滑曲線，內置多種平滑曲線算法，還支持面積圖平滑。

面積圖填充顏色可選多種規則比如單色透明度填充、透明度漸變填充等。

數據庫支持sqlite、mysql、postgresql、oracle、國產人大金倉等數據庫。

主界面直接鼠標右鍵切換布局、配色方案、關閉開啟某個二級窗體。

自動記憶所有子窗口的大小和位置，下次啟動立即應用。

動態加載布局方案菜單，可以動態新建布局、恢復布局、保存布局、另存布局等，用戶可以制造任意布局。

二級窗體，雙擊從主窗體分離出來浮動，可以自由調整大小。再次雙擊標題欄最大化，再次雙擊還原。

子模塊也可以全屏顯示作為一個大屏，這樣就可以一個大屏拓展出多個子大屏，放大查看子模塊的數據詳情，適用多屏展示。

每個模塊都可以自定義采集速度，如果是數據庫采集會自動排隊處理，后期還可以拓展每個子模塊都獨立的數據庫采集。

提供系統設置模塊進行整體的配置參數設置，效果立即應用。

提供精美炫酷的大屏地圖模塊，包括靜態圖片、閃爍效果、遷徙效果、世界地圖、區域地圖等，可指定點的經緯度坐標，識別單擊響應，可以做地圖跳轉等，每個點都可以不同的顏色和提示信息。

除了提供大屏系統外，還將每個模塊都做了獨立的模塊示例界面，每個模塊都可以獨立學習使用，里面用到的控件也單獨做了控件示例界面，方便學習每個控件如何使用。

非常詳細的開發和使用手冊，其中包括數據庫說明、模塊對照圖、控件對照圖、項目結構、代碼說明（精確到每個類）、演示demo、使用方法等。

三、體驗地址

體驗地址：https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取碼：01jf 文件名：bin_bigscreen.zip。

國內站點：https://gitee.com/feiyangqingyun

國際站點：https://github.com/feiyangqingyun

個人主頁：https://blog.csdn.net/feiyangqingyun

知乎主頁：https://www.zhihu.com/people/feiyangqingyun/

在線文檔：https://feiyangqingyun.gitee.io/qwidgetdemo/bigscreen/

四、效果圖

五、核心代碼

#include "frmplotarea.h" #include "ui_frmplotarea.h" #include "quihelper.h"frmPlotArea::frmPlotArea(QWidget *parent) : QWidget(parent), ui(new Ui::frmPlotArea) {ui->setupUi(this);this->initForm();this->loadPlot1();this->loadPlot2();this->loadPlot3(); }frmPlotArea::~frmPlotArea() {delete ui; }void frmPlotArea::initForm() {//設置X軸偏移值0ui->customPlot1->setOffsetX(0);//初始化跟隨鼠標游標ui->customPlot1->initTracer();//設置游標線條顏色ui->customPlot1->setLineColor("#A279C5");//設置顯示橫線+豎線//ui->customPlot1->setShowLineh(true);//ui->customPlot1->setShowLinev(true);//綁定雙擊重新加載數據connect(ui->customPlot1->getPlot(), SIGNAL(mouseDoubleClick(QMouseEvent *)), this, SLOT(loadPlot1()));connect(ui->customPlot2->getPlot(), SIGNAL(mouseDoubleClick(QMouseEvent *)), this, SLOT(loadPlot2()));connect(ui->customPlot3->getPlot(), SIGNAL(mouseDoubleClick(QMouseEvent *)), this, SLOT(loadPlot3())); }void frmPlotArea::loadPlot1() {loadPlot(0, ui->customPlot1, QColor(50, 185, 207), 3, false); }void frmPlotArea::loadPlot2() {loadPlot(1, ui->customPlot2, QColor(162, 121, 197), 3, false); }void frmPlotArea::loadPlot3() {loadPlot(1, ui->customPlot3, QColor(253, 139, 40), 2, true); }//smoothType: 折線圖=-1 平滑算法1=0 平滑算法2=1 void frmPlotArea::loadPlot(int smoothType, CustomPlot *customPlot, const QColor &color, int dataWidth, bool drawValue) {//清空畫布customPlot->clear();QStringList lineNames;lineNames << "合格率";//初始化對應的數據vstring lab;vdouble key, value1;int dataCount = 15;for (int i = 0; i < dataCount; i++) {lab << QString("%1").arg(i + 1);key << i;value1 << CustomPlotHelper::getRandValue(30, 80);}lvdouble values;values << value1;customPlot->setPadding(9);//設置數據結構體LineData data;data.index = 0;data.name = lineNames.at(0);data.key = key;data.value = values.at(0);//設置線條顏色,可以指定顏色也可以隨機顏色data.lineColor = color;data.fillColor = 1;//折線圖或者平滑曲線if (smoothType < 0) {//添加畫布customPlot->addGraph(1);//初始化指示器數據高亮及懸停提示等customPlot->initItem();//設置畫布折線圖數據customPlot->setDataLine(data);} else {//有多種平滑算法 0 1data.smoothType = smoothType;vpoint points;int count = key.count();for (int i = 0; i < count; ++i) {points << QPointF(data.key.at(i), data.value.at(i));}data.points = points;//設置數據寬度data.dataWidth = dataWidth;//設置繪制數據值data.drawValue = drawValue;customPlot->addSmoothLine(data);}//設置坐標軸范圍值+X坐標對應顯示文字customPlot->setLabX(key, lab);customPlot->setRangeX(-0.5, key.count() - 0.5);customPlot->setRangeY(0, 105, 10);//重新刷新顯示customPlot->replot(); }

總結

以上是生活随笔為你收集整理的Qt编写可视化大屏电子看板系统15-曲线面积图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。