Qt編寫視覺化大屏電子看板系統17-柱狀堆積圖

一、前言

柱狀堆積圖也叫堆積柱狀圖、堆積柱形圖、堆疊圖，有點類似跳動的音符，一個柱子上有多根柱子層疊，層疊之間可以設定間隔，這個其實和柱狀分組圖的功能類似，只不過把這個分組放到了柱子上面層疊，一般柱子的數量有要求，不建議很多個，不然看起來眼花繚亂，失去了原本的效果。著名的excel軟體也都內建了這些處理，也許他就是這個資料展示效果的鼻祖，提供了各式各樣的資料柱狀圖展示，這玩意算下來好像居然有幾十年的歷史了，通過各種使用者現場需求演化而來，才使得用途這麼廣泛。

開源的QCustomPlot預設就自帶了堆積圖設定，核心就是在柱狀圖的基礎上，採用moveAbove方法直接將一個柱子移到另外一個柱子上，這個設計非常巧妙，也非常人性化，想要哪個柱子移到誰上面就直接呼叫此方法調整層疊順序就行，堆積圖如果要顯示對應的值則一般建議顯示在中間，顯示在頂部的話就沒有標準了，設定顯示值的位置大致有四種，0-不繪製、1-頂部上面、2-頂部居中、3-中間居中、4-底部居中，頂部上面是指以柱狀圖頂部邊框為底邊作為繪製參照標準，頂部居中是指以柱狀圖頂部邊框為頂邊作為繪製參照標準，一個是從這個位置開始計算，一個是不能超過這個位置緊挨著開始計算，因為有些場合剛好柱子已經到曲線控制元件的最上面了，還要在上面繪製文字的話已經看不見了，所以需要以頂邊作為緊挨著的參照區域進行繪製。

二、功能特點

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/

四、效果圖

五、核心程式碼

void CustomPlot::setDataBars(const BarData &data)
{
    //過濾個數不一致資料,防止索引越界
    int rowCount = data.rowNames.count();
    int columnCount = data.columnNames.count();
    int valueCount = data.values.count();
    if (columnCount == 0 || valueCount == 0 || columnCount != valueCount) {
        return;
    }

    //設定網格線不顯示,會更好看
    customPlot->xAxis->grid()->setVisible(false);
    //customPlot->yAxis->grid()->setVisible(false);

    //先清空原有柱狀圖
    bars.clear();

    //設定橫座標文字描述
    vdouble ticks;
    vstring labels;
    for (int i = 0; i < rowCount; i++) {
        ticks << i + 1;
        labels << data.rowNames.at(i);
    }

    setLabX(ticks, labels);
    customPlot->xAxis->setRange(0, rowCount + 1);

    for (int i = 0; i < columnCount; i++) {
        //同樣也要先過濾個數是否符合要求
        vdouble value = data.values.at(i);
        if (rowCount != value.count()) {
            continue;
        }

        //建立柱狀堆積圖
        CustomPlotBarv *bar = new CustomPlotBarv(customPlot->xAxis, customPlot->yAxis);
        bar->setCheckData(data.checkData);

        //設定寬度比例
        bar->setWidth(0.6);

        //設定顯示值的位置 0-不繪製 1-頂部上面 2-頂部居中 3-中間居中 4-底部居中
        bar->setValuePostion(data.valuePosition);
        bar->setValuePrecision(data.valuePrecision);
        bar->setValueColor(data.valueColor);

#ifndef qcustomplot_v1
        //設定堆積間隙
        if (data.borderColor != Qt::transparent) {
            bar->setStackingGap(1);
        }
#endif
        //設定名稱
        bar->setName(data.columnNames.at(i));

        //設定顏色,取顏色集合
        QColor color = QColor(51, 204, 255);

        //如果設定了不同的顏色則設定顏色集合
        if (data.differentColor) {
            bar->setBarColors(colors);
        } else {
            if (i < colors.count()) {
                color = colors.at(i);
            }
        }

        //邊緣高亮,如果傳入了邊框顏色則取邊框顏色
        if (columnCount > 1 && data.borderColor == Qt::transparent) {
            bar->setPen(Qt::NoPen);
        } else {
            bar->setPen(QPen(data.borderColor == Qt::transparent ? color.lighter(150) : data.borderColor));
        }

        bar->setBrush(color);

        //設定堆積層疊順序,後面那個移到前一個上面
        bars << bar;
        if (i > 0) {
            bar->moveAbove(bars.at(i - 1));
        }

        //設定資料
        bar->setData(ticks, value);
    }
}