Qt Charts Présentation

Qt Charts permet de créer des interfaces utilisateur élégantes, interactives et centrées sur les données. Qt Charts utilise le Graphics View Framework pour faciliter l’intégration. Les composants de graphiques peuvent être utilisés en tant qu’objets QWidget ou QGraphicsWidget, ou encore en tant que types QML.

La classe QChart gère la représentation graphique de différents types de séries et d’autres objets liés aux graphiques, tels que la légende et les axes. QChart est un « QGraphicsWidget » (objet de visualisation) qui peut être affiché dans un « QGraphicsScene » (objet de visualisation). Une solution plus simple consiste à afficher un graphique dans une mise en page en utilisant la classe de commodité QChartView à la place de QChart. En QML, les graphiques sont affichés à l'aide du type ChartView.

Certains composants de graphique peuvent également être présentés sous forme de graphiques polaires à l’aide de la classe QPolarChart, qui est une spécialisation de la classe QChart, ou du type QML PolarChartView, qui est une spécialisation du type ChartView.

L’apparence des graphiques peut être personnalisée à l’aide de thèmes, en modifiant les couleurs et les propriétés, en masquant des composants du graphique ou en animant les graphiques.

Les mappeurs de modèle permettent d’utiliser un modèle de données dérivé de la classe ` QAbstractItemModel ` comme source de données pour un graphique. Les mappeurs de modèle peuvent être horizontaux ou verticaux.

Types de graphiques

Le module Qt Charts fournit les types de graphiques suivants :

• Graphiques linéaires et splines
• Graphiques en aires et graphiques de nuages de points
• Graphiques à barres
• Graphiques circulaires
• Graphiques en boîte à moustaches
• Graphiques en chandeliers
• Graphiques polaires

Chaque type de graphique est représenté par une classe dérivée de QAbstractSeries ou un type dérivé de AbstractSeries en QML. Les graphiques sont créés en utilisant une instance d'une classe de série et en l'ajoutant à une instance de QChart ou de ChartView.

Par exemple :

QLineSeries* series = new QLineSeries();
series->add(0, 6);
series->add(2, 4);
...
chartView->chart()->addSeries(series);
chartView->chart()->createDefaultAxes();

Ou, en QML :

ChartView {
    id: chart
    title: "Top-5 car brand shares in Finland"
    anchors.fill: parent
    legend.alignment: Qt.AlignBottom
    antialiasing: true

    property variant othersSlice: 0

    PieSeries {
        id: pieSeries
        PieSlice { label: "Volkswagen"; value: 13.5 }
        PieSlice { label: "Toyota"; value: 10.9 }
        PieSlice { label: "Ford"; value: 8.6 }
        PieSlice { label: "Skoda"; value: 8.2 }
        PieSlice { label: "Volvo"; value: 6.8 }
    }

    Component.onCompleted: {
        // You can also manipulate slices dynamically, like append a slice or set a slice exploded
        othersSlice = pieSeries.append("Others", 52.0);
        pieSeries.find("Volkswagen").exploded = true;
    }
}

import QtQuick

Vous pouvez combiner différents types de séries dans un même graphique.

Graphiques linéaires et splines

Les graphiques linéaires et splines présentent les données sous la forme d’une série de points de données reliés par des lignes. Dans un graphique linéaire, les points de données sont reliés par des lignes droites, tandis que dans un graphique spline, ils sont reliés par une spline. La spline est dessinée à l’aide de ` QPainterPath`.

Un graphique linéaire est implémenté à l'aide de la classe QLineSeries ou du type QML LineSeries.

Un graphique spline est implémenté à l’aide de la classe QSplineSeries qui hérite de QLineSeries ou du type SplineSeries qui hérite de LineSeries.

Pour plus d’informations, consultez les sections Création de graphiques linéaires et Création de graphiques splines. Pour un exemple de combinaison d’un graphique linéaire et d’un graphique à barres utilisant un axe commun, consultez la section Combinaison de graphiques linéaires et à barres.

Graphiques en aires et graphiques de nuages de points

Les graphiques en aires présentent les données sous la forme d’une aire délimitée par deux lignes, tandis que les graphiques en nuages de points présentent les données sous la forme d’un ensemble de points.

Un graphique en aires est implémenté à l’aide de la classe QAreaSeries ou du type QML AreaSeries. Par défaut, l’axe des x sert de limite d’un côté et QLineSeries ou LineSeries de l’autre. Cependant, vous pouvez utiliser QLineSeries ou LineSeries comme limites des deux côtés.

Un graphique de nuages de points s’implémente à l’aide de la classe QScatterSeries ou du type QML ScatterSeries.

Pour plus d’informations, consultez les sections Création de graphiques en aires et Création de graphiques de dispersion.

Graphiques à barres

