一、前言

柱狀分組圖是柱狀堆積圖的衍生或者另外一種展示效果，設(shè)置的數(shù)據(jù)值數(shù)據(jù)源集合完全一樣，只不過就是把柱子給拿下來了放在旁邊，然后一個分組多個柱子橫向排列，不同分組之間有一定的空隙隔開，默認(rèn)QCustomPlot是不提供分組圖的，怎么辦呢，于是搞了一個很巧妙的算法，在標(biāo)注柱狀圖的基礎(chǔ)上，通過不同分組設(shè)置不同的x坐標(biāo)也就是key值來形成分組的效果，key相隔的差值越大則距離越大，同一分組之間的柱子是緊挨著的沒有差值，只有不同分組的第一個柱子需要有差值，于是搞了一個小小的計算公式來計算這個差值。

沒有內(nèi)置分組圖的功能也不能怪QCustomPlot，畢竟他核心處理是曲線圖，在曲線圖展示處理這塊牛逼的沒得話說，這是他的核心，拋開這個核心再三心二意搞點周邊的功能，搞得好還好說，搞不好就一堆罵，其實這正是我想強(qiáng)調(diào)的一點，做軟件開發(fā)這點尤為重要，千萬不能三心二意東搞搞西搞搞，一定要先把核心的功能處理好穩(wěn)定好，再慢慢拓展周邊的功能，如果是上級領(lǐng)導(dǎo)要求遍地開花的搞一下這個有搞一下那個，大可以頂回去，讓他自己寫代碼去。

二、功能特點

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

子控件包括餅圖、圓環(huán)圖、曲線圖、柱狀圖、柱狀分組圖、橫向柱狀圖、橫向柱狀分組圖、合格率控件、百分比控件、進(jìn)度控件、設(shè)備狀態(tài)面板、表格數(shù)據(jù)、地圖控件、視頻控件等。

二級界面可以自由拖動懸浮，支持最小化隱藏、最大化關(guān)閉、響應(yīng)雙擊自定義標(biāo)題欄。

數(shù)據(jù)源支持模擬數(shù)據(jù)（默認(rèn)）、數(shù)據(jù)庫采集、串口通信（需定制）、網(wǎng)絡(luò)通信（需定制）、網(wǎng)絡(luò)請求等，可自由設(shè)定每個子界面的采集間隔即數(shù)據(jù)刷新頻率。

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

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

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

內(nèi)置多套配色風(fēng)格樣式（紫色、藍(lán)色、深藍(lán)、黑色），默認(rèn)紫色，自適應(yīng)任意分辨率。

可設(shè)置系統(tǒng)標(biāo)題、目標(biāo)分辨率、布局方案，啟動立即應(yīng)用。

可設(shè)置主背景顏色、面板顏色、十字線游標(biāo)顏色等各種顏色。

可設(shè)置多條曲線不同顏色，沒有設(shè)置顏色的情況下內(nèi)置多套精美顏色隨機(jī)應(yīng)用。

可設(shè)置標(biāo)題欄背景顏色、文字顏色。

可設(shè)置曲線圖表背景顏色、文字顏色、網(wǎng)格顏色。

可設(shè)置正常顏色、警戒顏色、報警顏色、禁用顏色、百分比進(jìn)度顏色。

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

可設(shè)置標(biāo)題欄高度、表頭高度、行高度。

曲線支持游標(biāo)、定位線、懸停高亮數(shù)據(jù)點、懸停顯示值。

柱狀圖支持頂部（可設(shè)置頂端、上部、中間、底部）顯示數(shù)據(jù)，全部自適應(yīng)計算位置。

支持平滑曲線，內(nèi)置多種平滑曲線算法，還支持面積圖平滑。

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

數(shù)據(jù)庫支持sqlite、mysql、postgresql、oracle、國產(chǎn)人大金倉等數(shù)據(jù)庫。

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

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

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

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

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

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

提供系統(tǒng)設(shè)置模塊進(jìn)行整體的配置參數(shù)設(shè)置，效果立即應(yīng)用。

