qml 使用中继器从 Qlist 绘制折线图

Question

我想绘制保存在 QList 中的传感器数据图。我知道将数据提高到 qml 级别可以正常工作，因为它可以正确打印到控制台（参见代码）。

我现在的问题是，如何从这些数据中绘制 LineChart？我尝试了一个中继器和一些粗略的 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 用于生成多个项目，而不是用于 XYPoint。在这种情况下，最好创建一个 C++ 模型，将其导出到 QML，然后使用 VXYModelMapper 映射到 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
    }

}