一、前言
橫向柱狀圖的繪製這玩意當初還着實花費了一些時間,因爲從v1版本開始,默認XY座標軸是沒有交換位置的處理的,也只有垂直的柱狀圖,要想換成橫向的柱狀圖必須是自己拿到數據重新繪製,數據值的設置一般有這幾個參數,值的區域、顯示數據值的位置(0-不繪製 1-頂部上面 2-頂部居中 3-中間居中 4-底部居中)、數據值的精確度(有時候可能是浮點數需要有小數位)、柱子的顏色(沒有校驗的時候按照設置的顏色)、是否校驗數據(開啓校驗後按照校驗的規則取對應的顏色)。
在進行二次開發的時候,最初的版本是所有功能寫在一個類中,這樣方便用戶直接引入一個文件就能使用,後面隨着功能的增多,發現一個代碼文件中放了多個類管理起來不方便,後面還是拆分成不同的文件,比如自定義柱狀圖類CustomPlotBarv、自定義平滑線類CustomPlotLine、自定義圖層類CustomPlotTracer,這樣學習起來方便,關注點是拓展性和管理學習方便,而不是文件數量少,QCustomPlot其實開發階段也是很多個類文件的,只不過發佈的時候用工具合併成了一個文件,這樣體積小。
二、功能特點
- 採用分層設計,整體總共分三級界面,一級界面是整體佈局,二級界面是單個功能模塊,三級界面是單個控件。
- 子控件包括餅圖、圓環圖、曲線圖、柱狀圖、柱狀分組圖、橫向柱狀圖、橫向柱狀分組圖、合格率控件、百分比控件、進度控件、設備狀態面板、表格數據、地圖控件、視頻控件等。
- 二級界面可以自由拖動懸浮,支持最小化隱藏、最大化關閉、響應雙擊自定義標題欄。
- 數據源支持模擬數據(默認)、數據庫採集、串口通信(需定製)、網絡通信(需定製)、網絡請求等,可自由設定每個子界面的採集間隔即數據刷新頻率。
- 採用純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 "customplotbarh.h"
CustomPlotBarh::CustomPlotBarh(QCustomPlot *parentPlot) : QCPItemRect(parentPlot)
{
value = 0;
valuePosition = 1;
valuePrecision = 0;
valueColor = Qt::white;
checkData = false;
}
void CustomPlotBarh::draw(QCPPainter *painter)
{
//獲取整個畫布區域
#ifdef qcustomplot_v1
QRectF rect = QRectF(topLeft->pixelPoint(), bottomRight->pixelPoint());
#else
QRectF rect = QRectF(topLeft->pixelPosition(), bottomRight->pixelPosition());
#endif
painter->setPen(this->pen().color());
painter->setBrush(this->brush());
painter->drawRect(rect);
//設置文本的顏色,還可以設置字體
painter->setPen(valueColor);
//這裏可以設置小數點精確度
QString strValue = QString::number(value, 'f', valuePrecision);
//計算值的寬度
QFontMetrics fm = painter->fontMetrics();
#if (QT_VERSION >= QT_VERSION_CHECK(5,11,0))
int textWidth = fm.horizontalAdvance(strValue);
#else
int textWidth = fm.width(strValue);
#endif
//0-不繪製 1-頂部上面 2-頂部居中 3-中間居中 4-底部居中
//設置區域一點點偏差,看起來不那麼擁擠
int offset = 5;
if (valuePosition == 1) {
rect.setWidth(rect.width() + textWidth + offset);
painter->drawText(rect, Qt::AlignRight | Qt::AlignVCenter, strValue);
} else if (valuePosition == 2) {
rect.setWidth(rect.width() - offset);
painter->drawText(rect, Qt::AlignRight | Qt::AlignVCenter, strValue);
} else if (valuePosition == 3) {
painter->drawText(rect, Qt::AlignHCenter | Qt::AlignVCenter, strValue);
} else if (valuePosition == 4) {
rect.setX(rect.x() + offset);
painter->drawText(rect, Qt::AlignLeft | Qt::AlignVCenter, strValue);
}
}
double CustomPlotBarh::getValue() const
{
return this->value;
}
int CustomPlotBarh::getValuePosition() const
{
return this->valuePosition;
}
int CustomPlotBarh::getValuePrecision() const
{
return this->valuePrecision;
}
QColor CustomPlotBarh::getValueColor() const
{
return this->valueColor;
}
bool CustomPlotBarh::getCheckData() const
{
return this->checkData;
}
void CustomPlotBarh::setValue(double value)
{
if (this->value != value) {
this->value = value;
}
}
void CustomPlotBarh::setValuePostion(int valuePosition)
{
if (this->valuePosition != valuePosition) {
this->valuePosition = valuePosition;
}
}
void CustomPlotBarh::setValuePrecision(int valuePrecision)
{
if (this->valuePrecision != valuePrecision) {
this->valuePrecision = valuePrecision;
}
}
void CustomPlotBarh::setValueColor(const QColor &valueColor)
{
if (this->valueColor != valueColor) {
this->valueColor = valueColor;
}
}
void CustomPlotBarh::setCheckData(bool checkData)
{
if (this->checkData != checkData) {
this->checkData = checkData;
}
}
void CustomPlotBarh::setRect(const QPointF &p1, const QPointF &p2)
{
this->topLeft->setCoords(p1.x(), p1.y());
this->bottomRight->setCoords(p2.x(), p2.y());
}