HelloGraphs

HelloGraphs explique comment créer un simple graphique à barres et un graphique 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

Vous pouvez exécuter l'exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple à l’adresse Examples. Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » depuis Command Palette, puis sélectionnez l'exemple dans la liste. Pour plus d'informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler 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 paramètres X axis, Y axis et theme. L’axe X est un « BarCategoryAxis » comportant 3 catégories. La grille verticale et les lignes d’axe sont masquées. L’axe Y est un « ValueAxis » dont la plage visible est comprise entre 20 et 100. Des graduations principales avec des libellés s’afficheront toutes les 10 valeurs à l’aide de tickInterval. Des graduations secondaires s’afficheront toutes les 1 valeurs à l’aide de subTickCount 9 , ce qui signifie qu’il y aura 9 graduations secondaires entre chaque graduation principale. Enfin, theme est ajouté à l’une d’entre elles, ce 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 libellés.

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 obtenir un graphique à barres, ajoutez un BarSeries.

BarSeries {
    ...

Les données sont ensuite ajoutées à BarSeries à l’aide de BarSet. Il y a 3 barres dont la couleur et les propriétés de bordure ont été personnalisées. Ces propriétés remplaceront les paramètres seriesColors éventuellement définis 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. Un GraphsTheme personnalisé est créé pour obtenir une apparence sur mesure. GraphsTheme offre un large éventail de possibilités de personnalisation pour la grille d’arrière-plan et les axes, qui s’appliquent après le theme.

L’élément ` GraphsView ` définit les propriétés ` axisX ` et ` axisY ` adaptées à 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 obtenir un graphique linéaire, ajoutez une « LineSeries ». Cela configure l’« pointDelegate » pour qu’elle utilise le composant « Delegate » personnalisé créé précédemment. Les points de données sont ajoutés à l’aide d’é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 de la deuxième LineSeries à l’intérieur de l’ GraphsView, la deuxième couleur de l’ seriesColors est automatiquement sélectionnée.

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 sur code.qt.io