Un graphique à barres présente les données sous forme de barres horizontales ou verticales regroupées par catégorie. La classe QBarSet et le type QML BarSet représentent un ensemble de barres dans un graphique à barres. La classe QAbstractBarSeries est une classe parente abstraite pour toutes les classes de séries de barres, et le type AbstractBarSeries est le type parent des types de séries de barres. Le type de série détermine la manière dont les données sont présentées.

La classe QBarSeries et le type QML BarSeries présentent les données sous forme de barres verticales regroupées par catégorie. De même, la classe QHorizontalBarSeries et le type QML HorizontalBarSeries présentent les données sous forme de barres horizontales.

La classe QStackedBarSeries et le type StackedBarSeries présentent une série de données sous forme de barres empilées verticalement, à raison d’une barre par catégorie. La classe et le type horizontaux correspondants sont respectivement QHorizontalStackedBarSeries et HorizontalStackedBarSeries.

La classe QPercentBarSeries et le type QML PercentBarSeries présentent une série de données classées par catégorie sous forme de pourcentage de chaque catégorie. La classe et le type horizontaux correspondants sont respectivement QHorizontalPercentBarSeries et HorizontalPercentBarSeries.

Pour plus d’informations, consultez les sections Création de graphiques à barres, Création de graphiques à barres empilées horizontales, Création de graphiques à barres horizontales et Création de graphiques à barres de pourcentage horizontales.

Diagrammes circulaires

Les graphiques circulaires présentent les données sous la forme d’un cercle composé de parts. Le cercle est implémenté à l’aide de la classe QPieSeries ou du type QML PieSeries, et les parts sont ajoutées à l’aide de la classe QPieSlice ou du type QML PieSlice.

Le graphique circulaire peut être transformé en graphique en anneau en spécifiant une taille de trou comprise entre 0,0 et 1,0.

Pour plus d’informations, consultez les sections « Galerie de graphiques avec widgets », « Création d’un graphique en anneau de répartition » et « Création de graphiques en anneau imbriqués ».

Diagrammes en boîte à moustaches

Les graphiques en boîte à moustaches présentent les données sous forme de quartiles prolongés par des moustaches qui illustrent la variabilité des valeurs. Les éléments d’une série de diagrammes en boîte sont regroupés par catégorie, de la même manière que les ensembles de barres dans les séries de barres. Pour chaque élément d’un diagramme en boîte et à moustaches, la valeur extrême inférieure, le quartile inférieur, la médiane, le quartile supérieur et la valeur extrême supérieure sont spécifiés.

Un graphique en boîte à moustaches est implémenté à l’aide des classes `QBoxPlotSeries` et `QBoxSet` ou des types QML `BoxPlotSeries` et `BoxSet`.

Pour plus d’informations, consultez la section Création de diagrammes en boîte à moustaches.

Graphiques en chandeliers

Les graphiques en chandeliers présentent une série de données sous forme de chandeliers.

Un graphique en chandeliers est implémenté à l’aide des classes `QCandlestickSeries` et `QCandlestickSet` ou des types QML `CandlestickSeries` et `CandlestickSet`.

Graphiques polaires

Les graphiques polaires présentent les données sous la forme d’un graphique circulaire, où le placement des données est basé sur l’angle et la distance par rapport au centre du graphique, le pôle.

La classe QPolarChart est une spécialisation de la classe QChart. Elle prend en charge les séries de lignes, de splines, de zones et de nuages de points, ainsi que tous les types d’axes pris en charge par celles-ci. L’axe peut être utilisé soit comme axe radial, soit comme axe angulaire. En QML, le type correspondant est PolarChartView.

Pour plus d’informations, consultez les sections Création de graphiques polaires et Utilisation des graphiques polaires avec QML.

Axes

Qt Charts prend en charge les types d’axes suivants :

• Axe des valeurs
• Axe des catégories
• Axe des catégories de barres
• Axe date-heure
• Axe de valeurs logarithmique

Un axe peut être configuré pour afficher une ligne avec des repères, des lignes de quadrillage et des ombrages. Les valeurs de l'axe sont tracées aux emplacements des repères. Tous les types d'axes sont des spécialisations de la classe QAbstractAxis ou du type QML AbstractAxis.

Un axe de valeurs ajoute des valeurs réelles à l’axe d’un graphique. Il est implémenté à l’aide de la classe QValueAxis ou du type QML ValueAxis.

Un axe de catégories est implémenté à l’aide de la classe QCategoryAxis ou du type QML CategoryAxis. Il comporte des plages nommées et des largeurs de plage ajustables.

L’axe de catégories à barres est similaire à un axe de catégories, mais la largeur des plages est identique pour toutes les plages. Un axe de catégories à barres est implémenté à l’aide de la classe QBarCategoryAxis ou du type QML BarCategoryAxis.

Un axe date-heure ajoute des dates et des heures à l’axe d’un graphique. Il est implémenté à l’aide de la classe QDateTimeAxis ou du type QML DateTimeAxis.

