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即可