Qt編寫可視化大屏電子看板系統14-標準曲線圖

一、前言

近期將可視化大屏電子看板系統重新規劃和調整項目結構代碼，幾個重大改變是新增啓動窗體選擇，可選大屏系統、控件演示、模塊演示三種，其中控件演示是專門針對本系統中用到的各種自定義控件單獨做的使用demo，模塊演示是專門針對本系統中每個子模塊單獨演示，這樣可以更方便的切換學習，而不是盲目的在項目代碼中找，可以直接快速切換定位到具體的代碼文件學習。

大屏系統中用到的曲線圖柱狀圖都是在開源的QCustomPlot曲線圖表控件基礎上二次開發改造的，最基礎的曲線展示莫過於標準曲線圖了，QCustomPlot官方一直在更新升級代碼，本人也是一直看着QCustomPlot長大的，代碼質量真的沒的說，後期的代碼更加完美，尤其是增加了更多的模塊接口，比如曲線提示標識可以指定列，XY軸可以互換，這樣就可以很方便的垂直的效果轉成平行的效果尤其是柱狀圖。

在大屏系統中需要展示的曲線會有多條，都要求不同的曲線不同的顏色區分顯示，數據都是通過數據源採集好以後的靜態數據，每次都是整體重新設置數據，其實在這種數據量很小的情況下，重新繪製和追加數據繪製效率沒區別，都是需要重新繪製整個畫布。默認XY軸都是浮點數顯示，可以通過label映射換成對應的文本值顯示，本系統中全部是換成了文本型數值顯示，更靈活，比如對應座標點X軸1/2/3換成1月、2月、3月這種文字顯示，Y軸的數據還可以後面加上百分比符號等。

二、功能特點

1. 採用分層設計，整體總共分三級界面，一級界面是整體佈局，二級界面是單個功能模塊，三級界面是單個控件。
2. 子控件包括餅圖+圓環圖+曲線圖+柱狀圖+柱狀分組圖+橫向柱狀圖+橫向柱狀分組圖+合格率控件+百分比控件+進度控件+設備狀態面板+表格數據+地圖控件+視頻控件等。
3. 二級界面可以自由拖動懸浮，支持最小化最大化關閉，響應雙擊自定義標題欄。
4. 數據源支持模擬數據（默認）、數據庫採集、串口通信（需定製）、網絡通信（需定製）、網絡請求等，可自由設定每個子界面的採集間隔即數據刷新頻率。
5. 採用純QWidget編寫，親測Qt4.6到Qt5.15任意版本，理論上支持後續其他Qt版本，親測win+linux+mac+uos+kylin等系統，效果完美，同時還支持嵌入式linux比如樹莓派、香橙派、全志、imx6等。
6. 同時集成了自定義控件+qchart餅圖+echart地圖功能。
7. 內置多套配色風格樣式（紫色、藍色、深藍、黑色），默認紫色，支持任何分辨率。
8. 可設置標題+目標分辨率+佈局方案，啓動立即應用。
9. 可設置主背景顏色+面板顏色+十字線遊標顏色。
10. 可設置多條曲線顏色，沒有設置顏色的情況下內置15套精美顏色隨機應用。
11. 可設置標題欄背景顏色+文字顏色。
12. 可設置曲線圖表背景顏色+文字顏色+網格顏色。
13. 可設置正常顏色+警戒顏色+報警顏色+禁用顏色+百分比進度顏色。
14. 可分別設置各種字體大小，比如全局+軟件名稱+標題欄+子標題欄+加粗標籤等。
15. 可設置標題欄高度+表頭高度+行高度。
16. 曲線支持遊標+懸停高亮數據點和顯示值，柱狀圖支持頂部（可設置頂端+上部+中間+底部）顯示數據，全部自適應計算位置。
17. 主界面直接鼠標右鍵切換佈局+配色方案+關閉開啓某個二級窗體。
18. 自動記憶所有子窗口的大小和位置，下次啓動立即應用。
19. 動態加載佈局方案菜單，可以動態新建佈局、恢復佈局、保存佈局、另存佈局等，用戶可以製造任意佈局。
20. 二級窗體，雙擊從主窗體分離出來浮動，可以自由調整大小。再次雙擊標題欄最大化，再次雙擊還原，相當於子模塊也可以全屏顯示作爲一個大屏，這樣就可以一個大屏拓展出多個子大屏，放大查看子模塊的數據詳情。
21. 每個模塊都可以自定義採集速度，如果是數據庫採集會自動排隊處理，後期還可以拓展每個子模塊都獨立的數據庫採集。
22. 提供系統設置窗口進行整體的配置參數設置。
23. 提供精美炫酷的大屏地圖模塊，包括靜態圖片+閃爍效果+遷徙效果+世界地圖+區域地圖等，可指定點的經緯度座標，識別單擊響應，可以做地圖跳轉等，每個點都可以不同的顏色和提示信息，功能超牛逼！
24. 除了提供大屏系統外，還將每個模塊都做了獨立的模塊示例界面，每個模塊都可以獨立學習使用，裏面用到的控件也單獨做了控件示例界面，方便學習每個控件如何使用，考慮着實周到！
25. 超級詳細的開發和使用手冊，其中包括詳細的數據庫說明、模塊對照圖、控件對照圖、項目結構代碼說明、使用方法等！

