HelloGraphs

HelloGraphs montre comment créer un simple diagramme à barres et un diagramme linéaire en 2D.

Les sections suivantes décrivent comment créer un graphique à barres à l'aide de BarSeries et un graphique linéaire à l'aide de LineSeries.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

BarGraph

Le premier graphique de l'exemple est un graphique à barres. Sa création commence par un composant GraphsView, en définissant les composants X axis, Y axis et theme. L'axe des X est un BarCategoryAxis avec 3 catégories. La grille verticale et les lignes d'axe sont cachées. L'axe des Y est un ValueAxis avec une plage visible entre 20 et 100. Les principaux points avec leurs étiquettes seront affichés toutes les 10 valeurs à l'aide de tickInterval. Les sous-titres seront affichés toutes les 1 valeurs en utilisant subTickCount 9 , ce qui signifie qu'entre chaque tache majeure, il y aura 9 taches mineures. Enfin, theme est ajouté à un thème qui convient aux arrière-plans sombres. Ce thème ajuste la grille d'arrière-plan du graphique, les lignes d'axe et les étiquettes.

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

Pour en faire un graphique à barres, ajoutez BarSeries.

BarSeries {
    ...

Les données sont ensuite ajoutées à BarSeries à l'aide de BarSet. Il y a 3 barres avec des propriétés de couleur et de bordure personnalisées. Ces propriétés remplaceront les éventuelles propriétés de seriesColors définies pour GraphsTheme.

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

Graphique linéaire

Le deuxième graphique de l'exemple est un graphique linéaire. Il commence également par la définition d'un élément GraphsView. L'élément GraphsTheme est créé pour obtenir une apparence personnalisée. GraphsTheme offre un large éventail de possibilités de personnalisation pour la grille d'arrière-plan et les axes, qui sont appliqués après l'élément theme.

Le site GraphsView définit les éléments axisX et axisY qui conviennent à ce graphique.

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

Le composant personnalisé Delegate est utilisé pour visualiser les points de données.

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

Pour en faire un graphique linéaire, ajoutez un élément LineSeries. Cela permet à pointDelegate d'utiliser le composant personnalisé Delegate qui a été créé précédemment. Les points de données sont ajoutés à l'aide des éléments XYPoint.

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

La deuxième série de lignes est similaire à la première. Comme il s'agit du deuxième LineSeries à l'intérieur du GraphsView, la deuxième couleur du seriesColors est automatiquement choisie.

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

Exemple de projet @ code.qt.io