效果
曲线循环滚动刷新,用了两个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()
}
}
}
}