提供精美炫酷的大屏地圖模塊，包括靜態(tài)圖片、閃爍效果、遷徙效果、世界地圖、區(qū)域地圖等，可指定點的經(jīng)緯度坐標(biāo)，識別單擊響應(yīng)，可以做地圖跳轉(zhuǎn)等，每個點都可以不同的顏色和提示信息。

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

非常詳細(xì)的開發(fā)和使用手冊，其中包括數(shù)據(jù)庫說明、模塊對照圖、控件對照圖、項目結(jié)構(gòu)、代碼說明（精確到每個類）、演示demo、使用方法等。

三、體驗地址

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

國內(nèi)站點：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 "customplottracer.h"CustomPlotTracer::CustomPlotTracer(QCustomPlot *parentPlot) : QCPLayerable(parentPlot) {showLineh = false;showLinev = false;lineWidth = 3;lineColor = QColor(255, 0, 0);movePos = QPoint(100, 50);customPlot = parentPlot;connect(parentPlot, SIGNAL(mouseMove(QMouseEvent *)), this, SLOT(mouseMove(QMouseEvent *))); }void CustomPlotTracer::applyDefaultAntialiasingHint(QCPPainter *painter) const {Q_UNUSED(painter); }void CustomPlotTracer::draw(QCPPainter *painter) {QPen pen;pen.setWidth(lineWidth);pen.setColor(lineColor);painter->setPen(pen);if (showLinev) {painter->drawLine(QPointF(x, dHeight), QPointF(x, dY));pen.setColor(Qt::white);painter->setPen(pen);QFontMetrics fm = painter->fontMetrics();QString year = QString::number(QDate::currentDate().year()); #if (QT_VERSION >= QT_VERSION_CHECK(5,11,0))int width = fm.horizontalAdvance(year); #elseint width = fm.width(year); #endifpainter->drawText(QPointF(x - width / 2, dHeight - 3), year);}if (showLineh) {pen.setColor(lineColor);painter->setPen(pen);painter->drawLine(QPointF(dX, y), QPointF(dWidth, y));} }bool CustomPlotTracer::getShowLineh() const {return this->showLineh; }bool CustomPlotTracer::getShowLinev() const {return this->showLinev; }int CustomPlotTracer::getLineWidth() const {return this->lineWidth; }QColor CustomPlotTracer::getLineColor() const {return this->lineColor; }void CustomPlotTracer::mouseMove(QMouseEvent *event) {Q_UNUSED(event);movePos = event->pos();drawLine(); }void CustomPlotTracer::setShowLineh(bool showLineh) {if (this->showLineh != showLineh) {this->showLineh = showLineh;customPlot->replot();} }void CustomPlotTracer::setShowLinev(bool showLinev) {if (this->showLinev != showLinev) {this->showLinev = showLinev;customPlot->replot();} }void CustomPlotTracer::setLineWidth(int lineWidth) {if (this->lineWidth != lineWidth) {this->lineWidth = lineWidth;customPlot->replot();} }void CustomPlotTracer::setLineColor(const QColor &lineColor) {if (this->lineColor != lineColor) {this->lineColor = lineColor;customPlot->replot();} }void CustomPlotTracer::drawLine() {x = movePos.x();y = movePos.y();//取出當(dāng)前XY軸的范圍值QCPRange rangex = customPlot->xAxis->range();QCPRange rangey = customPlot->yAxis->range();//qDebug() << rangex.lower << rangex.upper << rangey.lower << rangey.upper;//取出左下角坐標(biāo)軸原點(0,0)在整個畫布的屏幕坐標(biāo)位置dX = customPlot->xAxis->coordToPixel(rangex.lower);dY = customPlot->yAxis->coordToPixel(rangey.lower);dWidth = customPlot->xAxis->coordToPixel(rangex.upper);dHeight = customPlot->yAxis->coordToPixel(rangey.upper);//必須在曲線區(qū)域內(nèi)if (x >= dX && x <= dWidth && y <= dY && y >= dHeight) {customPlot->replot();} }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。