QML Charts组件之坐标轴示例

引言

在使用QML进行数据可视化开发时，QtCharts模块提供了强大而灵活的图表功能。其中坐标轴是图表的核心组成部分之一，它决定了数据如何在图表中被展示和解读。合理选择和配置坐标轴类型，不仅能提升图表的可读性，还能更准确地反映数据特征。

本文将详细介绍 QtCharts 中的四种常用坐标轴类型：

• ValueAxis：数值坐标轴
• LogValueAxis：对数坐标轴
• DateTimeAxis：日期时间坐标轴
• BarCategoryAxis：分类坐标轴

---

🎯 运行效果预览

---

📚 相关系列文章

在QML中使用Chart组件

---

四种坐标轴详解与代码实践

1. 数值坐标轴（ValueAxis）

✅ 适用场景 用于表示连续的数值数据，如温度、速度、价格等线性变化的数据。

📊 效果图 :

示例代码

import QtQuick
import QtQuick.Layouts
import QtChartsRectangle {Layout.fillWidth: trueLayout.fillHeight: trueChartView {id: chartViewtitle: "数值坐标轴示例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: trueValueAxis {id: valueAxisXmin: 0max: 4titleText: "X Title"}ValueAxis {id: valueAxisYmin: 0max: 16titleText: "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: valueAxisXaxisY: valueAxisY}}
}

说明

• ValueAxis 支持设置最小值 min 和最大值 max。 - 可通过 titleText 设置坐标轴标题。
• LineSeries 使用 axisX 和 axisY 绑定到对应轴。

---

2. 对数坐标轴（LogValueAxis）

✅ 适用场景 当数据跨度极大（如从1到10000），使用对数坐标可以更好地展示变化趋势，常用于科学计算、信号处理等领域。

📊 效果图：

示例代码

import QtQuick
import QtQuick.Layouts
import QtChartsRectangle {Layout.fillWidth: trueLayout.fillHeight: trueChartView {id: chartViewtitle: "对数坐标轴示例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: trueLogValueAxis {id: valueAxisXmin: 1max: 100base: 10labelFormat: "%.0f"titleText: "X Title"}LogValueAxis {id: valueAxisYmin: 1max: 10000base: 10labelFormat: "%.0f"titleText: "Y Title"}LineSeries {name: "line"XYPoint { x: 1; y: 1 }XYPoint { x: 10; y: 100 }XYPoint { x: 100; y: 10000 }axisX: valueAxisXaxisY: valueAxisY}}

说明

• LogValueAxis 的 base 属性设置对数的底数（常用为10）。
• labelFormat 控制刻度标签的显示格式。
• 注意：对数坐标轴的最小值不能为0或负数。

---

3. 日期坐标轴（DateTimeAxis）

✅ 适用场景 适用于时间序列数据，如股票走势、日志记录、传感器采样等。

📊 效果图：

示例代码

import QtQuick
import QtQuick.Layouts
import QtChartsRectangle {Layout.fillWidth: trueLayout.fillHeight: trueChartView {id: chartViewtitle: "日期坐标轴示例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: trueDateTimeAxis {id: valueAxisXmin: new Date(2023, 0, 1)max: new Date(2023, 3, 1)format: "MMM yyyy"tickCount: 4titleText: "X Title"}ValueAxis {id: valueAxisYmin: 0max: 16titleText: "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: valueAxisXaxisY: valueAxisY}}
}

说明

• DateTimeAxis 使用 JavaScript 的 Date 对象。
• getTime() 返回时间戳（毫秒），用于 XYPoint 的 x 值。
• format 控制时间显示格式，tickCount 设置刻度数量。

---

4. 分类坐标轴（BarCategoryAxis）

✅ 适用场景 用于非数值类的离散数据，如月份、地区、产品类别等，常见于柱状图、条形图。

📊 效果图：

示例代码

import QtQuick
import QtQuick.Layouts
import QtChartsRectangle {Layout.fillWidth: trueLayout.fillHeight: trueChartView {id: chartViewtitle: "分类坐标轴示例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: trueBarCategoryAxis {id: valueAxisXcategories: ["一月", "二月", "三月", "四月"]titleText: "X Title"}ValueAxis {id: valueAxisYmin: 0max: 20titleText: "Y Title"}BarSeries {name: "分类坐标轴示例"axisX: valueAxisXaxisY: valueAxisYBarSet {label: "bar"values: [10, 15, 12, 18]}}}
}

说明

• BarCategoryAxis 使用字符串数组作为分类标签。
• BarSeries 与 BarSet 配合使用，适合柱状图。
• 每个 BarSet 的 values 顺序必须与 categories 一一对应。

---

总结

坐标轴类型	适用场景	典型图表
ValueAxis	线性数值数据	折线图、散点图
LogValueAxis	跨数量级的数据（如指数增长）	科学图表、信号图
DateTimeAxis	时间序列数据	股价图、日志图
BarCategoryAxis	离散分类数据	柱状图、条形图

源码下载

Git Code 下载链接：Charts 坐标轴示例

---

参考

• ValueAxis 文档
• LogValueAxis 文档
• DateTimeAxis 文档
• BarCategoryAxis 文档