Qt Graphs Migration depuis Qt Charts

L'API et les fonctionnalités de Qt Charts et Qt Graphs présentent de légères différences. Cet article explique les différences entre l'API de Qt Charts et celle de Qt Graphs:

Instruction d'importation QML

La directive d'importation dans Qt Charts:

import QtCharts

doit être remplacée par :

import QtGraphs

pour Qt Graphs.

Inclusion du module CMake

L'inclusion dans Qt Charts:

find_package(Qt6 REQUIRED COMPONENTS Charts)
target_link_libraries(mytarget PRIVATE Qt6::Charts)

doit être remplacée par :

find_package(Qt6 REQUIRED COMPONENTS Graphs)
target_link_libraries(mytarget PRIVATE Qt6::Graphs)

pour Qt Graphs.

Inclusion du module Qmake

L'inclusion dans Qt Charts:

QT += charts

doit être remplacée par :

QT += graphs

pour Qt Graphs.

Fonctionnalités manquantes dans Qt Graphs

Ces fonctionnalités sont absentes d'Qt Graphs dans la version 6.8 :

Qt Graphs Widgets
Graphiques en chandeliers
Graphique en boîte à moustaches
Titres et légendes
Axe des valeurs logarithmiques
Affichage sous forme de graphique polaire

API de thèmes

La gestion des thèmes est unifiée entre les graphiques 2D et 3D. Pour les paramètres de thème, consultez GraphsTheme.

La palette de couleurs générique de l’ensemble du graphique est désormais contrôlée par la propriété color scheme, et les couleurs des séries par la propriété theme. Si la palette de couleurs n’est pas explicitement définie, elle suivra le thème du bureau (clair/foncé).

Énumérations

Dans Qt Graphs 2D, toutes les énumérations sont implémentées sous forme d’énumérations de portée limitée. Par exemple, pour la propriété PieSlice.LabelOutside de Qt Charts, l’énumération correspondante dans Qt Graphs 2D est PieSlice.LabelPosition.Outside.

Migration des séries de graphiques dans QML

Cette section fournit des exemples illustrant comment migrer votre code utilisant Qt Charts vers Qt Graphs 2D.

Migration des séries de type « Area »

Ces exemples de code implémentent des graphiques similaires :

Avec Qt Charts:

ChartView {
    anchors.fill: parent
    ValueAxis {
        id: valueAxisX
        max: 8
    }

    ValueAxis {
        id: valueAxisY
        max: 4
    }

    AreaSeries {
        axisX: valueAxisX
        axisY: valueAxisY
        upperSeries: LineSeries {
            XYPoint { x: 0; y: 2 }
            XYPoint { x: 1; y: 3.5 }
            XYPoint { x: 2; y: 3.8 }
        }
        lowerSeries: LineSeries {
            XYPoint { x: 0.4; y: 1.5 }
            XYPoint { x: 1; y: 2.5 }
            XYPoint { x: 2.4; y: 3 }
        }
    }
}

Avec Qt Graphs:

GraphsView {
    anchors.fill: parent
    axisX: ValueAxis {
        id: xAxis
        max: 8
        tickInterval: 2.0
    }

    axisY: ValueAxis {
        id: yAxis
        max: 4
        tickInterval: 1.0
    }

    AreaSeries {
        upperSeries: LineSeries {
            XYPoint { x: 0; y: 2 }
            XYPoint { x: 1; y: 3.5 }
            XYPoint { x: 2; y: 3.8 }
        }

        lowerSeries: LineSeries {
            XYPoint { x: 0.4; y: 1.5 }
            XYPoint { x: 1; y: 2.5 }
            XYPoint { x: 2.4; y: 3 }
        }
    }
}

Migration des séries de graphiques à barres

Avec Qt Charts:

import QtQuick
import QtCharts

ChartView {
    BarSeries {
        id: mySeries
        axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }
        BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
        BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
        BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
    }
}

Avec Qt Graphs:

