Qt編寫自定義控件25-自定義QCustomPlot

時間 2019-11-29

標籤編寫自定義控件 qcustomplot 简体版

原文原文鏈接

1、前言

上次在寫大屏數據可視化電子看板系統時候，提到過改造QCustomPlot來實現柱狀分組圖、橫向柱狀圖、橫向分組圖、鼠標懸停提示等。此次單獨列出來描述，有不少人疑問爲啥不用QChart，或者echart等形式，其實這兩種方式我都嘗試過，好比Qt5.7之後新增的QChart模塊，曲線這塊，支持數據量很小，並且用法極其不適應，很是彆扭，尤爲是10W以上數據量的支持，簡直是渣渣，優勢也是有不少的，好比動畫效果，我看過他的完整源碼，動畫這塊處理的很是好，連座標軸均可以有動畫效果，並且支持不少種效果，並且內置了不少套theme皮膚，省去了不少渣渣審美的程序員本身來配色，這個卻是挺方便的。而對於echart，必須依賴瀏覽器控件，資源佔用比較高，後面決定採用改造QCustomPlot來實現用戶須要的各類圖表效果。
在整個改造的過程當中，所有封裝成易用的函數，傳入參數便可，同時還支持全局樣式更改，支持樣式表控制總體顏色更改，考慮了不少細節，好比彈出懸停信息的位置等，都自動計算顯示在最佳最合理位置。考慮到不少人用的QCustomPlot1.0，特地還作了QCustomPlot1.0和2.0的徹底兼容。linux

2、實現的功能

1:可設置X軸Y軸範圍值
2:可設置背景顏色+文本顏色+網格顏色
3:可設置三條曲線顏色+顏色集合
4:可設置是否顯示定位十字線,可分別設置橫向和縱向
5:可設置十字線的寬度和顏色
6:可設置是否顯示數據點以及數據點的大小
7:可設置是否填充背景造成面積圖
8:可設置模式-拖動+縮放等
9:可設置座標軸間距+第二座標系可見
10:提供接口setDataLine直接設置曲線,支持多條
11:提供接口setDataBar直接設置柱狀圖,支持多條造成堆積圖
12:提供接口setLabs設置文本標籤替代key
13:提供清空+重繪接口+外部獲取QCustomPlot對象
14:提供函數start+stop來模擬正弦曲線
15:可設置柱狀圖的值的位置+精確度+顏色
16:支持鼠標移動到數據點高亮顯示數據點以及顯示數據提示信息
17:可設置提示信息位置自動處理+頂部+右上角+右側+右下角+底部+左下角+左側+左上角
18:可設置是否校驗數據產生不一樣的背景顏色,好比柱狀圖的每根柱子均可以根據數據生成不一樣背景顏色
19:可設置是否顯示圖例+圖例位置+圖例行數
20:支持多條曲線+柱狀圖+柱狀分組圖+橫向柱狀圖+橫向柱狀分組圖+柱狀堆積圖
21:內置15套精美顏色,自動取顏色集合的顏色,省去配色的煩惱
22:同時支持 QCustomPlot 1.0 和 QCustomPlot 2.0

3、效果圖

4、核心代碼

void CustomPlot::setDataLine(int index, const QString &name, const QVector<double> &key, const QVector<double> &value)
{
    if (customPlot->graphCount() > index) {
        customPlot->graph(index)->setName(name);
        customPlot->graph(index)->setData(key, value);
        customPlot->xAxis->setRange(-offsetX, key.count() + offsetX, Qt::AlignLeft);

        //超過3條線條顏色設置顏色集合的顏色
        if (index >= 3) {
            setColor(index, colors.at(index));
        } else {
            setColor(0, colors.at(0));
            setColor(1, colors.at(1));
            setColor(2, colors.at(2));
        }
    }
}

void CustomPlot::setDataBarv(const QStringList &rowNames,
                             const QStringList &columnNames,
                             const QList<QVector<double> > &values,
                             const QColor &borderColor,
                             int valuePosition,
                             int valuePrecision,
                             const QColor &valueColor,
                             bool checkData)
{
    //只有1列的才能設置
    if (columnNames.count() != 1) {
        return;
    }

    //能夠直接用堆積圖,由於只有一列的柱狀圖不會造成堆積
    setDataBars(rowNames, columnNames, values, borderColor, valuePosition, valuePrecision, valueColor, checkData);
}

