一、前言

為了拋棄對QChart的依賴，以及echart的依賴，（當然，后期也會做qchart的版本和echart的版本，尤其是echart的版本是肯定會做的，畢竟echart的效果牛逼的一塌糊涂，全宇宙最牛逼吧。）特意對QCustomPlot進行了大刀闊斧的改造，當然這個改造不是直接在源碼上修改，這個就破壞了源碼的完整性，說不定被QCustomPlot的作者知道了有種被QJ的感覺，我得改造是直接繼承QCustomPlot中的部分類開始的，比如為了實現橫向柱狀圖，特意繼承自QCPItemRect類來實現的，包括了橫向柱狀圖和橫向柱狀分組圖。在這個橫向柱狀圖的自動計算過程中，居然用到了十幾年前學習的二元一次方程，自動計算數據和柱狀圖位置，給定兩個數據點繪制矩形。

QCustomPlot類做的非常好，作者將曲線圖和柱狀圖和其他幾種形狀的圖，玩得神乎其神，本人直接跪了。尤其是現在的2.0版本，比以前的1.0版本更加上了一個檔次，直接將各種功能拆分成一個個小類，分層繪制，相當牛逼，比如要做個游標，直接繼承QCPLayerable類，然后在void draw(QCPPainter *painter);中繪制自己的東西即可，QCustomPlot提供了一個非常完美的鼠標拉動縮放的二維坐標系，還有對應的坐標與屏幕坐標轉換的函數，繼承自QCPItemRect這個東東，可以任意繪制任意圖形，包括圓形矩形各種，本人有個大膽的想法就是，直接將那145個控件大全控件在QCustomPlot中繪制一遍，都是完全可行的，這樣的話還支持滾輪任意縮放呢。

二、電子看板介紹

電子看板是目視化管理的一種表現形式，即對數據的狀況一目了然地表現，主要是對于管理項目，它通過利用形象直觀而又色彩適宜的各種視覺感知信息來組織現場生產活動，目視管理依據人類的生理特征，在生產現場充分利用信號燈、標識牌、符號顏色等方式來發出視覺信號，鮮明準確地刺激人的神經末梢，快速地傳遞信息，形象直觀地將潛在的問題和浪費現象都顯現出來。以便任何人都可以及時掌握管理現狀和必要的情報，從而能夠快速制定并實施應對措施。因此，管理看板是發現問題、解決問題的非常有效且直觀的手段，是優秀的現場管理必不可少的工具之一。

三、功能特點

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、配置文件說明

（1）、基本配置參數

字段描述默認值

WorkMode	工作模式 timer-模擬數據 db-數據庫采集 tcp-網絡采集 http-post請求	db
MapStyle	中間地圖樣式 image-靜態圖片 point-閃爍點 move-遷徙圖	point
Title	軟件標題，顯示在軟件中間頂部	數字化工廠信息中心
Ratio	分辨率，目前無意義	4096*216
Layout	布局方案，每次切換布局方案以后都會保存	完整布局
Theme	配色方案，每次切換配色方案以后都會保存	紫色風格
VideoAddr	視頻流地址，視頻模塊播放的視頻地址	鳳凰衛視
AutoRun	是否開機啟動	false
MoveEnable	模塊是否可以拖動，啟用以后模塊可以任意拖動	true
CutLeftBottom	底部布局左側是否切掉	true
CutRightBottom	底部布局右側是否切掉	true
StaticLine	是否繪制靜態定位線，為假則繪制游標十字線	true
ShowPercent	Y軸是否顯示百分比	true
StepY	Y軸大尺度步長	6
CursorHideTime	用戶不操作鼠標自動隱藏鼠標的時間間隔，單位秒	5

（2）、顏色配置參數

字段描述默認值

ColorMainBg	主背景顏色	QColor(4, 7, 38)
ColorPanelBg	面板背景顏色	QColor(26, 29, 60)
ColorLine	十字線定位線顏色	QColor(255, 0, 0)
ColorLine1	線條1顏色	QColor(0, 176, 180)
ColorLine2	線條2顏色	QColor(32, 159, 223)
ColorLine3	線條3顏色	QColor(255, 192, 0)
ColorTitleBg	標題欄背景顏色	QColor(48, 48, 85)
ColorTitleText	標題欄文字顏色	QColor(255, 255, 255)
ColorChartBg	曲線圖表背景顏色	QColor(38, 41, 74)
ColorChartText	曲線圖表文字顏色	QColor(250, 250, 250)
ColorChartGrid	曲線圖表網格顏色	QColor(180, 180, 180)
ColorOk	正常顏色	QColor(0, 176, 180)
ColorLow	警戒顏色	QColor(255, 192, 0)
ColorAlarm	報警顏色	QColor(214, 77, 84)
ColorDisable	禁用背景顏色	QColor(210, 210, 210)
ColorPercent	環形百分比背景顏色	QColor(0, 254, 254)

（3）、字體和尺寸配置參數

字段描述默認值

MainFont	全局字號	微軟雅黑，12
NameFont	軟件名稱字號	19
LabFont	加粗標簽字號	12
DeviceFont	設備面板字號	12
SubTitleFont	模塊子標題欄字號	13
TitleFont	模塊標題欄字號	15
TitleHeight	模塊標題欄高度	23
HeadHeight	表格表頭高度	28
RowHeight	表格行高度	25

（4）、采集速度配置參數

字段描述默認值

IntervalModule1	模塊1采集間隔	5000
IntervalModule2	模塊2采集間隔	5000
IntervalModule3	模塊3采集間隔	5000
IntervalModule4	模塊4采集間隔	5000
IntervalModule5	模塊5采集間隔	5000
IntervalModule6	模塊6采集間隔	5000
IntervalModule7	模塊7采集間隔	5000
IntervalModule8	模塊8采集間隔	5000

