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

Posted 2023-02-17

【中文标题】qml 使用中继器从 Qlist 绘制折线图

【英文标题】：qml draw a Linechart from Qlist using a repeater

【发布时间】：2021-10-11 06:40:17

【问题描述】：

我想绘制保存在 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
            XYPointx:index;y:device.AIN3data[index]
            Component.onCompleted: console.log("Repeater")
    
        
    
    

【参考方案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
    

【讨论】：

没有比创建 c++ 模型更简单的方法来创建包含所有数据的折线图吗？还不知道如何整合它：我

找到了一种类似于示波器示例的方法。还是谢谢你@eyllanesc

@Bl4ckmedia 不，这是简单的方法，我看不出它有多复杂，因为代码很简单。

当时我尝试了你的方法，但没有成功。可能是我的错误。