QML- ChartView實現隨時間改變的趨勢曲線

本文轉載自查看原文 2020-07-14 19:14 1304 QML/ Qt與QML/ C++

前言

嘗試寫博客的初衷：首先，記錄下自己的學習路程，方便以后回顧。其次，平常工作中，博客園大佬的隨筆給了我非常大的幫助。自己也希望可以幫助到其他需要的人。為什么先寫這個，網絡上沒有具體實現的隨時間改變的趨勢曲線功能。

布置界面元素

 1 ChartView {
 2             id:chartView
 3             title: qsTr("①側溫度趨勢")
 4             titleFont.pixelSize: 15
 5             titleFont.bold: true
 6             titleColor: Theme.darker(1.2)
 7             width: parent.width
 8             height:parent.height
 9             antialiasing: true
10             //X軸
11             ValueAxis {
12                 id: valueAxisX
13                 min: 0
14                 max: 60
15                 tickCount: 30  //坐標軸上的的刻度個數。所以間隔 = 60 / 30 = 2
16                 labelFormat: "%.0f"//0 - 控制小數點后有幾位小數
17             }
18             //Y軸
19             ValueAxis {
20                 id: valueAxisY
21                 min: 20
22                 max: 300
23                 tickCount: 27  //坐標軸上的的刻度個數
24                 labelFormat: "%.1f"//1 - 控制小數點后有幾位小數
25             }
26             //LineSeries是折線，SplineSeries是曲線。子項都是XYPoint
27             SplineSeries {
28                 id:line1
29                 name: "1"  //線條的名稱
30                 axisX: valueAxisX  //指定X軸
31                 axisY: valueAxisY  //指定Y軸
32                 color: Qt.darker("#BB4444",1.2) //線條顏色，默認每條線的顏色不同
33                 width: 2//線的寬度，但修改線寬后，需要重新設置color，否則修改過width的線條都是黑色
34             }
35             SplineSeries {
36                 id:line2
37                 name: "2"
38                 axisX: valueAxisX
39                 axisY: valueAxisY
40                 color: Qt.darker("#B38A4D",1.2)
41                 width: 2
42             }
43             SplineSeries {
44                 id:line3
45                 name: "3"
46                 //style: Qt.SolidLine //樣式
47                 axisX: valueAxisX
48                 axisY: valueAxisY
49                 color: Qt.darker("#61B34D",1.2)
50                 width: 2
51             }
52             SplineSeries {
53                 id:line4
54                 name: "4"
55                 //style: Qt.SolidLine //樣式
56                 axisX: valueAxisX
57                 axisY: valueAxisY
58                 color: Qt.darker("#4D8AB3",1.2)
59                 width: 2
60             }
61             SplineSeries {
62                 id:line5
63                 name: "5"
64                 //style: Qt.SolidLine //樣式
65                 axisX: valueAxisX
66                 axisY: valueAxisY
67                 color: Qt.darker("#9E4DB3",1.2)
68                 width: 2
69             }
70             SplineSeries {
71                 id:line6
72                 name: "6"
73                 //style: Qt.SolidLine //樣式
74                 axisX: valueAxisX
75                 axisY: valueAxisY
76                 color: Qt.darker("#AA5566",1.2)
77                 width: 2
78             }
79             SplineSeries {
80                 id:line7
81                 name: "7"
82                 //style: Qt.SolidLine //樣式
83                 axisX: valueAxisX
84                 axisY: valueAxisY
85                 color: Qt.darker("#808080",1.2)
86                 width: 2
87             }
88             SplineSeries {
89                 id:line8
90                 name: "8"
91                 //style: Qt.SolidLine //樣式
92                 axisX: valueAxisX
93                 axisY: valueAxisY
94                 color: Qt.darker("#F79709",1.2)
95                 width: 2
96             }
97         }

View Code

　　現在顯示數據的容器已經制作好了，接下來考慮獲取數據的問題。為了演示效果，我采用了取一定范圍內的隨機數作為數據的來源。有了數據之后，我們該考慮怎么把數據添加到曲線中去。定時器Timer控制着數據的插入速度（曲線的刷新頻率）。這里我們先以一條線為例，間隔1秒采集一個數據，滿10個點后，list清空重新添加。

第一階段效果

 1 Timer{
 2         id:timer
 3         property int count: 0
 4         //生成隨機數(>=Min,<=Max)
 5         function getRandomNum(Min,Max)
 6         {
 7             var Range = Max - Min;
 8             var Rand = Math.random();
 9             return(Min + Math.round(Rand * Range));
10         }
11         function timeChanged() {
12             //隨機數模擬數據來源
13             line1.append(2 * count, getRandomNum(20,300));
14             count++;
15             if(count > 10){
16                 line1.clear();
17                 count = 0;
18             }
19         }
20         interval: 1000;running:true;repeat: true;
21         onTriggered: timeChanged();
22     }

