Qt編寫視覺化大屏電子看板系統16-標準柱狀圖

語言: CN / TW / HK

一、前言

標準柱狀圖是大屏系統中最常用的一種展示資料效果圖,提供不同的柱子顯示資料值,在QCustomPlot的基礎上拓展了頂部顯示對應的值,不同的柱子不同的顏色,同時還可以呼叫內建的觸發報警顏色的機制,比如超過90%就自動紅色顯示,這樣使用者使用的時候只要傳入值就行,預設的機制一般是三種顏色,正常顏色、警告顏色、報警顏色,三種顏色都對應觸發值,超過對應的值就顯示對應的顏色。一般的規則都是大於設定的警戒值就觸發,其實真實世界是簡單的也是複雜的,還有不少的場景是低於一定的值才報警,倒過來的規則,可能會有三種規則,規則1大於報警值報警(大部分的規則都是這個),規則2小於報警值報警(比如氣體濃度),規則3在範圍值內則報警。

在柱狀圖上面顯示對應的值這個需求非常多,不清楚為何很多曲線圖控制元件不預設就支援這個特性,而是需要額外的寫程式碼繪製處理,比如Qt界著名的曲線圖三劍客QCustomPlot、Qwt、QChart都預設沒有這個效果,好在開源的世界是豐富多彩的,這三劍客本身都是開源的,原始碼量也不是很多,稍微花點時間看看學習下也是不錯的選擇,而且柱狀圖上顯示對應的值的處理和程式碼網上也是一大堆,面向百度和搜尋程式設計相信是眾多程式設計師的選擇和喜愛。

開源庫QCustomPlot有多個版本,基本上可以歸納為v1和v2,在部分程式碼處理上有區別,所以為了支援v1和v2兩個版本,在做二次開發的時候都做了相容,其實必須性不大,畢竟v2也從Qt4.6支援到了Qt6,蠻好的,做支援的時候純粹為了鍛鍊技術,看下兩者到底區別在哪,處理方式有何區別,還有個稍微微小的考慮就是可能有些使用者還在用v1為了相容這批使用者,省得換成v2整個專案曲線的地方改動不小。

