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

本文轉載自查看原文 2019-06-08 21:27 1286 QT/ Qt-自定義控件/ 免費/ 自定義控件/ 插件

一、前言

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

二、實現的功能

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

三、效果圖

四、核心代碼

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);
    }
}

五、控件介紹

超過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版本，如果用戶需求量很大的話。

六、SDK下載

SDK下載鏈接：https://pan.baidu.com/s/1tD9v1YPfE2fgYoK6lqUr1Q 提取碼：lyhk
自定義控件+屬性設計器欣賞：https://pan.baidu.com/s/1l6L3rKSiLu_uYi7lnL3ibQ 提取碼：tmvl
下載鏈接中包含了各個版本的動態庫文件，所有控件的頭文件，使用demo。
自定義控件插件開放動態庫dll使用（永久免費），無任何后門和限制，請放心使用。
目前已提供26個版本的dll，其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
不定期增加控件和完善控件，不定期更新SDK，歡迎各位提出建議，謝謝！
widget版本（QQ：517216493）qml版本（QQ：373955953）三峰駝（QQ：278969898）。
濤哥的知乎專欄 Qt進階之路 https://zhuanlan.zhihu.com/TaoQt
歡迎關注微信公眾號【高效程序員】，C++/Python、學習方法、寫作技巧、熱門技術、職場發展等內容，干貨多多，福利多多！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 編寫Qt Designer自定義控件（二）——編寫自定義控件界面編寫Qt Designer自定義控件（一）——如何創建並使用Qt自定義控件 Qt編寫自定義控件及插件的使用 Qt編寫自定義控件二動畫按鈕 Qt編寫自定義控件一開關按鈕 Qt編寫自定義控件屬性設計器 Qt編寫自定義控件大全 Qt編寫自定義控件7-自定義可拖動多邊形 Qt編寫自定義控件41-自定義環形圖 Qt自定義控件