HelloGraphs

HelloGraphs zeigt, wie Sie ein einfaches 2D-Balken- und Liniendiagramm erstellen können.

In den folgenden Abschnitten wird beschrieben, wie Sie mit BarSeries ein Balkendiagramm und mit LineSeries ein Liniendiagramm erstellen.

Ausführen des Beispiels

Zum Ausführen des Beispiels von Qt Creatorauszuführen, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples aus. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

Balkendiagramm

Das erste Diagramm in diesem Beispiel ist ein Balkendiagramm. Die Erstellung beginnt mit einer GraphsView Komponente, wobei die X axis, Y axis und theme gesetzt werden. Die X-Achse ist ein BarCategoryAxis mit 3 Kategorien. Sowohl das vertikale Gitter als auch die Achsenlinien sind ausgeblendet. Die Y-Achse ist ein ValueAxis mit einem sichtbaren Bereich zwischen 20 und 100. Alle 10 Werte werden mit Hilfe von tickInterval als Hauptpunkte mit Beschriftung angezeigt. Unterticks werden alle 1 Werte mit subTickCount 9 angezeigt, was bedeutet, dass zwischen jedem Haupttick 9 Unterticks liegen. Schließlich wird theme zu einem Thema hinzugefügt, das für dunkle Hintergründe geeignet ist. Dieses Thema passt das Hintergrundgitter des Diagramms, die Achsenlinien und die Beschriftungen an.

GraphsView {
    anchors.fill: parent
    anchors.margins: 16
    axisX: BarCategoryAxis {
        categories: [2024, 2025, 2026]
        gridVisible: false
        subGridVisible: false
    }
    axisY: ValueAxis {
        min: 20
        max: 100
        tickInterval: 10
        subTickCount: 9
    }
    theme: GraphsTheme {
        colorScheme: GraphsTheme.ColorScheme.Dark
        theme: GraphsTheme.Theme.QtGreen
    }
    ...

Um ein Balkendiagramm zu erstellen, fügen Sie ein BarSeries hinzu.

BarSeries {
    ...

Dann werden die Daten über BarSet in BarSeries eingefügt. Es gibt 3 Balken mit definierten benutzerdefinierten Balkenfarben und Rahmeneigenschaften. Diese Eigenschaften haben Vorrang vor den möglichen seriesColors für die GraphsTheme.

BarSet {
    values: [82, 50, 75]
    borderWidth: 2
    color: "#373F26"
    borderColor: "#DBEB00"
}

Liniendiagramm

Das zweite Diagramm des Beispiels ist ein Liniendiagramm. Es beginnt ebenfalls mit der Definition eines GraphsView Elements. Um ein benutzerdefiniertes Aussehen zu erhalten, wird GraphsTheme erstellt. GraphsTheme bietet eine breite Palette von Anpassungsmöglichkeiten für das Hintergrundraster und die Achsen, die nach theme angewendet werden.

Die GraphsView definiert axisX und axisY, die für dieses Diagramm geeignet sind.

GraphsView {
    anchors.fill: parent
    anchors.margins: 16
    theme: GraphsTheme {
        readonly property color c1: "#DBEB00"
        readonly property color c2: "#373F26"
        readonly property color c3: Qt.lighter(c2, 1.5)
        colorScheme: GraphsTheme.ColorScheme.Dark
        seriesColors: ["#2CDE85", "#DBEB00"]
        grid.mainColor: c3
        grid.subColor: c2
        axisX.mainColor: c3
        axisY.mainColor: c3
        axisX.subColor: c2
        axisY.subColor: c2
        axisX.labelTextColor: c1
        axisY.labelTextColor: c1
    }
    axisX: ValueAxis {
        max: 5
        tickInterval: 1
        subTickCount: 9
        labelDecimals: 1
    }
    axisY: ValueAxis {
        max: 10
        tickInterval: 1
        subTickCount: 4
        labelDecimals: 1
    }
    ...

Die benutzerdefinierte Komponente Delegate wird für die Visualisierung der Datenpunkte verwendet.

component Marker : Rectangle {
    width: 16
    height: 16
    color: "#ffffff"
    radius: width * 0.5
    border.width: 4
    border.color: "#000000"
}

Damit es sich um ein Liniendiagramm handelt, fügen Sie ein LineSeries hinzu. Dadurch wird pointDelegate so eingestellt, dass die zuvor erstellte benutzerdefinierte Komponente Delegate verwendet wird. Die Datenpunkte werden mit XYPoint Elementen hinzugefügt.

LineSeries {
    id: lineSeries1
    width: 4
    pointDelegate: Marker { }
    XYPoint { x: 0; y: 0 }
    XYPoint { x: 1; y: 2.1 }
    XYPoint { x: 2; y: 3.3 }
    XYPoint { x: 3; y: 2.1 }
    XYPoint { x: 4; y: 4.9 }
    XYPoint { x: 5; y: 3.0 }
}

Die zweite Linienreihe ist ähnlich wie die erste. Da dies die zweite LineSeries innerhalb der GraphsView ist, wird automatisch die zweite Farbe aus der seriesColors ausgewählt.

LineSeries {
    id: lineSeries2
    width: 4
    pointDelegate: Marker { }
    XYPoint { x: 0; y: 5.0 }
    XYPoint { x: 1; y: 3.3 }
    XYPoint { x: 2; y: 7.1 }
    XYPoint { x: 3; y: 7.5 }
    XYPoint { x: 4; y: 6.1 }
    XYPoint { x: 5; y: 3.2 }
}

Beispielprojekt @ code.qt.io