二、功能特點

  1. 採用分層設計,整體總共分三級介面,一級介面是整體佈局,二級介面是單個功能模組,三級介面是單個控制元件。
  2. 子控制元件包括餅圖、圓環圖、曲線圖、柱狀圖、柱狀分組圖、橫向柱狀圖、橫向柱狀分組圖、合格率控制元件、百分比控制元件、進度控制元件、裝置狀態面板、表格資料、地圖控制元件、視訊控制元件等。
  3. 二級介面可以自由拖動懸浮,支援最小化隱藏、最大化關閉、響應雙擊自定義標題欄。
  4. 資料來源支援模擬資料(預設)、資料庫採集、串列埠通訊(需定製)、網路通訊(需定製)、網路請求等,可自由設定每個子介面的採集間隔即資料重新整理頻率。
  5. 採用純QWidget編寫,親測Qt4.6到Qt6.2任意版本,理論上支援後續其他Qt版本。
  6. 超強跨平臺,親測windows、linux、mac、國產uos、國產銀河麒麟kylin等系統,效果完美,同時還支援嵌入式linux比如樹莓派、香橙派、全志、imx6等。
  7. 同時集成了自定義控制元件、qchart餅圖、echart地圖等功能。
  8. 內建多套配色風格樣式(紫色、藍色、深藍、黑色),預設紫色,自適應任意解析度。
  9. 可設定系統標題、目標解析度、佈局方案,啟動立即應用。
  10. 可設定主背景顏色、面板顏色、十字線遊標顏色等各種顏色。
  11. 可設定多條曲線不同顏色,沒有設定顏色的情況下內建多套精美顏色隨機應用。
  12. 可設定標題欄背景顏色、文字顏色。
  13. 可設定曲線圖表背景顏色、文字顏色、網格顏色。
  14. 可設定正常顏色、警戒顏色、報警顏色、禁用顏色、百分比進度顏色。
  15. 可分別設定各種字型大小,比如全域性字型、軟體名稱、標題欄、子標題欄、加粗標籤等。
  16. 可設定標題欄高度、表頭高度、行高度。
  17. 曲線支援遊標、定位線、懸停高亮資料點、懸停顯示值。
  18. 柱狀圖支援頂部(可設定頂端、上部、中間、底部)顯示資料,全部自適應計算位置。
  19. 支援平滑曲線,內建多種平滑曲線演算法,還支援面積圖平滑。
  20. 面積圖填充顏色可選多種規則比如單色透明度填充、透明度漸變填充等。
  21. 資料庫支援sqlite、mysql、postgresql、oracle、國產人大金倉等資料庫。
  22. 主介面直接滑鼠右鍵切換佈局、配色方案、關閉開啟某個二級窗體。
  23. 自動記憶所有子視窗的大小和位置,下次啟動立即應用。
  24. 動態載入佈局方案選單,可以動態新建佈局、恢復佈局、儲存佈局、另存佈局等,使用者可以製造任意佈局。
  25. 二級窗體,雙擊從主窗體分離出來浮動,可以自由調整大小。再次雙擊標題欄最大化,再次雙擊還原。
  26. 子模組也可以全屏顯示作為一個大屏,這樣就可以一個大屏拓展出多個子大屏,放大檢視子模組的資料詳情,適用多屏展示。
  27. 每個模組都可以自定義採集速度,如果是資料庫採集會自動排隊處理,後期還可以拓展每個子模組都獨立的資料庫採集。
  28. 提供系統設定模組進行整體的配置引數設定,效果立即應用。
  29. 提供精美炫酷的大屏地圖模組,包括靜態圖片、閃爍效果、遷徙效果、世界地圖、區域地圖等,可指定點的經緯度座標,識別單擊響應,可以做地圖跳轉等,每個點都可以不同的顏色和提示資訊。
  30. 除了提供大屏系統外,還將每個模組都做了獨立的模組示例介面,每個模組都可以獨立學習使用,裡面用到的控制元件也單獨做了控制元件示例介面,方便學習每個控制元件如何使用。
  31. 非常詳細的開發和使用手冊,其中包括資料庫說明、模組對照圖、控制元件對照圖、專案結構、程式碼說明(精確到每個類)、演示demo、使用方法等。

三、體驗地址

  1. 體驗地址:https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取碼:01jf 檔名:bin_bigscreen.zip。
  2. 國內站點:https://gitee.com/feiyangqingyun
  3. 國際站點:https://github.com/feiyangqingyun
  4. 個人主頁:https://blog.csdn.net/feiyangqingyun
  5. 知乎主頁:https://www.zhihu.com/people/feiyangqingyun/
  6. 線上文件:https://feiyangqingyun.gitee.io/qwidgetdemo/bigscreen/

四、效果圖

五、核心程式碼

#include "customplotbarv.h"

CustomPlotBarv::CustomPlotBarv(QCPAxis *keyAxis, QCPAxis *valueAxis) : QCPBars(keyAxis, valueAxis)
{
    valuePosition = 1;
    valuePrecision = 0;
    valueColor = Qt::white;
    checkData = false;
}