void CustomPlot::setDataBarvs(const QStringList &rowNames,
                              const QStringList &columnNames,
                              const QList<QVector<double> > &values,
                              const QColor &borderColor,
                              int valuePosition,
                              int valuePrecision,
                              const QColor &valueColor,
                              bool checkData)
{
    //過濾個數不一致數據,防止索引越界
    int rowCount = rowNames.count();
    int columnCount = columnNames.count();
    int valueCount = values.count();
    if (columnCount == 0 || valueCount == 0 || columnCount != valueCount) {
        return;
    }

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

    //設置橫座標文字描述
    QVector<double> ticks;
    QVector<QString> labels;
    int count = rowCount * columnCount;
    for (int i = 0; i < rowCount; i++) {
        ticks << 1.5 + (i * columnCount);
        labels << rowNames.at(i);
    }

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

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

        //建立柱狀圖
        CustomBarv *bar = new CustomBarv(customPlot->xAxis, customPlot->yAxis);
        bar->setCheckData(checkData);

        //設置寬度比例
        bar->setWidth(0.9);

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

        //設置名稱
        bar->setName(columnNames.at(i));

        //設置顏色,取顏色集合
        QColor color = QColor(51, 204, 255);
        if (i < colors.count()) {
            color = colors.at(i);
        }

        //邊緣高亮,若是傳入了邊框顏色則取邊框顏色
        bar->setPen(QPen(borderColor == Qt::transparent ? color.light(150) : borderColor));
        bar->setBrush(color);

        //這個算法很巧妙,想了好久
        QVector<double> ticks;
        double offset = i * 0.9;
        for (int j = 0; j < rowCount; j++) {
            ticks << 1.0 + (j * columnCount) + offset;
        }

        //設置數據
        bar->setData(ticks, value);
    }
}

void CustomPlot::setDataBarh(const QStringList &rowNames,
                             const QStringList &columnNames,
                             const QList<QVector<double> > &values,
                             const QColor &borderColor,
                             int valuePosition,
                             int valuePrecision,
                             const QColor &valueColor,
                             bool checkData)
{
    //只有1列的才能設置
    if (columnNames.count() != 1) {
        return;
    }

    //過濾個數不一致數據,防止索引越界
    int rowCount = rowNames.count();
    int columnCount = columnNames.count();
    int valueCount = values.count();
    if (columnCount == 0 || valueCount == 0 || columnCount != valueCount) {
        return;
    }

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

    //設置橫座標文字描述
    QVector<double> ticks;
    QVector<QString> labels;
    int count = rowCount * columnCount;
    double padding = 1;
    for (int i = 0; i < rowCount; i++) {
        ticks << padding + (i * columnCount);
        labels << rowNames.at(i);
    }

    setLabY(ticks, labels);
    customPlot->yAxis->setRange(0, count + 1);

    //先計算出每一個柱子佔用的高度
    double barHeight = 0.7;
    for (int i = 0; i < columnCount; i++) {
        //一樣也要先過濾個數是否符合要求
        QVector<double> value = values.at(i);
        if (rowCount != value.count()) {
            continue;
        }

        //先繪製系列1的數據,再繪製系列2,依次類推
        for (int j = 0; j < rowCount; j++) {
            //建立橫向柱狀圖
            double y = (0.67 + (j * columnCount));
            CustomBarh *bar = new CustomBarh(customPlot);
            bar->setCheckData(checkData);
            bar->setRect(QPointF(0, y), QPointF(value.at(j), y + barHeight));
            bar->setValue(value.at(j));

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

            //設置顏色,取顏色集合
            QColor color = QColor(51, 204, 255);
            if (i < colors.count()) {
                color = colors.at(i);
            }

            //邊緣高亮,若是傳入了邊框顏色則取邊框顏色
            bar->setPen(QPen(borderColor == Qt::transparent ? color.light(150) : borderColor));
            bar->setBrush(color);
        }
    }
}

