Qt Graphs Migration à partir de Qt Charts

L'API et les fonctionnalités de Qt Charts et Qt Graphs sont légèrement différentes. Cet article explique les différences entre les API de Qt Charts et Qt Graphs:

Déclaration d'importation QML

L'instruction 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 manquantes dans Qt Graphs dans la version 6.8 :

Qt Graphs Widgets
Graphiques en chandeliers
Graphique en boîte et moustaches
Titres et légendes
Axe des valeurs logarithmiques
Vue polaire

API de thème

Le thème des graphiques 2D et 3D est unifié. Pour les paramètres du thème, voir GraphsTheme.

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

Enums

Dans Qt Graphs 2D, tous les enums sont implémentés en tant qu'enums scopés, par exemple, pour l'enum PieSlice.LabelOutside dans Qt Charts, l'enum correspondant dans Qt Graphs 2D est PieSlice.LabelPosition.Outside.

Migration de séries de graphiques en QML

Cette section donne des exemples de migration du code de Qt Charts vers Qt Graphs 2D.

Migration des séries de zones

Ces exemples de code mettent en œuvre 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 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] }
    }
}

Série de beignets migrateurs

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

Série de lignes migrantes

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

Série Migrating 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 de la 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 Classes 2D 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.