Back to Qt.io
Contact Us Blog Download Qt
本页内容

Qt Graphs 2D C++ 类

Qt Graphs 从Qt Charts

Qt Charts 与Qt Graphs 之间的 API 和功能存在细微差异。本文将说明Qt Charts 与Qt Graphs 之间 API 的差异：

QML 导入语句

Qt Charts 中的导入语句：

import QtCharts

必须修改为：

import QtGraphs

（适用于Qt Graphs ）。

CMake 模块包含

Qt Charts 中的包含语句：

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

必须修改为：

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

针对Qt Graphs 。

Qmake 模块的引入

Qt Charts 中的包含语句：

QT += charts

必须修改为：

QT += graphs

针对Qt Graphs 。

xml-ph-0000@deepl.internal 中缺失的功能Qt Graphs

在 6.8 版本的Qt Graphs 中缺少以下功能：

  • Qt Graphs 小部件
  • K线图
  • 箱线图
  • 标题和图例
  • 对数值轴
  • 极坐标图视图

主题 API

2D 和 3D 图表的主题设置已实现统一，有关主题设置的详细信息，请参阅GraphsTheme 。

整个图表的通用配色方案现由color scheme 属性控制，而系列颜色则由theme 属性控制。如果未显式设置配色方案，则将遵循桌面主题（浅色/深色）。

枚举

在Qt Graphs 2D 中，所有枚举均实现为作用域枚举，例如，对于Qt Charts 中的PieSlice.LabelOutside ，Qt Graphs 2D 中的对应枚举为PieSlice.LabelPosition.Outside 。

在 QML 中迁移图表系列

本节提供了将使用Qt Charts 的代码迁移到Qt Graphs 2D的示例。

迁移面积系列

以下代码示例实现了类似的图表：

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

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

迁移柱形图系列

使用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] }
    }
}

使用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] }
    }
}

Donut 系列的迁移

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

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

Line系列迁移

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

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

迁移折线图系列

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

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

使用xml-ph-0000@deepl.internal：

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

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

迁移样条序列

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

使用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 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.