void CustomPlot::setDataBarhs(const QStringList &rowNames,
                              const QStringList &columnNames,
                              const QList<QVector<double> > &values,
                              const QColor &borderColor,
                              int valuePosition,
                              int valuePrecision,
                              const QColor &valueColor,
                              bool checkData)
{
    //過濾個數不一致數據,防止索引越界
    int rowCount = rowNames.count();
    int columnCount = columnNames.count();
    int valueCount = values.count();
    if (columnCount == 0 || valueCount == 0 || columnCount != valueCount) {
        return;
    }

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

    //設置橫座標文字描述
    QVector<double> ticks;
    QVector<QString> labels;
    int count = rowCount * columnCount;
    //這個算法想了好久,很牛逼
    double padding = 1.5 + (columnCount - 2) * 0.4;
    for (int i = 0; i < rowCount; i++) {
        ticks << padding + (i * columnCount);
        labels << rowNames.at(i);
    }

    setLabY(ticks, labels);
    customPlot->yAxis->setRange(0, count + 1);

    //先計算出每一個柱子佔用的高度
    double barHeight = 0.8;
    for (int i = 0; i < columnCount; i++) {
        //一樣也要先過濾個數是否符合要求
        QVector<double> value = values.at(i);
        if (rowCount != value.count()) {
            continue;
        }

        //先繪製系列1的數據,再繪製系列2,依次類推
        for (int j = 0; j < rowCount; j++) {
            //建立橫向柱狀圖
            double y = (0.7 + i * barHeight + (j * columnCount));
            CustomBarh *bar = new CustomBarh(customPlot);
            bar->setCheckData(checkData);
            bar->setRect(QPointF(0, y), QPointF(value.at(j), y + barHeight));
            bar->setValue(value.at(j));

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

            //設置顏色,取顏色集合
            QColor color = QColor(51, 204, 255);
            if (j < colors.count()) {
                color = colors.at(j);
            }

            //邊緣高亮,若是傳入了邊框顏色則取邊框顏色
            bar->setPen(QPen(borderColor == Qt::transparent ? color.light(150) : borderColor));
            bar->setBrush(color);
        }
    }
}

void CustomPlot::setDataBars(const QStringList &rowNames,
                             const QStringList &columnNames,
                             const QList<QVector<double> > &values,
                             const QColor &borderColor,
                             int valuePosition,
                             int valuePrecision,
                             const QColor &valueColor,
                             bool checkData)
{
    //過濾個數不一致數據,防止索引越界
    int rowCount = rowNames.count();
    int columnCount = columnNames.count();
    int valueCount = values.count();
    if (columnCount == 0 || valueCount == 0 || columnCount != valueCount) {
        return;
    }

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

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

    //設置橫座標文字描述
    QVector<double> ticks;
    QVector<QString> labels;
    for (int i = 0; i < rowCount; i++) {
        ticks << i + 1;
        labels << rowNames.at(i);
    }

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

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

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

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

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

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

        //設置顏色,取顏色集合
        QColor color = QColor(51, 204, 255);
        if (i < colors.count()) {
            color = colors.at(i);
        }

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

        bar->setBrush(color);

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

        //設置數據
        bar->setData(ticks, value);
    }
}

5、控件介紹

超過146個精美控件，涵蓋了各類儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄，flatui、高亮按鈕、滑動選擇器、農曆等。遠超qwt集成的控件數量。
每一個類均可以獨立成一個單獨的控件，零耦合，每一個控件一個頭文件和一個實現文件，不依賴其餘文件，方便單個控件以源碼形式集成到項目中，較少代碼量。qwt的控件類環環相扣，高度耦合，想要使用其中一個控件，必須包含全部的代碼。
所有純Qt編寫，QWidget+QPainter繪製，支持Qt4.6到Qt5.12的任何Qt版本，支持mingw、msvc、gcc等編譯器，支持任意操做系統好比windows+linux+mac+嵌入式linux等，不亂碼，可直接集成到Qt Creator中，和自帶的控件同樣使用，大部分效果只要設置幾個屬性便可，極爲方便。
每一個控件都有一個對應的單獨的包含該控件源碼的DEMO，方便參考使用。同時還提供一個全部控件使用的集成的DEMO。
每一個控件的源代碼都有詳細中文註釋，都按照統一設計規範編寫，方便學習自定義控件的編寫。
每一個控件默認配色和demo對應的配色都很是精美。
超過130個可見控件，6個不可見控件。
部分控件提供多種樣式風格選擇，多種指示器樣式選擇。
全部控件自適應窗體拉伸變化。
集成自定義控件屬性設計器，支持拖曳設計，所見即所得，支持導入導出xml格式。
自帶activex控件demo，全部控件能夠直接運行在ie瀏覽器中。
集成fontawesome圖形字體+阿里巴巴iconfont收藏的幾百個圖形字體，享受圖形字體帶來的樂趣。
全部控件最後生成一個dll動態庫文件，能夠直接集成到qtcreator中拖曳設計使用。
目前已經有qml版本，後期會考慮出pyqt版本，若是用戶需求量很大的話。