View Code

　　效果

分析

　　不管是折線/曲線，他都是一個個點（XYPoint）組成的。其實在QML中，一條線就像一個list，往list添加數據，ChartView會自動顯示出來。借助F1查看幫助文檔，我們可以看到SplineSeries的父類是XYSeries。

　　而XYSeries的公共方法如下：

　　我們就是通過 .append(x,y) 的方式往list添加數據。有了 .append(x,y) ,自然會想到 remove(x,y) 。由於我們沒有記錄追加的點數據 (x,y) ，所以我們改用 remove(index) 這個方法。那么在小於閾值時， .append() 新來的數據；等於閾值時，先 .append() 新來的數據，同時 .remove(0) 掉list首的數據，是不是就可以達到動態曲線效果了呢？看效果。

Timer{
        id:timer
        property int count: 0
        //生成隨機數(>=Min,<=Max)
        function getRandomNum(Min,Max)
        {
            var Range = Max - Min;
            var Rand = Math.random();
            return(Min + Math.round(Rand * Range));
        }
        function timeChanged() {
            //隨機數模擬數據來源
            line1.append(2 * count, getRandomNum(20,300));
            count++;
            if(count > 10){
                line1.remove(0);
            }
        }
        interval: 1000;running:true;repeat: true;
        onTriggered: timeChanged();
    }

View Code

效果

　　變成一條亂竄的蚯蚓了，脫離了Y軸。我們都知道ChartView可以看成是一塊畫布和一個坐標系的疊加。畫布可以無限大，而我們看到的內容只能是XY軸矩形范圍內的有限內容。那我們是否能在線條游離時，移動XY矩形視窗的位置來矯正視覺效果，感覺這樣視覺上是沒差的。

注意到ChartView有這樣一個方法 scroll(pixels) 。

不過注意到這個方法的形參是像素為單位的。果斷放棄了這個想法，因為要考慮到屏幕尺寸適配性的問題。相同的移動像素量，不同尺寸不同分辨率下移動的距離是不同的。那么又應該怎么實現為我們的最終效果呢？

最后實現方式

　　思路：

把數據處理放在C++的類中實現
QML只負責傳遞的數據

C++

graphList.h

#ifndef GRAPHLIST_H
#define GRAPHLIST_H
/**
 * @Author 
 * @Description 圖表的數據來源(溫度曲線圖)
 * @Date 2020-1-4
 */

#include <QObject>
#include <QtMath>
#include "plc/plcwordunit.h"

struct graphModel{
  PlcWordUnit scalingPowderWord;
  PlcWordUnit preheatOneWord;
  PlcWordUnit preheatTwoWord;
  PlcWordUnit preheatThreeWord;
  PlcWordUnit weldWord;
  PlcWordUnit coolingOneWord;
  PlcWordUnit coolingTwoWord;
  PlcWordUnit coolingThreeWord;
};

class GraphList : public QObject
{
    Q_OBJECT
    Q_PROPERTY(int lineCount READ getLineCount NOTIFY lineCountChanged)
    Q_PROPERTY(int lineLength READ getLineLength NOTIFY lineLengthChanged)
    Q_PROPERTY(int lineSize READ getLineSize NOTIFY lineSizeChanged)
    Q_PROPERTY(int workSide READ getWorkSide WRITE setWorkSide NOTIFY workSideChanged)
public:
    explicit GraphList(QObject *parent = nullptr);
    ~GraphList();
    Q_INVOKABLE void timeOut();
    Q_INVOKABLE void clearData();
    Q_INVOKABLE float getDataSource(int line,int number);
    enum workSide{
        WORKSIDE_ONE_SIDE = 0,
        WORKSIDE_TWO_SIDE = 1
    };
    int getLineCount();
    int getLineLength();
    int getLineSize();
    int getWorkSide();
    void  setWorkSide(int side);

signals:
    void lineCountChanged();
    void lineLengthChanged();
    void lineSizeChanged();
    void workSideChanged();
private:
    //QVector<QVector<int>>mDataList;
    int mLineCount;
    int mLineLength;
    int mWorkSide;
    //graphModel mCurrentData;//實時讀取的結構體
    graphModel mDataList[2];//預定義，用於切換到mCurrentData
    QVector<QVector<float>> mDataSource;
};

#endif // GRAPHLIST_H

View Code

graphList.cpp

#include "graphlist.h"

GraphList::GraphList(QObject *parent) : QObject(parent)
{
    mLineCount = 8;
    mLineLength = 58;
    mWorkSide = WORKSIDE_ONE_SIDE;
    mDataSource.resize(mLineCount);
}

GraphList::~GraphList()
{
    clearData();
}

