QChartView显示实时更新的温度曲线图（二）

• 参考图
• 说明
• 1. 项目结构
• 2. TempChartView.pro
• 3. main.cpp
• 4. TemperatureSeries.qml
• 5. main.qml
• 详细说明

参考图

说明

• Qt Charts 提供了一系列使用图表功能的简单方法。它使用Qt Graphics View Framework 图形视图框架，因此可以很容易集成到用户界面。可以使用Qt Charts作为QWidgets, QGraphicsWidget, 或者 QML类型。

• 使用Qt Charts时：需要在.pro文件中添加 QT += charts

• Qt Charts提供了如下图表类型：
  折线图和曲线图
  面积图和散点图
  柱状图
  饼状图
  箱形图
  蜡烛图
  极坐标图

1. 项目结构

TempChartView/
├── main.cpp
├── main.qml
├── qml.qrc
├── TemperatureSeries.qml
├── TempChartView.pro

2. TempChartView.pro

QT += charts qml quick

# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
        main.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

3. main.cpp

#include <QtWidgets/QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QtQuick/QQuickView>
#include <QtCore/QDir>
#include <QtQml/QQmlEngine>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

     QQmlApplicationEngine engine;
     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

     if (engine.rootObjects().isEmpty())
         return -1;

     return app.exec();

}

4. TemperatureSeries.qml

实现样式和多条曲线：

import QtQuick 2.15
import QtCharts 2.15
import QtQuick.Controls 2.15

ChartView {
    id: chartView
    width: 800
    height: 600
    antialiasing: true

    title: "温度变化图"
    legend.visible: false

    ValueAxis {
        id: axisX
        min: 0
        max: 100
        titleText: "时间/hh:mm:ss"
    }

    ValueAxis {
        id: axisY
        min: 0
        max: 110
        titleText: "温度/℃"
    }

    LineSeries {
        id: tempSeries1
        name: "Temperature 1"
        useOpenGL: true
        axisX: axisX
        axisY: axisY
        color: "red"
    }

    LineSeries {
        id: tempSeries2
        name: "Temperature 2"
        useOpenGL: true
        axisX: axisX
        axisY: axisY
        color: "orange"
    }

    LineSeries {
        id: tempSeries3
        name: "Temperature 3"
        useOpenGL: true
        axisX: axisX
        axisY: axisY
        color: "blue"
    }

    Timer {
        interval: 1000
        running: true
        repeat: true
        property double time: 0
        onTriggered: {
            time += 1
            var newTemp1 = 85 + (Math.sin(time / 10) * 5)
            var newTemp2 = 60 + (Math.sin(time / 10) * 5)
            var newTemp3 = 35 + (Math.sin(time / 10) * 5)
            tempSeries1.append(time, newTemp1)
            tempSeries2.append(time, newTemp2)
            tempSeries3.append(time, newTemp3)

            if (tempSeries1.count > 100) {
                tempSeries1.remove(0)
                tempSeries2.remove(0)
                tempSeries3.remove(0)
                axisX.min += 1
                axisX.max += 1
            }
        }
    }
}

5. main.qml

修改以适应新组件：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtCharts 2.15

ApplicationWindow {
    visible: true
    width: 800
    height: 600
    title: "Temperature Chart Example"

    TemperatureSeries {
        anchors.fill: parent
    }
}

详细说明

• main.cpp: 初始化QML应用程序并加载主QML文件main.qml。
• TemperatureSeries.qml:
  • ChartView: 用于显示图表。
  • ValueAxis: 定义X轴和Y轴的范围和标签。
  • LineSeries: 用于显示多条温度数据线，每条线代表不同的温度曲线，并指定颜色。
  • Timer: 每秒生成三个随机温度值并添加到LineSeries中。如果数据点超过100个，则移除最早的数据点，并调整X轴范围，以实现实时更新效果。
• main.qml: 定义应用程序窗口，并包含TemperatureSeries组件。