qml 使用中繼器從 Qlist 繪制線圖

Question

我想繪制保存在 QList 中的 plot 傳感器數據。 我知道獲取 qml 級別的數據工作正常，因為它正確地打印到控制台（參見代碼）。

我現在的問題是，如何從這些數據中繪制折線圖？ 我嘗試了中繼器和一些粗略的 for 循環，但似乎都不起作用，只顯示一個空圖表。

如上所述，數據有效並正確記錄。 軸也是正確的，只是沒有線。

我最有希望的嘗試：

import QtQuick 2.0
import QtCharts 2.3
Item {
    width:400
    height:600
    
    ChartView
    {
    
    width:parent.width
    height:parent.height
    Component.onCompleted:  {
    //Data displayed correctly
        console.log(device.AIN3data.length);
        console.log(device.AIN3data)
    }
    
    ValueAxis {
        id: axisX
        min: 0
        max: device.AIN3data.length
    }
    
    ValueAxis {
        id: axisY
        min: 0
        max: 1000
    }
    LineSeries
    {
        axisX: axisX
        axisY:axisY
    
    
        name: "AIN3"
        Repeater
        {
    
            model: device.AIN3data.length
            XYPoint{x:index;y:device.AIN3data[index]}
            Component.onCompleted: console.log("Repeater")
    
        }
    }
    }
}

Answer 1

Repeater 用於生成多個 Item，不適用於 XYPoint。 在這種情況下，最好創建一個 C++ model，將其導出到 QML，然后使用 VXYModelMapper 將 map 導出到 LineSeries。

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QStandardItemModel>
#include <QTimer>

#include <random>

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
    QApplication app(argc, argv);

    QStandardItemModel model(0, 2);

    QTimer timer;
    timer.setInterval(1000);
    QObject::connect(&timer, &QTimer::timeout, &model, [&model](){
        static std::default_random_engine e;
        static std::uniform_real_distribution<> dis(0, 1000);
        QStandardItem *xItem = new QStandardItem;
        QStandardItem *yItem = new QStandardItem;
        xItem->setData(model.rowCount(), Qt::DisplayRole);
        yItem->setData(dis(e), Qt::DisplayRole);
        model.appendRow({xItem, yItem});
    });
    timer.start();

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("dataModel", &model);
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

import QtCharts 2.3
import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ChartView {
        anchors.fill: parent

        ValueAxis {
            id: axisX

            min: 0
            max: lineSeries.count - 1
        }

        ValueAxis {
            id: axisY

            min: 0
            max: 1000
        }

        LineSeries {
            id: lineSeries

            axisX: axisX
            axisY: axisY
        }

    }

    VXYModelMapper {
        id: modelMapper

        model: dataModel
        series: lineSeries
        xColumn: 0
        yColumn: 1
    }

}