QChartView顯示實時更新的溫度曲線圖（二）

_S_Q發表於2024-07-04
View

目錄
  • 參考圖
  • 說明
  • 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元件。

相關文章