一、前言

標準柱狀圖是大屏系統中最常用的一種展示數據效果圖，提供不同的柱子顯示數據值，在QCustomPlot的基礎上拓展了頂部顯示對應的值，不同的柱子不同的顏色，同時還可以調用內置的觸發報警顏色的機制，比如超過90%就自動紅色顯示，這樣用戶使用的時候只要傳入值就行，默認的機制一般是三種顏色，正常顏色、警告顏色、報警顏色，三種顏色都對應觸發值，超過對應的值就顯示對應的顏色。一般的規則都是大于設定的警戒值就觸發，其實真實世界是簡單的也是復雜的，還有不少的場景是低于一定的值才報警，倒過來的規則，可能會有三種規則，規則1大于報警值報警（大部分的規則都是這個），規則2小于報警值報警（比如氣體濃度），規則3在范圍值內則報警。

在柱狀圖上面顯示對應的值這個需求非常多，不清楚為何很多曲線圖控件不默認就支持這個特性，而是需要額外的寫代碼繪制處理，比如Qt界著名的曲線圖三劍客QCustomPlot、Qwt、QChart都默認沒有這個效果，好在開源的世界是豐富多彩的，這三劍客本身都是開源的，源代碼量也不是很多，稍微花點時間看看學習下也是不錯的選擇，而且柱狀圖上顯示對應的值的處理和代碼網上也是一大堆，面向百度和搜索編程相信是眾多程序員的選擇和喜愛。

開源庫QCustomPlot有多個版本，基本上可以歸納為v1和v2，在部分代碼處理上有區別，所以為了支持v1和v2兩個版本，在做二次開發的時候都做了兼容，其實必須性不大，畢竟v2也從Qt4.6支持到了Qt6，蠻好的，做支持的時候純粹為了鍛煉技術，看下兩者到底區別在哪，處理方式有何區別，還有個稍微微小的考慮就是可能有些用戶還在用v1為了兼容這批用戶，省得換成v2整個項目曲線的地方改動不小。

二、功能特點

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

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

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

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

采用純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 "customplotbarv.h"CustomPlotBarv::CustomPlotBarv(QCPAxis *keyAxis, QCPAxis *valueAxis) : QCPBars(keyAxis, valueAxis) {valuePosition = 1;valuePrecision = 0;valueColor = Qt::white;checkData = false; }void CustomPlotBarv::draw(QCPPainter *painter) {//必須先繼續繪制父類,不然父類的所有東西沒有繪制//順序不能反,先繪制完父類再繪制自定義的數據,不然會覆蓋QCPBars::draw(painter);//迭代拿到每個區域的坐標和寬高int index = -1; #ifdef qcustomplot_v1QCPBarDataMap::const_iterator visibleBegin, visibleEnd;getVisibleDataBounds(visibleBegin, visibleEnd);for (QCPBarDataMap::const_iterator it = visibleBegin; it != visibleEnd; ++it) { #elseQCPBarsDataContainer::const_iterator visibleBegin, visibleEnd;getVisibleDataBounds(visibleBegin, visibleEnd);for (QCPBarsDataContainer::const_iterator it = visibleBegin; it != visibleEnd; ++it) { #endif//獲取柱狀圖區域 #ifdef qcustomplot_v1QPolygonF barPolygon = getBarPolygon(it.key(), it.value().value);QRectF rect;int x1 = barPolygon.at(1).x();int y1 = barPolygon.at(1).y();int x2 = barPolygon.at(3).x();int y2 = barPolygon.at(3).y();rect.setX(x1);rect.setY(y1);rect.setWidth(x2 - x1);rect.setHeight(y2 - y1); #elseQRectF rect = getBarRect(it->key, it->value); #endif//先處理校驗數據index++;if (checkData) {if (it->value >= 80) {setBrush(QColor(0, 176, 180));} else if (it->value >= 60) {setBrush(QColor(255, 192, 0));} else {setBrush(QColor(214, 77, 84));}} else {//如果存在顏色集合則取顏色集合if (index < barColors.count()) {setBrush(barColors.at(index));}}//設置畫筆和畫刷,繪制矩形區域形成柱狀圖if (this->pen() != Qt::NoPen) {painter->setPen(this->pen().color());}painter->setBrush(this->brush());painter->drawRect(rect);//設置文本的顏色,還可以設置字體painter->setPen(valueColor);//這里可以設置小數點精確度QString strValue = QString::number(it->value, 'f', valuePrecision);//計算字體的高度QFontMetrics fm = painter->fontMetrics(); #if (QT_VERSION >= QT_VERSION_CHECK(5,11,0))int textWidth = fm.horizontalAdvance(strValue); #elseint textWidth = fm.width(strValue); #endifint textHeight = fm.ascent() + fm.descent();//如果矩形寬度小于文字寬度則不繪制if (rect.width() < textWidth) {continue;}//如果不在頂部,矩形高度小于文字高度則不繪制if (valuePosition > 1) {if (rect.height() < textHeight) {continue;}}//0-不繪制 1-頂部上面 2-頂部居中 3-中間居中 4-底部居中//設置區域一點點偏差,看起來不那么擁擠int offset = 3;if (valuePosition == 1) {rect.setY(rect.y() - textHeight - offset);painter->drawText(rect, Qt::AlignTop | Qt::AlignHCenter, strValue);} else if (valuePosition == 2) {rect.setY(rect.y() + offset);painter->drawText(rect, Qt::AlignTop | Qt::AlignHCenter, strValue);} else if (valuePosition == 3) {painter->drawText(rect, Qt::AlignVCenter | Qt::AlignHCenter, strValue);} else if (valuePosition == 4) {rect.setHeight(rect.height() - offset);painter->drawText(rect, Qt::AlignBottom | Qt::AlignHCenter, strValue);}} }int CustomPlotBarv::getValuePosition() const {return this->valuePosition; }int CustomPlotBarv::getValuePrecision() const {return this->valuePrecision; }QColor CustomPlotBarv::getValueColor() const {return this->valueColor; }bool CustomPlotBarv::getCheckData() const {return this->checkData; }void CustomPlotBarv::setValuePostion(int valuePosition) {if (this->valuePosition != valuePosition) {this->valuePosition = valuePosition;} }void CustomPlotBarv::setValuePrecision(int valuePrecision) {if (this->valuePrecision != valuePrecision) {this->valuePrecision = valuePrecision;} }void CustomPlotBarv::setValueColor(const QColor &valueColor) {if (this->valueColor != valueColor) {this->valueColor = valueColor;} }void CustomPlotBarv::setCheckData(bool checkData) {if (this->checkData != checkData) {this->checkData = checkData;} }void CustomPlotBarv::setBarColors(const lcolor &barColors) {this->barColors = barColors; }

總結

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

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