Verwendung von Achsen mit QML

Hinweis: Dies ist Teil des Beispiels „Diagramme mit QML“ in der Galerie.

Wir beginnen mit einem Diagramm, das eine Linienreihe und eine Streudiagrammreihe mit zufälligen Daten enthält. Anschließend erhalten wir ein Diagramm mit zwei Reihen, die sich eine gemeinsame Achse teilen.

Screenshot, der ein Diagramm mit zwei Datenreihen zeigt, wobei es sich bei der einen um ein blaues Liniendiagramm und bei der anderen um ein Streudiagramm mit grünen Punkten handelt

ChartView {
    title: "Two Series, Common Axes"
    anchors.fill: parent
    legend.visible: false
    antialiasing: true

    ValueAxis {
        id: axisX
        min: 0
        max: 10
        tickCount: 5
    }

    ValueAxis {
        id: axisY
        min: -0.5
        max: 1.5
    }

    LineSeries {
        id: series1
        axisX: axisX
        axisY: axisY
    }

    ScatterSeries {
        id: series2
        axisX: axisX
        axisY: axisY
    }

    // Add data dynamically to the series
    Component.onCompleted: {
        for (var i = 0; i <= 10; i++) {
            series1.append(i, Math.random());
            series2.append(i, Math.random());
        }
    }
}

Dieses Diagramm zeigt einige genaue historische Daten. Es wird durch den folgenden Codeausschnitt erstellt, der eine „DateTimeAxis“ verwendet.

Screenshot, der den genauen Verlauf der historischen Daten als Liniendiagramm unter Verwendung von DateTimeAxis zeigt

ChartView {
    id: root
    title: "Accurate Historical Data"
    anchors.fill: parent
    legend.visible: false
    antialiasing: true

    LineSeries {
        axisX: DateTimeAxis {
            format: "yyyy MMM"
            tickCount: 5
        }
        axisY: ValueAxis {
            min: 0
            max: 150
        }

        // Please note that month in JavaScript months are zero based, so 2 means March
        XYPoint { x: root.toMsecsSinceEpoch(new Date(1950, 2, 15)); y: 5 }
        XYPoint { x: root.toMsecsSinceEpoch(new Date(1970, 0, 1)); y: 50 }
        XYPoint { x: root.toMsecsSinceEpoch(new Date(1987, 12, 31)); y: 102 }
        XYPoint { x: root.toMsecsSinceEpoch(new Date(1998, 7, 1)); y: 100 }
        XYPoint { x: root.toMsecsSinceEpoch(new Date(2012, 8, 2)); y: 110 }
    }

    // DateTimeAxis is based on QDateTimes so we must convert our JavaScript dates to
    // milliseconds since epoch to make them match the DateTimeAxis values
    function toMsecsSinceEpoch(date) {
        var msecs = date.getTime();
        return msecs;
    }
}

Das folgende Diagramm wurde unter Verwendung einer „CategoryAxis“ erstellt, um die Daten verständlicher zu machen.

Screenshot, der ein Beispiel für ein Liniendiagramm zeigt, bei dem die y-Achse in die Kategorien „kritisch“, „niedrig“, „mittel“, „hoch“ und „extrem hoch“ unterteilt ist

ChartView {
    title: "Numerical Data for Dummies"
    anchors.fill: parent
    legend.visible: false
    antialiasing: true

    LineSeries {
        axisY: CategoryAxis {
            min: 0
            max: 30
            CategoryRange {
                label: "critical"
                endValue: 2
            }
            CategoryRange {
                label: "low"
                endValue: 4
            }
            CategoryRange {
                label: "normal"
                endValue: 7
            }
            CategoryRange {
                label: "high"
                endValue: 15
            }
            CategoryRange {
                label: "extremely high"
                endValue: 30
            }
        }

        XYPoint { x: 0; y: 4.3 }
        XYPoint { x: 1; y: 4.1 }
        XYPoint { x: 2; y: 4.7 }
        XYPoint { x: 3; y: 3.9 }
        XYPoint { x: 4; y: 5.2 }
    }
}

© 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.