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.
缺少的功能Qt Graphs
Qt Graphs 在 6.8 版中缺少这些功能:
- Qt Graphs 小工具
- 烛台图表
- 方框-胡须图表
- 标题和图例
- 对数值轴
- 极坐标图视图
主题 API
统一了二维和三维图表的主题,有关主题设置,请参见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] } } }
移动甜甜圈系列
有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; } } }
迁移线系列
配有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; } }
迁移散射系列
有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 :
© 2025 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.