qt qml LineSeries画实时动态折线图

当程序动态的获取数据,例如某个固定时间获取远端数据并需要实时在折线图中进行显示时,可使用如下方法,我设置了一个计时器TImer,每秒钟往图表中添加一个数据,并动态更新坐标轴数值:

设置横纵坐标,此时横坐标设置为动态的:

    ValueAxis {
             id: myAxisX
             min: 0
             max: 10>timer? 10:timer+1
             tickCount: 11
             labelsColor: "#ffffff"
             labelsFont.pointSize: 13
             labelsFont.bold: true
             labelFormat: '%d'
         }

设置计时器每秒钟往LineSeries最后新增一个数据:

    Timer{
        interval: 1000
        running: true
        repeat: true
        onTriggered: {
            lineSeries.append(timer,Math.random()*50)
            timer = timer+1            
        }
    }

完整代码:

import QtQuick 2.0
import QtCharts 2.2

ChartView {
    title: "XXX数据读取"
    antialiasing: true
    backgroundColor: "#9917719b"
    animationOptions: ChartView.SeriesAnimations
    titleColor: "#ccffffff"
    titleFont.bold: true
    titleFont.family: "方正粗倩_GBK"
    titleFont.pointSize: 15
    legend.visible:false
    margins.left: 10
    margins.right: 10
    margins.top: 10
    margins.bottom: 10
    property int timer: 0
    ValueAxis {
             id: myAxisX
             min: 0
             max: 10>timer? 10:timer+1
             tickCount: 11
             labelsColor: "#ffffff"
             labelsFont.pointSize: 13
             labelsFont.bold: true
             labelFormat: '%d'
         }
    ValueAxis{
        id:myAxisY
        min:0
        max:50
        tickCount: 6
        labelsColor: "#ffffff"
        labelsFont.pointSize: 13
        labelsFont.bold: true
        labelFormat: '%d'
    }

    LineSeries {
        id:lineSeries
        name: "LineSeries"
        axisX: myAxisX
        axisY:myAxisY
        color: "#00ffff"
        width: 3
    }

    Timer{
        interval: 1000
        running: true
        repeat: true
        onTriggered: {
            lineSeries.append(timer,Math.random()*50)
            timer = timer+1
        }
    }
}

猜你喜欢

转载自blog.csdn.net/zjgo007/article/details/106149345
今日推荐