Un axe logarithmique ajoute une échelle logarithmique à l’axe d’un graphique. Une échelle logarithmique est une échelle non linéaire basée sur des ordres de grandeur, de sorte que chaque graduation sur l’axe correspond à la graduation précédente multipliée par une valeur. Un axe logarithmique est implémenté à l’aide de la classe QLogValueAxis ou du type QML LogValueAxis.

Il est possible de définir plusieurs axes pour un même graphique. Les axes peuvent être placés en bas, en haut, à gauche ou à droite du graphique. De plus, les axes peuvent être de types différents. Cependant, le mélange de types d’axes qui entraînerait des domaines différents n’est pas pris en charge, comme le fait de spécifier à la fois QValueAxis et QLogValueAxis pour une même orientation.

Pour plus d’informations, consultez les sections « Graphiques linéaires avec axes de date et d’heure », « Utilisation d’axes de valeurs logarithmiques », « Utilisation de plusieurs axes » et « Utilisation d’axes avec QML ».

Légende

Une légende est un objet graphique qui affiche la légende d’un graphique. Les objets de légende ne peuvent être ni créés ni supprimés, mais ils peuvent être référencés via la classe QChart ou le type QML ChartView. L’état de la légende est mis à jour par QChart ou ChartView lorsque les séries changent.

Une légende peut être positionnée en dessous ou au-dessus du graphique, ainsi qu’à sa gauche ou à sa droite. Par défaut, la légende est rattachée à la vue du graphique, mais elle peut être détachée pour devenir un élément graphique distinct pouvant être déplacé librement.

Il est possible de masquer soit des marqueurs individuels de la légende, soit la légende dans son ensemble.

Les marqueurs de légende peuvent être modifiés à l’aide de la classe de base QLegendMarker et des sous-classes correspondant à chaque type de série : QAreaLegendMarker, QBarLegendMarker, QBoxPlotLegendMarker, QCandlestickLegendMarker et QXYLegendMarker.

En QML, les marqueurs de légende peuvent être modifiés en créant des légendes personnalisées, comme l’illustre l’exemple « Personnalisation des légendes ».

Interaction avec les graphiques

Les utilisateurs finaux peuvent interagir avec les graphiques en y ajoutant dynamiquement des valeurs, en explorant les données, en effectuant des zooms avant et arrière, en faisant défiler les graphiques, ainsi qu’en cliquant sur des éléments des graphiques ou en y passant la souris.

Tracer des données de manière dynamique

Il est possible d’ajouter des données aux graphiques de manière dynamique et de faire défiler automatiquement la vue du graphique pour afficher les nouvelles données.

Pour plus d’informations, consultez la section Création de graphiques spline.

Exploration des données

Les effets d'exploration peuvent être mis en œuvre sur des graphiques à barres ou circulaires, par exemple. Lorsque les utilisateurs sélectionnent un élément dans le graphique, une vue plus détaillée de cet élément s'affiche. Cela s'effectue en supprimant la première série et en en ajoutant une autre.

Pour plus d’informations, consultez la section « Mise en œuvre de l’exploration ».

Zoom et défilement

Les utilisateurs peuvent utiliser le clavier pour zoomer et faire défiler les graphiques. Ils peuvent faire défiler les graphiques à l’aide des touches fléchées et zoomer ou dézoomer à l’aide des touches plus et moins. De plus, des « QRubberBand » peuvent être utilisés pour sélectionner la zone à agrandir.

Sur les appareils tactiles, des gestes peuvent être utilisés pour effectuer un panoramique et zoomer.

Pour plus d’informations, consultez l’exemple « Ligne de zoom ».

Clics et survols

Vous pouvez associer des emplacements aux signaux émis lorsque les utilisateurs finaux cliquent sur des éléments des graphiques ou y passent la souris. Cela vous permet d’ajouter des éléments, tels que des légendes, aux graphiques.

Pour plus d’informations, consultez la section « Dessiner une légende par-dessus un graphique ».

Thèmes

Un thème est un ensemble intégré de paramètres liés au style de l'interface utilisateur, appliqués à tous les éléments visuels d'un graphique, tels que les couleurs, les stylos, les pinceaux et les polices des séries, ainsi que les axes, le titre et la légende.

Qt Charts comprend les thèmes prédéfinis suivants :

• Thème clair, qui est le thème par défaut
• Thème bleu céruléen
• Thème sombre
• Thème « brun sable »
• Thème bleu du système de couleurs naturelles (NCS)
• Thème à contraste élevé
• Thème bleu glacé
• Thème Qt

Les thèmes peuvent être personnalisés en modifiant les couleurs, les stylos, les pinceaux et les polices. De nouveaux thèmes peuvent être ajoutés en modifiant le code source de l'Qt Charts.

Pour plus d’informations, consultez la section Création de graphiques avec des thèmes.