參考圖

說明

• 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.0SOURCES += \main.cppRESOURCES += 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.15ChartView {id: chartViewwidth: 800height: 600antialiasing: truetitle: "溫度變化圖"legend.visible: falseValueAxis {id: axisXmin: 0max: 100titleText: "時間/hh:mm:ss"}ValueAxis {id: axisYmin: 0max: 110titleText: "溫度/℃"}LineSeries {id: tempSeries1name: "Temperature 1"useOpenGL: trueaxisX: axisXaxisY: axisYcolor: "red"}LineSeries {id: tempSeries2name: "Temperature 2"useOpenGL: trueaxisX: axisXaxisY: axisYcolor: "orange"}LineSeries {id: tempSeries3name: "Temperature 3"useOpenGL: trueaxisX: axisXaxisY: axisYcolor: "blue"}Timer {interval: 1000running: truerepeat: trueproperty double time: 0onTriggered: {time += 1var 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 += 1axisX.max += 1}}}
}

5. main.qml

修改以適應新組件：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtCharts 2.15ApplicationWindow {visible: truewidth: 800height: 600title: "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組件。