HelloGraphs

HelloGraphs zeigt, wie man ein einfaches 2D-Balkendiagramm und ein Liniendiagramm erstellt.

In den folgenden Abschnitten wird beschrieben, wie man mit „ BarSeries “ ein Balkendiagramm und mit „ LineSeries “ ein Liniendiagramm erstellt.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über Command Palette aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

BarGraph

Das erste Diagramm im Beispiel ist ein Balkendiagramm. Die Erstellung beginnt mit einer „ GraphsView “-Komponente, bei der „ X axis “, „ Y axis “ und „ theme “ festgelegt werden. Die X-Achse ist ein „ BarCategoryAxis “ mit 3 Kategorien. Sowohl das vertikale Raster als auch die Achsenlinien sind ausgeblendet. Die Y-Achse ist ein „ ValueAxis “ mit einem sichtbaren Bereich zwischen 20 und 100. Hauptmarkierungen mit Beschriftungen werden alle 10 Werte angezeigt, unter Verwendung von tickInterval. Untermarkierungen werden alle 1 Werte angezeigt, unter Verwendung von subTickCount 9 , was bedeutet, dass zwischen jeder Hauptmarkierung 9 Untermarkierungen liegen. Zuletzt wird theme hinzugefügt, das sich gut für dunkle Hintergründe eignet. Dieses Design passt das Hintergrundraster 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 daraus ein Balkendiagramm zu machen, fügen Sie „ BarSeries “ hinzu.

BarSeries {
    ...

Anschließend werden Daten über ` BarSet` in ` BarSeries ` eingefügt. Es gibt drei Balken mit definierten benutzerdefinierten Eigenschaften für Farbe und Rahmen. Diese Eigenschaften überschreiben die möglichen ` seriesColors `, die für ` GraphsTheme` festgelegt wurden.

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

Liniendiagramm

Das zweite Diagramm des Beispiels ist ein Liniendiagramm. Auch hier wird zunächst ein „ GraphsView “-Element definiert. Um ein benutzerdefiniertes Erscheinungsbild zu erzielen, wird ein benutzerdefiniertes „ GraphsTheme “ erstellt. „ GraphsTheme “ bietet eine recht große Bandbreite an Anpassungsmöglichkeiten für das Hintergrundraster und die Achsen, die nach dem „ theme “ angewendet werden.

Das ` GraphsView ` definiert die für dieses Diagramm geeigneten ` axisX ` und ` axisY `.

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

Zur Visualisierung der Datenpunkte wird eine benutzerdefinierte „ Delegate “-Komponente verwendet.

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

Um daraus ein Liniendiagramm zu erstellen, fügen Sie eine „ LineSeries “ hinzu. Dadurch wird das „ pointDelegate “ so eingestellt, dass es die zuvor erstellte benutzerdefinierte „ Delegate “-Komponente verwendet. Datenpunkte werden mithilfe von „ 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 Linienserie ähnelt der ersten. Da es sich um die zweite ` LineSeries ` innerhalb des ` GraphsView` handelt, 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 auf code.qt.io