三、體驗地址

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 "frmplotnormal.h"
#include "ui_frmplotnormal.h"
#include "head.h"

frmPlotNormal::frmPlotNormal(QWidget *parent) : QWidget(parent), ui(new Ui::frmPlotNormal)
{
    ui->setupUi(this);
    this->initForm();
    this->loadPlot();
}

frmPlotNormal::~frmPlotNormal()
{
    delete ui;
}

void frmPlotNormal::initForm()
{
    //設置線條名稱,如果要增加線條 只需要這裏增加線條名字就行
    lineNames << "新模" << "修模" << "設變" << "測試" << "哈哈";

    //隱藏表格線
    //ui->customPlot->getPlot()->xAxis->grid()->setVisible(false);
    //ui->customPlot->getPlot()->yAxis->grid()->setVisible(false);
    //添加畫布
    ui->customPlot->addGraph(lineNames.count());
    //設置畫布邊距
    ui->customPlot->setPadding(9);    
    //設置可拖動鼠標滾輪縮放
    ui->customPlot->setInteractions(3);
    //設置圖例可見
    ui->customPlot->setLegend(true, 0, lineNames.count());
    //綁定雙擊重新加載數據
    connect(ui->customPlot->getPlot(), SIGNAL(mouseDoubleClick(QMouseEvent *)), this, SLOT(loadPlot()));
}

void frmPlotNormal::loadPlot()
{
    vstring lab;
    vdouble key;
    lvdouble values;
    for (int j = 0; j < lineNames.count(); ++j) {
        values << vdouble();
    }

    int count = lineNames.count();
    int dataCount = 12;
    for (int i = 0; i < dataCount; i++) {
        lab << QString("%1月").arg(i + 1);
        key << i;
        //挨個對每條線段的數據賦值
        for (int j = 0; j < count; ++j) {
            values[j] << CustomPlotHelper::getRandValue(10, 100);
        }
    }

    //如果需要設置掃點圖則設置onlydot屬性即可
    //ui->customPlot->setOnlyDot(true);

    LineData data;
    data.key = key;
    for (int i = 0; i < count; ++i) {
        data.index = i;
        data.name = lineNames.at(i);
        data.value = values.at(i);
        //設置線條顏色,可以指定顏色也可以隨機顏色
        data.lineColor = ui->customPlot->getColors().at(i);
        ui->customPlot->setDataLine(data);
    }

    //設置座標軸範圍值+X座標對應顯示文字
    ui->customPlot->setLabX(key, lab);
    ui->customPlot->setRangeX(-0.5, key.count() - 0.5);
    ui->customPlot->setRangeY(0, 120, 10);

    //初始化指示器數據高亮及懸停提示等
    ui->customPlot->initItem();
    //重新刷新顯示
    ui->customPlot->replot();
}