在 QML 中将列表模型用作数据源

注意:这是 “使用 QML 制作图表”示例库的一部分。

截图显示了三条叠加在一起的折线图,分别代表不同车手的行驶速度:菲蒂帕尔迪为蓝色,斯图尔特为绿色,亨特为橙色。

首先,让我们定义一个空的 ChartView:

ChartView {
    id: chartView
    title: "Driver Speeds, lap 1"
    anchors.fill: parent
    legend.alignment: Qt.AlignTop
    animationOptions: ChartView.SeriesAnimations
    antialiasing: true
}

我们的 ListModel 使用硬编码的测试数据。在实际应用中,数据源通常是一个计时系统。

ListModel {
    // Hard-coded test data
    ListElement { speedTrap:0; driver: "Fittipaldi"; speed:104.12 }
    ListElement { speedTrap:0; driver:"Stewart"; speed:106.12 }
    ListElement { speedTrap:0; driver:"Hunt"; speed:106.12 }
    ...
// An example ListModel containing F1 legend drivers' speeds at speed traps
SpeedsList {
    id: speedsList
    Component.onCompleted: {
        timer.start();
    }
}

数据通过计时器进行解析。代表每位车手的线性序列是在运行时动态生成的。

// A timer to mimic refreshing the data dynamically
Timer {
    id: timer
    interval: 700
    repeat: true
    triggeredOnStart: true
    running: false
    onTriggered: {
        root.currentIndex++;
        if (root.currentIndex < speedsList.count) {
            // Check if there is a series for the data already
            // (we are using driver name to identify series)
            var lineSeries = chartView.series(speedsList.get(root.currentIndex).driver);
            if (!lineSeries) {
                lineSeries = chartView.createSeries(ChartView.SeriesTypeLine,
                                                    speedsList.get(root.currentIndex).driver);
                chartView.axisY().min = 0;
                chartView.axisY().max = 250;
                chartView.axisY().tickCount = 6;
                chartView.axisY().titleText = "speed (kph)";
                chartView.axisX().titleText = "speed trap";
                chartView.axisX().labelFormat = "%.0f";
            }
            lineSeries.append(speedsList.get(root.currentIndex).speedTrap,
                              speedsList.get(root.currentIndex).speed);

            if (speedsList.get(root.currentIndex).speedTrap > 3) {
                chartView.axisX().max = Number(speedsList.get(root.currentIndex).speedTrap) + 1;
                chartView.axisX().min = chartView.axisX().max - 5;
            } else {
                chartView.axisX().max = 5;
                chartView.axisX().min = 0;
            }
            chartView.axisX().tickCount = chartView.axisX().max - chartView.axisX().min + 1;
        } else {
            // No more data, change x-axis range to show all the data
            timer.stop();
            chartView.animationOptions = ChartView.AllAnimations;
            chartView.axisX().min = 0;
            chartView.axisX().max = speedsList.get(root.currentIndex - 1).speedTrap;
        }
    }
}

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.