qml 动态折线图

huhu_1318

已于 2023-07-04 11:18:31 修改

阅读量920

点赞数 2

CC 4.0 BY-SA版权

分类专栏： QT for Android 文章标签： qt android

于 2023-07-04 11:08:22 首次发布

本文链接：https://blog.youkuaiyun.com/C__Dull/article/details/131529674

QT for Android 专栏收录该内容

3 篇文章

订阅专栏

文章讲述了如何使用QML创建一个动态折线图，包括设置图表属性如隐藏轴、抗锯齿等，以及动态添加和删除数据的方法。通过调整X轴范围，实现了数据从右向左滑动的效果，并提出了处理大量数据时避免界面卡顿的策略，即保存数据到列表并在需要时删除前N条数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

qml 动态折线图绘制

ChartView {
	legend.visible: false // 设置图例不可见
	antialiasing: true // 抗锯齿
	margins.left: 0
	margins.right: 0
	margins.top: 0
	margins.bottom: 0
	anchors.fill: parent
	ValueAxis { // X轴
	    id: x_axis
     	max: 10
     	min: 0
		visible: false // 设置X轴不可见
		labelsFont.pixelSize: 24
		labelsFont.family: "Microsoft YaHei"
	}
    ValueAxis { // Y轴
     	id: y_axis
     	max: 10 // 设置最大值
     	min: 0 // 设置最小值
        tickCount: 5 // 设置网格线条数
        titleText: "单位: m" // 设置单位
        titleFont.family: "Microsoft YaHei" // 设置单位字体
        titleFont.pixelSize: 24
        labelsFont.family: "Microsoft YaHei" // 设置Y轴值字体
        labelsFont.pixelSize: 24
    }
    LineSeries { // 折线图
    	id: lineSeries
        axisY: y_axis // 设置Y轴
        // axisYRight: y_axis // Y轴展示在折线图右侧(默认为左侧)
        axisX: x_axis // 设置X轴
        // axisXTop: x_axis // X轴展示在折线图上方(默认为下方)
        color: "red" // 设置折线颜色
        width: 3 // 设置折线宽
	}
}

lineSeries.clear() // 清空折线图中的内容
lineSeries.append(0, 5) // 折线图添加一条内容 0：X轴值，5：Y轴值

如何展示一个自右向左滑动的动态折线图，以展示两百条数据为例：

{
	x_axis.min = -199 // 设置X轴起始大小
	x_axis.max = 0
	y_axis.min = 0 // 设置Y轴起始大小
	y_axis.max = 2
	var key = 1 // 待添加值X轴大小
	var value = 50 // 待添加值Y轴大小
	if (x_axis.max < key) { // 设置
		x_axis.max = key
		x_axis.min = x_axis.max - 199
	}
	if (y_axis.max < value) { // 设置Y轴量程自适应值大小
		y_axis.max = Math.ceil(value) + 2 // 如果Y轴最大值小于value，则向上取整并加2
	} else if (y_axis.min > value) {
		y_axis.min = Math.floor(value) - 2 // 如果Y轴最小值大于value，则向下取整并减2
	}
	lineSeries.append(key, value)
}

折线图数据过多，可能会导致界面卡顿，可考虑实时删除前N条数据，如何删除折线图中前N条数据，思路如下：
折线图每次append的时候都将其X轴，Y轴数据保存到一个list中，需要删除数据时，遍历该list，取前N个数据，remove即可