/**
 * @brief 定時刷新動作
 * @param
 * @return void
 */
void GraphList::timeOut()
{
    int length = mDataSource[0].size();
    if(length < mLineLength){
        mDataSource[0].append(mDataList[mWorkSide].scalingPowderWord.plcData().toFloat());
        mDataSource[1].append(mDataList[mWorkSide].preheatOneWord.plcData().toFloat());
        mDataSource[2].append(mDataList[mWorkSide].preheatTwoWord.plcData().toFloat());
        mDataSource[3].append(mDataList[mWorkSide].preheatThreeWord.plcData().toFloat());
        mDataSource[4].append(mDataList[mWorkSide].weldWord.plcData().toFloat());
        mDataSource[5].append(mDataList[mWorkSide].coolingOneWord.plcData().toFloat());
        mDataSource[6].append(mDataList[mWorkSide].coolingTwoWord.plcData().toFloat());
        mDataSource[7].append(mDataList[mWorkSide].coolingThreeWord.plcData().toFloat());
    }else {
        mDataSource[0].removeFirst();
        mDataSource[0].append(mDataList[mWorkSide].scalingPowderWord.plcData().toFloat());
        mDataSource[1].removeFirst();
        mDataSource[1].append(mDataList[mWorkSide].preheatOneWord.plcData().toFloat());
        mDataSource[2].removeFirst();
        mDataSource[2].append(mDataList[mWorkSide].preheatTwoWord.plcData().toFloat());
        mDataSource[3].removeFirst();
        mDataSource[3].append(mDataList[mWorkSide].preheatThreeWord.plcData().toFloat());
        mDataSource[4].removeFirst();
        mDataSource[4].append(mDataList[mWorkSide].weldWord.plcData().toFloat());
        mDataSource[5].removeFirst();
        mDataSource[5].append(mDataList[mWorkSide].coolingOneWord.plcData().toFloat());
        mDataSource[6].removeFirst();
        mDataSource[6].append(mDataList[mWorkSide].coolingTwoWord.plcData().toFloat());
        mDataSource[7].removeFirst();
        mDataSource[7].append(mDataList[mWorkSide].coolingThreeWord.plcData().toFloat());
    }
    //qDebug()<<"dataList0 - "<<mDataList[0];
}

void GraphList::clearData()
{
    //qDebug()<<"clearData";
    mDataSource[0].clear();
    mDataSource[1].clear();
    mDataSource[2].clear();
    mDataSource[3].clear();
    mDataSource[4].clear();
    mDataSource[5].clear();
    mDataSource[6].clear();
    mDataSource[7].clear();
}

float GraphList::getDataSource(int line, int number)
{
    if((line < 0 || line >= mLineCount ) || (number < 0 || number >= mLineLength)){
        return 0;
    }
    return mDataSource[line][number];
}

int GraphList::getLineCount()
{
    return mLineCount;
}

int GraphList::getLineLength()
{
    return mLineLength;
}

int GraphList::getLineSize()
{
    return mDataSource[0].size();
}

int GraphList::getWorkSide()
{
    return mWorkSide;
}

void GraphList::setWorkSide(int side)
{
    mWorkSide = side;
}

View Code

QML

Timer{
        id:timer
        function timeChanged() {
            graphList.timeOut(); //顯示調用timeout，刷新C++類中的數據
            line1.clear();
            line2.clear();
            line3.clear();
            line4.clear();
            line5.clear();
            line6.clear();
            line7.clear();
            line8.clear();
            //clear后重新添加數據
            for(var i = 0;i < graphList.lineSize;i++){
                line1.append(i,graphList.getDataSource(0,i));
                line2.append(i,graphList.getDataSource(1,i));
                line3.append(i,graphList.getDataSource(2,i));
                line4.append(i,graphList.getDataSource(3,i));
                line5.append(i,graphList.getDataSource(4,i));
                line6.append(i,graphList.getDataSource(5,i));
                line7.append(i,graphList.getDataSource(6,i));
                line8.append(i,graphList.getDataSource(7,i));
            }
        }
        interval: 1000;running:true;repeat: true;
        onTriggered: timeChanged();
    }

View Code

　　這里一共顯示的是8條曲線。C++定義的是 QVector<QVector<float>> mDataSource; 。QML則是通過調用 graphList.getDataSource(0,i) 方法來獲取到數據的。

　　因為我這邊是測試環境，獲取到的溫度值都是0，就不貼效果圖了。

免責聲明！

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

猜您在找 QML-獲取當前時間 QML使用chartview QML-動畫 QML-調用JS QML ChartView 畫折線圖 QML-粒子系統 QML-自定義模塊使用 amcharts 和 highcharts 繪制多曲線時間趨勢圖的通用方法 QML-隱藏式界面切換 QML-關於Qt.rgba()顏色無法正常顯示問題