Qt編寫視覺化大屏電子看板系統18-柱狀分組圖

語言: CN / TW / HK

時間 2021-08-24 09:01:37 飛揚青雲

主題: painter pen gitee bigscreen qcustomplot

一、前言

柱狀分組圖是柱狀堆積圖的衍生或者另外一種展示效果，設定的資料值資料來源集合完全一樣，只不過就是把柱子給拿下來了放在旁邊，然後一個分組多個柱子橫向排列，不同分組之間有一定的空隙隔開，預設QCustomPlot是不提供分組圖的，怎麼辦呢，於是搞了一個很巧妙的演算法，在標註柱狀圖的基礎上，通過不同分組設定不同的x座標也就是key值來形成分組的效果，key相隔的差值越大則距離越大，同一分組之間的柱子是緊挨著的沒有差值，只有不同分組的第一個柱子需要有差值，於是搞了一個小小的計算公式來計算這個差值。

沒有內建分組圖的功能也不能怪QCustomPlot，畢竟他核心處理是曲線圖，在曲線圖展示處理這塊牛逼的沒得話說，這是他的核心，拋開這個核心再三心二意搞點周邊的功能，搞得好還好說，搞不好就一堆罵，其實這正是我想強調的一點，做軟體開發這點尤為重要，千萬不能三心二意東搞搞西搞搞，一定要先把核心的功能處理好穩定好，再慢慢拓展周邊的功能，如果是上級領導要求遍地開花的搞一下這個有搞一下那個，大可以頂回去，讓他自己寫程式碼去。

二、功能特點

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

三、體驗地址

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

四、效果圖

五、核心程式碼

#include "customplottracer.h"

CustomPlotTracer::CustomPlotTracer(QCustomPlot *parentPlot) : QCPLayerable(parentPlot)
{
    showLineh = false;
    showLinev = false;
    lineWidth = 3;
    lineColor = QColor(255, 0, 0);

    movePos = QPoint(100, 50);
    customPlot = parentPlot;

    connect(parentPlot, SIGNAL(mouseMove(QMouseEvent *)), this, SLOT(mouseMove(QMouseEvent *)));
}

void CustomPlotTracer::applyDefaultAntialiasingHint(QCPPainter *painter) const
{
    Q_UNUSED(painter);
}

void CustomPlotTracer::draw(QCPPainter *painter)
{
    QPen pen;
    pen.setWidth(lineWidth);
    pen.setColor(lineColor);
    painter->setPen(pen);

    if (showLinev) {
        painter->drawLine(QPointF(x, dHeight), QPointF(x, dY));
        pen.setColor(Qt::white);
        painter->setPen(pen);
        QFontMetrics fm = painter->fontMetrics();
        QString year = QString::number(QDate::currentDate().year());
#if (QT_VERSION >= QT_VERSION_CHECK(5,11,0))
        int width = fm.horizontalAdvance(year);
#else
        int width = fm.width(year);
#endif
        painter->drawText(QPointF(x - width / 2, dHeight - 3), year);
    }

    if (showLineh) {
        pen.setColor(lineColor);
        painter->setPen(pen);
        painter->drawLine(QPointF(dX, y), QPointF(dWidth, y));
    }
}

bool CustomPlotTracer::getShowLineh() const
{
    return this->showLineh;
}

bool CustomPlotTracer::getShowLinev() const
{
    return this->showLinev;
}

int CustomPlotTracer::getLineWidth() const
{
    return this->lineWidth;
}

QColor CustomPlotTracer::getLineColor() const
{
    return this->lineColor;
}

void CustomPlotTracer::mouseMove(QMouseEvent *event)
{
    Q_UNUSED(event);
    movePos = event->pos();
    drawLine();
}

void CustomPlotTracer::setShowLineh(bool showLineh)
{
    if (this->showLineh != showLineh) {
        this->showLineh = showLineh;
        customPlot->replot();
    }
}

void CustomPlotTracer::setShowLinev(bool showLinev)
{
    if (this->showLinev != showLinev) {
        this->showLinev = showLinev;
        customPlot->replot();
    }
}

void CustomPlotTracer::setLineWidth(int lineWidth)
{
    if (this->lineWidth != lineWidth) {
        this->lineWidth = lineWidth;
        customPlot->replot();
    }
}

void CustomPlotTracer::setLineColor(const QColor &lineColor)
{
    if (this->lineColor != lineColor) {
        this->lineColor = lineColor;
        customPlot->replot();
    }
}

void CustomPlotTracer::drawLine()
{
    x = movePos.x();
    y = movePos.y();

    //取出當前XY軸的範圍值
    QCPRange rangex = customPlot->xAxis->range();
    QCPRange rangey = customPlot->yAxis->range();
    //qDebug() << rangex.lower << rangex.upper << rangey.lower << rangey.upper;

    //取出左下角座標軸原點(0,0)在整個畫布的螢幕座標位置
    dX = customPlot->xAxis->coordToPixel(rangex.lower);
    dY = customPlot->yAxis->coordToPixel(rangey.lower);
    dWidth = customPlot->xAxis->coordToPixel(rangex.upper);
    dHeight = customPlot->yAxis->coordToPixel(rangey.upper);

    //必須在曲線區域內
    if (x >= dX && x <= dWidth && y <= dY && y >= dHeight) {
        customPlot->replot();
    }
}

「其他文章」