一、前言

近期將可視化大屏電子看板系統(tǒng)重新規(guī)劃和調(diào)整項(xiàng)目結(jié)構(gòu)代碼，幾個(gè)重大改變是新增啟動(dòng)窗體選擇，可選大屏系統(tǒng)、控件演示、模塊演示三種，其中控件演示是專門針對(duì)本系統(tǒng)中用到的各種自定義控件單獨(dú)做的使用demo，模塊演示是專門針對(duì)本系統(tǒng)中每個(gè)子模塊單獨(dú)演示，這樣可以更方便的切換學(xué)習(xí)，而不是盲目的在項(xiàng)目代碼中找，可以直接快速切換定位到具體的代碼文件學(xué)習(xí)。

大屏系統(tǒng)中用到的曲線圖柱狀圖都是在開源的QCustomPlot曲線圖表控件基礎(chǔ)上二次開發(fā)改造的，最基礎(chǔ)的曲線展示莫過于標(biāo)準(zhǔn)曲線圖了，QCustomPlot官方一直在更新升級(jí)代碼，本人也是一直看著QCustomPlot長(zhǎng)大的，代碼質(zhì)量真的沒的說，后期的代碼更加完美，尤其是增加了更多的模塊接口，比如曲線提示標(biāo)識(shí)可以指定列，XY軸可以互換，這樣就可以很方便的垂直的效果轉(zhuǎn)成平行的效果尤其是柱狀圖。

在大屏系統(tǒng)中需要展示的曲線會(huì)有多條，都要求不同的曲線不同的顏色區(qū)分顯示，數(shù)據(jù)都是通過數(shù)據(jù)源采集好以后的靜態(tài)數(shù)據(jù)，每次都是整體重新設(shè)置數(shù)據(jù)，其實(shí)在這種數(shù)據(jù)量很小的情況下，重新繪制和追加數(shù)據(jù)繪制效率沒區(qū)別，都是需要重新繪制整個(gè)畫布。默認(rèn)XY軸都是浮點(diǎn)數(shù)顯示，可以通過label映射換成對(duì)應(yīng)的文本值顯示，本系統(tǒng)中全部是換成了文本型數(shù)值顯示，更靈活，比如對(duì)應(yīng)坐標(biāo)點(diǎn)X軸1/2/3換成1月、2月、3月這種文字顯示，Y軸的數(shù)據(jù)還可以后面加上百分比符號(hào)等。

二、功能特點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、體驗(yàn)地址

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

國(guó)內(nèi)站點(diǎn)：https://gitee.com/feiyangqingyun

國(guó)際站點(diǎn)：https://github.com/feiyangqingyun

個(gè)人主頁：https://blog.csdn.net/feiyangqingyun

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

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

四、效果圖

五、核心代碼

#include "frmplotnormal.h" #include "ui_frmplotnormal.h" #include "head.h"frmPlotNormal::frmPlotNormal(QWidget *parent) : QWidget(parent), ui(new Ui::frmPlotNormal) {ui->setupUi(this);this->initForm();this->loadPlot(); }frmPlotNormal::~frmPlotNormal() {delete ui; }void frmPlotNormal::initForm() {//設(shè)置線條名稱,如果要增加線條 只需要這里增加線條名字就行l(wèi)ineNames << "新模" << "修模" << "設(shè)變" << "測(cè)試" << "哈哈";//隱藏表格線//ui->customPlot->getPlot()->xAxis->grid()->setVisible(false);//ui->customPlot->getPlot()->yAxis->grid()->setVisible(false);//添加畫布ui->customPlot->addGraph(lineNames.count());//設(shè)置畫布邊距ui->customPlot->setPadding(9); //設(shè)置可拖動(dòng)鼠標(biāo)滾輪縮放ui->customPlot->setInteractions(3);//設(shè)置圖例可見ui->customPlot->setLegend(true, 0, lineNames.count());//綁定雙擊重新加載數(shù)據(jù)connect(ui->customPlot->getPlot(), SIGNAL(mouseDoubleClick(QMouseEvent *)), this, SLOT(loadPlot())); }void frmPlotNormal::loadPlot() {vstring lab;vdouble key;lvdouble values;for (int j = 0; j < lineNames.count(); ++j) {values << vdouble();}int count = lineNames.count();int dataCount = 12;for (int i = 0; i < dataCount; i++) {lab << QString("%1月").arg(i + 1);key << i;//挨個(gè)對(duì)每條線段的數(shù)據(jù)賦值for (int j = 0; j < count; ++j) {values[j] << CustomPlotHelper::getRandValue(10, 100);}}//如果需要設(shè)置掃點(diǎn)圖則設(shè)置onlydot屬性即可//ui->customPlot->setOnlyDot(true);LineData data;data.key = key;for (int i = 0; i < count; ++i) {data.index = i;data.name = lineNames.at(i);data.value = values.at(i);//設(shè)置線條顏色,可以指定顏色也可以隨機(jī)顏色data.lineColor = ui->customPlot->getColors().at(i);ui->customPlot->setDataLine(data);}//設(shè)置坐標(biāo)軸范圍值+X坐標(biāo)對(duì)應(yīng)顯示文字ui->customPlot->setLabX(key, lab);ui->customPlot->setRangeX(-0.5, key.count() - 0.5);ui->customPlot->setRangeY(0, 120, 10);//初始化指示器數(shù)據(jù)高亮及懸停提示等ui->customPlot->initItem();//重新刷新顯示ui->customPlot->replot(); }

總結(jié)

以上是生活随笔為你收集整理的Qt编写可视化大屏电子看板系统14-标准曲线图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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