Qt Graphs Migración desde Qt Charts

La API y la funcionalidad entre Qt Charts y Qt Graphs son ligeramente diferentes. Este artículo explica las diferencias entre la API de ambos Qt Charts a Qt Graphs:

Declaración de importación QML

La sentencia import en Qt Charts:

import QtCharts

debe cambiarse a

import QtGraphs

para Qt Graphs.

Inclusión de módulos en CMake

La inclusión en Qt Charts:

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

debe cambiarse por:

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

para Qt Graphs.

Inclusión del módulo Qmake

La inclusión en Qt Charts:

QT += charts

debe cambiarse a:

QT += graphs

para Qt Graphs.

Características que faltan en Qt Graphs

Estas características faltan en Qt Graphs en la versión 6.8:

Qt Graphs Widgets
Gráficos de velas
Gráfico de cajas y bigotes
Títulos y leyendas
Eje de valor logarítmico
Vista de gráfico polar

API de temas

La tematización entre gráficos 2D y 3D está unificada, para la configuración del tema, véase GraphsTheme.

El esquema de color genérico de todo el gráfico está ahora controlado por una propiedad color scheme, y los colores de las series por una propiedad theme. Si el esquema de color no se establece explícitamente, seguirá la tematización del escritorio (Claro/Oscuro).

Enums

En Qt Graphs 2D, todos los enums se implementan como enums de ámbito, por ejemplo, para el PieSlice.LabelOutside en Qt Charts, el enum correspondiente en Qt Graphs 2D es PieSlice.LabelPosition.Outside.

Migración de series de gráficos en QML

En esta sección se dan ejemplos de cómo migrar el código de Qt Charts a Qt Graphs 2D.

Migración de series Area

Estos ejemplos de código implementan gráficos similares:

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

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

Migración de series de barras

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

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

Migrando serie Donut

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

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

Serie Migrating Line

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

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

Serie Migrating Pie

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

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

Migración de series Scatter

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

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

Migración de series Spline

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

Con 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 Clases 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.