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()颜色无法正常显示问题