qml ChartView实现曲线循环滚动刷新

效果

曲线循环滚动刷新
曲线循环滚动刷新,用了两个Series分别更新呈现上面的效果。
但是使用ChartView刷新图像运行CPU使用率会特别高,如果有几个图都要这样刷新就不流畅,暂时不知道有没有更好的方式。

	ChartView {
		id: indexPlot
        antialiasing: true
        anchors.fill: parent
        animationOptions: ChartView.NoAnimation
        legend.visible: false

        ValueAxis {
            id: indexYAxis
            min: -50
            max: 50
            gridVisible: false
        }

        ValueAxis {
            id: xAxis
            titleText: "Time (s)"
            min: 0
            max: 150 / 20
            tickCount: 7
            labelsVisible: true
            gridVisible: false
        }

        AreaSeries {
            visible: true
            useOpenGL: true
            axisX: xAxis
            axisY: indexYAxis
            color: "#ab1200"
            upperSeries: LineSeries{
                id: realSeries
            }
        }

        AreaSeries {
            visible: true
            useOpenGL: true
            axisX: xAxis
            axisY: indexYAxis
            color: "#ab1200"
            upperSeries: LineSeries{
                id: realSeriesOld
            }
        }

        Timer {
            id: timer
            interval: updateInterval
            running: true
            repeat: true
            onTriggered: {
                var y = Math.random() * 50 - 25
                if (updateNum > 140) {
                    if (realSeriesOld.count > 0) {
                        realSeriesOld.clear()
                    }
                    realSeries.append(updateNum / 20, y)
                    if (realSeries.count > 0) {
                        realSeries.remove(0)
                    }
                }
                else {
                    realSeries.append(updateNum / 20, y)
                    if (realSeriesOld.count > 0) {
                        realSeriesOld.remove(0)
                    }
                }
                updateNum = (updateNum + 1) % 151
                if (updateNum === 0) {
                    for (var i = 0; i < realSeries.count; i++) {
                        realSeriesOld.append(realSeries.at(i).x, realSeries.at(i).y)
                    }
                    realSeries.clear()
                }
            }
        }
	}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值