GraphsView {
    axisX: BarCategoryAxis { categories: ["2007", "2008", "2009", "2010", "2011", "2012" ] }

    BarSeries {
        id: mySeries
        BarSet { label: "Bob"; values: [2, 2, 3, 4, 5, 6] }
        BarSet { label: "Susan"; values: [5, 1, 2, 4, 1, 7] }
        BarSet { label: "James"; values: [3, 5, 8, 13, 5, 8] }
    }
}

Migration de la série Donut

Avec Qt Charts:

import QtQuick
import QtCharts

ChartView {
    PieSeries {
        id: pieOuter
        size: 0.96
        holeSize: 0.7
        PieSlice { id: slice; label: "Alpha"; value: 19511; color: "#99CA53" }
        PieSlice { label: "Epsilon"; value: 11105; color: "#209FDF" }
        PieSlice { label: "Psi"; value: 9352; color: "#F6A625" }
    }

    PieSeries {
        id: pieInner
        size: 0.7
        holeSize: 0.25

        PieSlice { label: "Materials"; value: 10334; color: "#B9DB8A" }
        PieSlice { label: "Employee"; value: 3066; color: "#DCEDC4" }
        PieSlice { label: "Logistics"; value: 6111; color: "#F3F9EB" }

        PieSlice { label: "Materials"; value: 7371; color: "#63BCE9" }
        PieSlice { label: "Employee"; value: 2443; color: "#A6D9F2" }
        PieSlice { label: "Logistics"; value: 1291; color: "#E9F5FC" }

        PieSlice { label: "Materials"; value: 4022; color: "#F9C36C" }
        PieSlice { label: "Employee"; value: 3998; color: "#FCE1B6" }
        PieSlice { label: "Logistics"; value: 1332; color: "#FEF5E7" }
    }

    Component.onCompleted: {
        // Set the common slice properties dynamically for convenience
        for (var i = 0; i < pieOuter.count; i++) {
            pieOuter.at(i).labelPosition = PieSlice.LabelOutside;
            pieOuter.at(i).labelVisible = true;
            pieOuter.at(i).borderWidth = 3;
        }
        for (var i = 0; i < pieInner.count; i++) {
            pieInner.at(i).labelPosition = PieSlice.LabelInsideNormal;
            pieInner.at(i).labelVisible = true;
            pieInner.at(i).borderWidth = 2;
        }
    }
}

Avec l'Qt Graphs:

GraphsView {
    PieSeries {
        id: pieOuter
        pieSize: 0.96
        holeSize: 0.7
        PieSlice { id: slice; label: "Alpha"; value: 19511; color: "#99CA53" }
        PieSlice { label: "Epsilon"; value: 11105; color: "#209FDF" }
        PieSlice { label: "Psi"; value: 9352; color: "#F6A625" }
    }

    PieSeries {
        id: pieInner
        pieSize: 0.7
        holeSize: 0.25

        PieSlice { label: "Materials"; value: 10334; color: "#B9DB8A" }
        PieSlice { label: "Employee"; value: 3066; color: "#DCEDC4" }
        PieSlice { label: "Logistics"; value: 6111; color: "#F3F9EB" }

        PieSlice { label: "Materials"; value: 7371; color: "#63BCE9" }
        PieSlice { label: "Employee"; value: 2443; color: "#A6D9F2" }
        PieSlice { label: "Logistics"; value: 1291; color: "#E9F5FC" }

        PieSlice { label: "Materials"; value: 4022; color: "#F9C36C" }
        PieSlice { label: "Employee"; value: 3998; color: "#FCE1B6" }
        PieSlice { label: "Logistics"; value: 1332; color: "#FEF5E7" }
    }

    Component.onCompleted: {
        // Set the common slice properties dynamically for convenience
        for (var i = 0; i < pieOuter.count; i++) {
            pieOuter.at(i).labelPosition = PieSlice.LabelPosition.Outside;
            pieOuter.at(i).labelVisible = true;
            pieOuter.at(i).borderWidth = 3;
        }
        for (var i = 0; i < pieInner.count; i++) {
            pieInner.at(i).labelPosition = PieSlice.LabelPosition.InsideNormal;
            pieInner.at(i).labelVisible = true;
            pieInner.at(i).borderWidth = 2;
        }
    }
}

