目录
-
- 引言
- [🎯 运行效果预览](#🎯 运行效果预览)
- [📚 相关系列文章](#📚 相关系列文章)
- 四种坐标轴详解与代码实践
- 总结
- 源码下载
- 参考
引言
在使用QML进行数据可视化开发时，QtCharts模块提供了强大而灵活的图表功能。其中坐标轴是图表的核心组成部分之一，它决定了数据如何在图表中被展示和解读。合理选择和配置坐标轴类型，不仅能提升图表的可读性，还能更准确地反映数据特征。
本文将详细介绍 QtCharts 中的四种常用坐标轴类型：
- ValueAxis：数值坐标轴
- LogValueAxis：对数坐标轴
- DateTimeAxis：日期时间坐标轴
- BarCategoryAxis：分类坐标轴
🎯 运行效果预览
📚 相关系列文章
四种坐标轴详解与代码实践
1. 数值坐标轴（ValueAxis）
✅ 适用场景 用于表示连续的数值数据，如温度、速度、价格等线性变化的数据。
📊 效果图 :
示例代码
qml
import QtQuick
import QtQuick.Layouts
import QtCharts
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
ChartView {
id: chartView
title: "数值坐标轴示例"
titleFont.bold: true
titleFont.pointSize: 14
anchors.fill: parent
antialiasing: true
ValueAxis {
id: valueAxisX
min: 0
max: 4
titleText: "X Title"
}
ValueAxis {
id: valueAxisY
min: 0
max: 16
titleText: "Y Title"
}
LineSeries {
name: "line"
XYPoint { x: 0; y: 0 }
XYPoint { x: 1; y: 1 }
XYPoint { x: 2; y: 4 }
XYPoint { x: 3; y: 9 }
XYPoint { x: 4; y: 16 }
axisX: valueAxisX
axisY: valueAxisY
}
}
}说明
ValueAxis支持设置最小值min和最大值max。 - 可通过titleText设置坐标轴标题。LineSeries使用axisX和axisY绑定到对应轴。
2. 对数坐标轴（LogValueAxis）
✅ 适用场景 当数据跨度极大（如从1到10000），使用对数坐标可以更好地展示变化趋势，常用于科学计算、信号处理等领域。
📊 效果图：
示例代码
qml
import QtQuick
import QtQuick.Layouts
import QtCharts
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
ChartView {
id: chartView
title: "对数坐标轴示例"
titleFont.bold: true
titleFont.pointSize: 14
anchors.fill: parent
antialiasing: true
LogValueAxis {
id: valueAxisX
min: 1
max: 100
base: 10
labelFormat: "%.0f"
titleText: "X Title"
}
LogValueAxis {
id: valueAxisY
min: 1
max: 10000
base: 10
labelFormat: "%.0f"
titleText: "Y Title"
}
LineSeries {
name: "line"
XYPoint { x: 1; y: 1 }
XYPoint { x: 10; y: 100 }
XYPoint { x: 100; y: 10000 }
axisX: valueAxisX
axisY: valueAxisY
}
}说明
LogValueAxis的base属性设置对数的底数（常用为10）。labelFormat控制刻度标签的显示格式。- 注意：对数坐标轴的最小值不能为0或负数。
3. 日期坐标轴（DateTimeAxis）
✅ 适用场景 适用于时间序列数据，如股票走势、日志记录、传感器采样等。
📊 效果图：
示例代码
qml
import QtQuick
import QtQuick.Layouts
import QtCharts
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
ChartView {
id: chartView
title: "日期坐标轴示例"
titleFont.bold: true
titleFont.pointSize: 14
anchors.fill: parent
antialiasing: true
DateTimeAxis {
id: valueAxisX
min: new Date(2023, 0, 1)
max: new Date(2023, 3, 1)
format: "MMM yyyy"
tickCount: 4
titleText: "X Title"
}
ValueAxis {
id: valueAxisY
min: 0
max: 16
titleText: "Y Title"
}
LineSeries {
name: "line"
// 注意：JavaScript 的 Date 对象月份是从 0 开始的
XYPoint { x: new Date(2023, 0, 1).getTime(); y: 10 }
XYPoint { x: new Date(2023, 1, 1).getTime(); y: 15 }
XYPoint { x: new Date(2023, 2, 1).getTime(); y: 12 }
XYPoint { x: new Date(2023, 3, 1).getTime(); y: 18 }
axisX: valueAxisX
axisY: valueAxisY
}
}
}说明
DateTimeAxis使用 JavaScript 的Date对象。getTime()返回时间戳（毫秒），用于XYPoint的x值。format控制时间显示格式，tickCount设置刻度数量。
4. 分类坐标轴（BarCategoryAxis）
✅ 适用场景 用于非数值类的离散数据，如月份、地区、产品类别等，常见于柱状图、条形图。
📊 效果图：
示例代码
qml
import QtQuick
import QtQuick.Layouts
import QtCharts
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
ChartView {
id: chartView
title: "分类坐标轴示例"
titleFont.bold: true
titleFont.pointSize: 14
anchors.fill: parent
antialiasing: true
BarCategoryAxis {
id: valueAxisX
categories: ["一月", "二月", "三月", "四月"]
titleText: "X Title"
}
ValueAxis {
id: valueAxisY
min: 0
max: 20
titleText: "Y Title"
}
BarSeries {
name: "分类坐标轴示例"
axisX: valueAxisX
axisY: valueAxisY
BarSet {
label: "bar"
values: [10, 15, 12, 18]
}
}
}
}说明
BarCategoryAxis使用字符串数组作为分类标签。BarSeries与BarSet配合使用，适合柱状图。- 每个
BarSet的values顺序必须与categories一一对应。
总结
| 坐标轴类型 | 适用场景 | 典型图表 |
|---|---|---|
| ValueAxis | 线性数值数据 | 折线图、散点图 |
| LogValueAxis | 跨数量级的数据（如指数增长） | 科学图表、信号图 |
| DateTimeAxis | 时间序列数据 | 股价图、日志图 |
| BarCategoryAxis | 离散分类数据 | 柱状图、条形图 |
源码下载
Git Code 下载链接：Charts 坐标轴示例
