一、前言
數據轉曲線,這個用的非常多,比如串口或者網絡收到的數據,對特定的字節數據繪製實時的曲線,或者對歷史記錄存儲的數據進行曲線繪製,按照約定的規則,數據轉曲線繪製必須提供規則,沒有規則只能對所有數據繪製,那樣的話肯定很難看,一般下位機傳過來的數據都是有楨頭幀尾校驗碼的,需要剔除無關的數據,一般需要指定哪個字節或者哪幾個字節屬於需要繪製曲線的數據,如果是多個數據,可能還需要合併,比如2個字節合併成一個無符號ushort數據,4個字節合併成一個uint數據,合併轉換的規則還有高低字節位置的區分,有些是高字節在前面,有些是高字節在後面,都必須在規約中體現出來,否則很可能繪製出來的曲線不正確。
開源的QCustomPlot曲線圖表控件,支持的數據量還是挺大的,能到百萬級別,十幾萬幾十萬的數據一次性繪製,都還可以,繪製這塊已經優化到了極致,主要的速度佔用應該是計算,繪製倒都是很快的,數據量很大的情況下一般不建議頻繁的繪製,會把UI卡主,任何開發工具和語言,UI都是在主線程,所以繪製這塊一旦太頻繁很可能導致卡主,如果數據量確實很多可以把運算這塊移到其他線程,運算好以後再一次性繪製。對於大數據量的繪製,還有個算法就是過濾掉取平均值數據,因爲一個像素上繪製幾十上百個數據點是沒有意義的,都擠在一塊,人眼觀看都是一個問題,所以不如用算法將這些數據點經過一個規則運算合併成一個點數據,可以非常大的減少數據量,等到縮放的時候再自動還原之前的數據。
二、功能特點
- 採用分層設計,整體總共分三級界面,一級界面是整體佈局,二級界面是單個功能模塊,三級界面是單個控件。
- 子控件包括餅圖、圓環圖、曲線圖、柱狀圖、柱狀分組圖、橫向柱狀圖、橫向柱狀分組圖、合格率控件、百分比控件、進度控件、設備狀態面板、表格數據、地圖控件、視頻控件等。
- 二級界面可以自由拖動懸浮,支持最小化隱藏、最大化關閉、響應雙擊自定義標題欄。
- 數據源支持模擬數據(默認)、數據庫採集、串口通信(需定製)、網絡通信(需定製)、網絡請求等,可自由設定每個子界面的採集間隔即數據刷新頻率。
- 採用純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 "frmplotdata.h"
#include "ui_frmplotdata.h"
#include "quihelper.h"
frmPlotData::frmPlotData(QWidget *parent) : QWidget(parent), ui(new Ui::frmPlotData)
{
ui->setupUi(this);
this->initForm();
this->loadPlot();
}
frmPlotData::~frmPlotData()
{
delete ui;
}
void frmPlotData::initForm()
{
//添加畫布
ui->customPlot->addGraph(1);
//設置拖動縮放模式
ui->customPlot->setInteractions(3);
//設置邊距
ui->customPlot->setPadding(15);
//設置數據點的大小
ui->customPlot->setPointSize(0);
//設置文本顏色
ui->customPlot->setTextColor(Qt::white);
//設置XY軸範圍值
ui->customPlot->setRangeX(0, 1000, 15);
ui->customPlot->setRangeY(0, 1000, 15);
//綁定雙擊重新加載數據
connect(ui->customPlot->getPlot(), SIGNAL(mouseDoubleClick(QMouseEvent *)), this, SLOT(loadPlot()));
}
void frmPlotData::loadPlot()
{
//從文本文件讀取數據 具體格式可以自行打開文件查看
QString fileName = QString(":/image/data%1.txt").arg(rand() % 3);
QFile file(fileName);
if (file.open(QFile::ReadOnly | QIODevice::Text)) {
QString value = file.readAll();
file.close();
vdouble keys, values;
QStringList list = value.split(" ");
int len = list.length();
//如果不是2的倍數則長度要減去1
if (len % 2 != 0) {
len = (len - 1);
}
for (int i = 0; i < len / 2; i++) {
keys.append(i);
}
//每兩個16進制數字組合成一個數字
for (int i = 0; i < len; i = i + 2) {
qint16 value = CustomPlotHelper::strHexToShort(QString("%1%2").arg(list.at(i)).arg(list.at(i + 1)));
values.append(value);
}
LineData data;
data.index = 0;
data.name = "角度值";
data.key = keys;
data.value = values;
//設置線條顏色,可以指定顏色也可以隨機顏色
data.lineColor = CustomPlotHelper::getRandColor();
data.scatterShape = 0;
data.fillColor = 1;
data.autoScale = true;
ui->customPlot->setDataLine(data);
ui->customPlot->replot();
}
}