Migration de la série Line

Avec Qt Charts:

ChartView {
    LineSeries {
        XYPoint { x: 0; y: 0 }
        XYPoint { x: 1.1; y: 2.1 }
        XYPoint { x: 1.9; y: 3.3 }
        XYPoint { x: 2.1; y: 2.1 }
        XYPoint { x: 2.9; y: 4.9 }
        XYPoint { x: 3.4; y: 3.0 }
        XYPoint { x: 4.1; y: 3.3 }
    }
}

Avec Qt Graphs:

GraphsView {
    // Graphs don't calculate a visible range for axes.
    // You should define the visible range explicitly.
    axisX: ValueAxis {
        id: xAxis
        max: 4.1
    }
    axisY: ValueAxis {
        id: yAxis
        max: 4.9
    }

    LineSeries {
        XYPoint { x: 0; y: 0 }
        XYPoint { x: 1.1; y: 2.1 }
        XYPoint { x: 1.9; y: 3.3 }
        XYPoint { x: 2.1; y: 2.1 }
        XYPoint { x: 2.9; y: 4.9 }
        XYPoint { x: 3.4; y: 3.0 }
        XYPoint { x: 4.1; y: 3.3 }
    }
}

Migration de la série « Pie »

Avec Qt Charts:

ChartView {
    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: {
        othersSlice = pieSeries.append("Others", 52.0);
        pieSeries.find("Volkswagen").exploded = true;
    }
}

Avec Qt Graphs:

GraphsView {
    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: {
        othersSlice = pieSeries.append("Others", 52.0);
        pieSeries.find("Volkswagen").exploded = true;
    }
}

Migration de la série Scatter

Avec Qt Charts:

ChartView {
    ScatterSeries {
        XYPoint { x: 1.5; y: 1.5 }
        XYPoint { x: 1.5; y: 1.6 }
        XYPoint { x: 1.57; y: 1.55 }
        XYPoint { x: 1.8; y: 1.8 }
        XYPoint { x: 1.9; y: 1.6 }
        XYPoint { x: 2.1; y: 1.3 }
        XYPoint { x: 2.5; y: 2.1 }
    }
}

Avec Qt Graphs:

GraphsView {
    // Graphs don't calculate a visible range for axes.
    // You should define the visible range explicitly.
    ValueAxis {
        id: xyAxis
        min: 1.3
        max: 2.5
    }
    axisX: xyAxis
    axisY: xyAxis

    ScatterSeries {
        XYPoint { x: 1.5; y: 1.5 }
        XYPoint { x: 1.5; y: 1.6 }
        XYPoint { x: 1.57; y: 1.55 }
        XYPoint { x: 1.8; y: 1.8 }
        XYPoint { x: 1.9; y: 1.6 }
        XYPoint { x: 2.1; y: 1.3 }
        XYPoint { x: 2.5; y: 2.1 }
    }
}

Migration d'une série « Spline »

Avec Qt Charts:

ChartView {
    SplineSeries {
        name: "Spline"
        XYPoint { x: 0; y: 0.0 }
        XYPoint { x: 1.1; y: 3.2 }
        XYPoint { x: 1.9; y: 2.4 }
        XYPoint { x: 2.1; y: 2.1 }
        XYPoint { x: 2.9; y: 2.6 }
        XYPoint { x: 3.4; y: 2.3 }
        XYPoint { x: 4.1; y: 3.1 }
    }
}

Avec Qt Graphs:

GraphsView {
    ValueAxis {
        id: xyAxis
        max: 5
    }
    axisX: xyAxis
    axisY: xyAxis
    SplineSeries {
        XYPoint { x: 0; y: 0.0 }
        XYPoint { x: 1.1; y: 3.2 }
        XYPoint { x: 1.9; y: 2.4 }
        XYPoint { x: 2.1; y: 2.1 }
        XYPoint { x: 2.9; y: 2.6 }
        XYPoint { x: 3.4; y: 2.3 }
        XYPoint { x: 4.1; y: 3.1 }
    }
}

Qt Graphs 2D Classes C++

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.