QML- ChartView实现随时间改变的趋势曲线

最新推荐文章于 2024-03-04 14:47:52 发布

Qt开发老杰

最新推荐文章于 2024-03-04 14:47:52 发布

阅读量774

点赞数

文章标签： qt 开发语言 c++

本文链接：https://blog.csdn.net/QtCompany/article/details/131261515

版权

布置界面元素

  ChartView {
              id:chartView
              title: qsTr("①侧温度趋势")
              titleFont.pixelSize: 15
              titleFont.bold: true
              titleColor: Theme.darker(1.2)
              width: parent.width
              height:parent.height
              antialiasing: true
             //X轴
             ValueAxis {
                 id: valueAxisX
                 min: 0
                 max: 60
                 tickCount: 30  //坐标轴上的的刻度个数。所以间隔 = 60 / 30 = 2
                 labelFormat: "%.0f"//0 - 控制小数点后有几位小数
             }
             //Y轴
             ValueAxis {
                 id: valueAxisY
                 min: 20
                 max: 300
                 tickCount: 27  //坐标轴上的的刻度个数
                 labelFormat: "%.1f"//1 - 控制小数点后有几位小数
             }
             //LineSeries是折线，SplineSeries是曲线。子项都是XYPoint
             SplineSeries {
                 id:line1
                 name: "1"  //线条的名称
                 axisX: valueAxisX  //指定X轴
                 axisY: valueAxisY  //指定Y轴
                 color: Qt.darker("#BB4444",1.2) //线条颜色，默认每条线的颜色不同
                 width: 2//线的宽度，但修改线宽后，需要重新设置color，否则修改过width的线条都是黑色
             }
             SplineSeries {
                 id:line2
                 name: "2"
                 axisX: valueAxisX
                 axisY: valueAxisY
                 color: Qt.darker("#B38A4D",1.2)
                 width: 2
             }
             SplineSeries {
                 id:line3
                 name: "3"
                 //style: Qt.SolidLine //样式
                 axisX: valueAxisX
                 axisY: valueAxisY
                 color: Qt.darker("#61B34D",1.2)
                 width: 2
             }
             SplineSeries {
                 id:line4
                 name: "4"
                 //style: Qt.SolidLine //样式
                 axisX: valueAxisX
                 axisY: valueAxisY
                 color: Qt.darker("#4D8AB3",1.2)
                 width: 2
             }
             SplineSeries {
                 id:line5
                 name: "5"
                 //style: Qt.SolidLine //样式
                 axisX: valueAxisX
                 axisY: valueAxisY
                 color: Qt.darker("#9E4DB3",1.2)
                 width: 2
             }
             SplineSeries {
                 id:line6
                 name: "6"
                 //style: Qt.SolidLine //样式
                 axisX: valueAxisX
                 axisY: valueAxisY
                 color: Qt.darker("#AA5566",1.2)
                 width: 2
             }
             SplineSeries {
                 id:line7
                 name: "7"
                 //style: Qt.SolidLine //样式
                 axisX: valueAxisX
                 axisY: valueAxisY
                 color: Qt.darker("#808080",1.2)
                 width: 2
             }
             SplineSeries {
                 id:line8
                 name: "8"
                 //style: Qt.SolidLine //样式
                 axisX: valueAxisX
                 axisY: valueAxisY
                 color: Qt.darker("#F79709",1.2)
                 width: 2
             }
         }

　　现在显示数据的容器已经制作好了，接下来考虑获取数据的问题。为了演示效果，我采用了取一定范围内的随机数作为数据的来源。有了数据之后，我们该考虑怎么把数据添加到曲线中去。定时器Timer控制着数据的插入速度（曲线的刷新频率）。这里我们先以一条线为例，间隔1秒采集一个数据，满10个点后，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.clear();
                 count = 0;
             }
         }
         interval: 1000;running:true;repeat: true;
         onTriggered: timeChanged();
     }

　　效果

分析

　　不管是折线/曲线，他都是一个个点（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();
    }

效果

　　变成一条乱窜的蚯蚓了，脱离了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

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

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

　　这里一共显示的是8条曲线。C++定义的是 QVector<QVector<float>> mDataSource; 。QML则是通过调用 graphList.getDataSource(0,i) 方法来获取到数据的。

　　因为我这边是测试环境，获取到的温度值都是0，就不贴效果图了。

Qt开发老杰

关注

0
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
QML- ChartView实现随时间改变的趋势曲线

把数据处理放在C++的类中实现QML只负责传递的数据C++/*** @Author* @Description 图表的数据来源(温度曲线图)*/Q_OBJECTpublic:signals:private://实时读取的结构体//预定义，用于切换到mCurrentData/*** @brief 定时刷新动作* @param*/}else {
复制链接

扫一扫