（5）、本地數據庫配置參數

字段描述默認值

LocalDBType	本地數據庫類型，Sqlite、Mysql等	Mysql
LocalDBIP	本地數據庫主機地址	127.0.0.1
LocalDBPort	本地數據庫端口	3306
LocalDBName	本地數據庫名稱	bigscreen
LocalUserName	本地數據庫用戶名	root
LocalUserPwd	本地數據庫密碼	root

五、特別說明

可執行文件同級文件夾有layout+layout_1440+layout_1920，程序默認自動識別分辨率并加載對應的布局文件夾，比如1920分辨率則從layout_1920文件夾加載布局，并作為整體布局文件夾。

程序默認是模擬數據，如果需要從數據庫采集則修改配置文件WorkMode=db即可。

如果發現布局拖動亂了，可以直接鼠標右鍵選擇恢復布局即可，在保存布局以前。

在中間地圖模塊鼠標右鍵可以彈出菜單，切換布局和配色方案等。

在模塊的標題欄上右鍵可以彈出默認的dock菜單，用來顯示和隱藏各模塊。

軟件關閉過程中會自動保存布局，下次啟動以后自動應用。

如果使用的默認的默認的配色方案比如紫色風格，則配置文件中的顏色全部無效，會自動應用代碼中的顏色，如果需要啟用自定義的顏色，則將配置文件的 Theme=\x81ea\x5b9a\x4e49\x98ce\x683c 即可。此時打開軟件會應用配置文件中的顏色。

右鍵菜單可以截圖保存，默認命名為 配色方案名稱_布局方案名稱.png 保存在snap目錄下。

如果是XP系統請先執行fixff.cmd，用來修復ffmpeg在XP上不可用的BUG。

在二級窗體的標題欄上右鍵彈出模塊菜單，可以對單個模塊打開關閉，其他地方右鍵全局菜單。

可執行文件下載地址：https://pan.baidu.com/s/1o97IGvZgTgDhlkuXQa4B0w 提取碼：r2bv。

會不定期更新程序，歡迎各位提出批評和建議。

六、效果圖

七、核心代碼

void CustomPlot::mouseMove(QMouseEvent *event) {if (tracer == 0 || textTip == 0) {return;}//跟蹤鼠標點擊事件點擊位置QCPGraph *graph = (QCPGraph *)customPlot->plottableAt(event->pos(), true);QRect rect(0, 0, 1, 1);QString labx, laby;int offset = 10;bool toolTip = false;if(graph != 0) {double posKey;double key = 0, value = 0;QPoint p;p.setX(event->pos().x());p.setY(event->pos().y());#ifdef oldforeach(QCPData data, graph->data()->values()) {key = data.key;value = data.value; #elsefor (int i = 0; i < graph->dataCount(); i++) {key = graph->dataMainKey(i);value = graph->dataMainValue(i); #endif//取出對應key處的label標簽,如果標簽為空則取key的字符串labx = customPlot->xAxis->tickVectorLabels().at(key);labx = labx.isEmpty() ? QString::number(key) : labx;//如果啟用了百分比則需要后面顯示百分比if (this->getPercentY()) {laby = QString("%1%").arg(value);} else {laby = QString("%1").arg(value);}posKey = customPlot->xAxis->coordToPixel(key);if(qAbs(posKey - event->pos().x()) <= offset) {double posx = graph->keyAxis()->coordToPixel(key);double posy = graph->valueAxis()->coordToPixel(value);rect.setRect(posx - offset, posy - offset, offset * 2, offset * 2);if(!rect.contains(event->pos())) {continue;} else {break;}}if(posKey - event->pos().x() > offset) {break;}}if(!graph->realVisibility()) {toolTip = false;tracer->setVisible(false);customPlot->replot();} else if(rect.contains(event->pos())) {toolTip = true;tracer->setVisible(true);tracer->setGraph(graph);tracer->setGraphKey(key);customPlot->replot();} else if(tracer->visible()) {toolTip = false;tracer->setVisible(false);customPlot->replot();}}else if(tracer->visible()) {toolTip = false;tracer->setVisible(false);customPlot->replot();}//處理提示信息if(toolTip) {//根據設定的提示信息位置調整double x = event->pos().x();double y = event->pos().y();if (toolTipPosition == 0) {//判斷曲線控件的位置已經當前鼠標位置做出調整bool right = (customPlot->width() - x < 90);bool bottom = (customPlot->height() - y < 50);if (right) {if (bottom) {x = x - 80;y = y - 50;} else {x = x - 80;y = y - 20;}} else {if (bottom) {x = x + 10;y = y - 50;} else {x = x + 10;y = y - 20;}}} else if (toolTipPosition == 1) {x = x - 30;y = y - 50;} else if (toolTipPosition == 2) {x = x + 10;y = y - 50;} else if (toolTipPosition == 3) {x = x + 10;y = y - 20;} else if (toolTipPosition == 4) {x = x + 10;y = y + 10;} else if (toolTipPosition == 5) {x = x - 30;y = y + 10;} else if (toolTipPosition == 6) {x = x - 75;y = y + 10;} else if (toolTipPosition == 7) {x = x - 80;y = y - 20;} else if (toolTipPosition == 8) {x = x - 80;y = y - 50;}QString text = "橫坐標: " + labx + "\n當前值: " + laby;textTip->position->setCoords(x, y);textTip->setText(text);textTip->setVisible(true);customPlot->replot();} else {if (textTip->visible()) {textTip->setVisible(false);customPlot->replot();}} }

總結

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

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