void CustomPlotBarv::draw(QCPPainter *painter)
{
    //必須先繼續繪製父類,不然父類的所有東西沒有繪製
    //順序不能反,先繪製完父類再繪製自定義的資料,不然會覆蓋
    QCPBars::draw(painter);

    //迭代拿到每個區域的座標和寬高
    int index = -1;
#ifdef qcustomplot_v1
    QCPBarDataMap::const_iterator visibleBegin, visibleEnd;
    getVisibleDataBounds(visibleBegin, visibleEnd);
    for (QCPBarDataMap::const_iterator it = visibleBegin; it != visibleEnd; ++it) {
#else
    QCPBarsDataContainer::const_iterator visibleBegin, visibleEnd;
    getVisibleDataBounds(visibleBegin, visibleEnd);
    for (QCPBarsDataContainer::const_iterator it = visibleBegin; it != visibleEnd; ++it) {
#endif
        //獲取柱狀圖區域
#ifdef qcustomplot_v1
        QPolygonF barPolygon = getBarPolygon(it.key(), it.value().value);
        QRectF rect;
        int x1 = barPolygon.at(1).x();
        int y1 = barPolygon.at(1).y();
        int x2 = barPolygon.at(3).x();
        int y2 = barPolygon.at(3).y();
        rect.setX(x1);
        rect.setY(y1);
        rect.setWidth(x2 - x1);
        rect.setHeight(y2 - y1);
#else
        QRectF rect = getBarRect(it->key, it->value);
#endif

        //先處理校驗資料
        index++;
        if (checkData) {
            if (it->value >= 80) {
                setBrush(QColor(0, 176, 180));
            } else if (it->value >= 60) {
                setBrush(QColor(255, 192, 0));
            } else {
                setBrush(QColor(214, 77, 84));
            }
        } else {
            //如果存在顏色集合則取顏色集合
            if (index < barColors.count()) {
                setBrush(barColors.at(index));
            }
        }

        //設定畫筆和畫刷,繪製矩形區域形成柱狀圖
        if (this->pen() != Qt::NoPen) {
            painter->setPen(this->pen().color());
        }

        painter->setBrush(this->brush());
        painter->drawRect(rect);

        //設定文字的顏色,還可以設定字型
        painter->setPen(valueColor);

        //這裡可以設定小數點精確度
        QString strValue = QString::number(it->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
        int textHeight = fm.ascent() + fm.descent();

        //如果矩形寬度小於文字寬度則不繪製
        if (rect.width() < textWidth) {
            continue;
        }

        //如果不在頂部,矩形高度小於文字高度則不繪製
        if (valuePosition > 1) {
            if (rect.height() < textHeight) {
                continue;
            }
        }

        //0-不繪製 1-頂部上面 2-頂部居中 3-中間居中 4-底部居中
        //設定區域一點點偏差,看起來不那麼擁擠
        int offset = 3;
        if (valuePosition == 1) {
            rect.setY(rect.y() - textHeight - offset);
            painter->drawText(rect, Qt::AlignTop | Qt::AlignHCenter, strValue);
        } else if (valuePosition == 2) {
            rect.setY(rect.y() + offset);
            painter->drawText(rect, Qt::AlignTop | Qt::AlignHCenter, strValue);
        } else if (valuePosition == 3) {
            painter->drawText(rect, Qt::AlignVCenter | Qt::AlignHCenter, strValue);
        } else if (valuePosition == 4) {
            rect.setHeight(rect.height() - offset);
            painter->drawText(rect, Qt::AlignBottom | Qt::AlignHCenter, strValue);
        }
    }
}

int CustomPlotBarv::getValuePosition() const
{
    return this->valuePosition;
}

int CustomPlotBarv::getValuePrecision() const
{
    return this->valuePrecision;
}

QColor CustomPlotBarv::getValueColor() const
{
    return this->valueColor;
}

bool CustomPlotBarv::getCheckData() const
{
    return this->checkData;
}

void CustomPlotBarv::setValuePostion(int valuePosition)
{
    if (this->valuePosition != valuePosition) {
        this->valuePosition = valuePosition;
    }
}

void CustomPlotBarv::setValuePrecision(int valuePrecision)
{
    if (this->valuePrecision != valuePrecision) {
        this->valuePrecision = valuePrecision;
    }
}

void CustomPlotBarv::setValueColor(const QColor &valueColor)
{
    if (this->valueColor != valueColor) {
        this->valueColor = valueColor;
    }
}

void CustomPlotBarv::setCheckData(bool checkData)
{
    if (this->checkData != checkData) {
        this->checkData = checkData;
    }
}

void CustomPlotBarv::setBarColors(const lcolor &barColors)
{
    this->barColors = barColors;
}