QML Charts组件之坐标轴示例

引言

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

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

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

---

🎯 运行效果预览

---

📚 相关系列文章

在QML中使用Chart组件

---

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

1. 数值坐标轴（ValueAxis）

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

📊 效果图 :

示例代码

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），使用对数坐标可以更好地展示变化趋势，常用于科学计算、信号处理等领域。

📊 效果图：

示例代码

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）

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

📊 效果图：

示例代码

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. 分类坐标轴（CategoryAxis）

✅ 适用场景 需要将连续的数值区间映射成业务语义的场景。

📊 效果图：

示例代码

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

        CategoryAxis {
            id: valueAxisX
            min: 0
            max: 30
            CategoryRange {
                label: "前段"
                endValue: 10
            }
            CategoryRange {
                label: "中段"
                endValue: 20
            }
            CategoryRange {
                label: "后段"
                endValue: 30
            }
        }

        CategoryAxis {
            id: valueAxisY
            min: 0
            max: 40
            CategoryRange {
                label: "低"
                endValue: 10
            }
            CategoryRange {
                label: "中"
                endValue: 20
            }
            CategoryRange {
                label: "高"
                endValue: 30
            }
            CategoryRange {
                label: "极端"
                endValue: 40
            }
        }

        LineSeries {
            name: "line"
            XYPoint { x: 0; y: 3 }
            XYPoint { x: 4; y: 8 }
            XYPoint { x: 12; y: 18 }
            XYPoint { x: 24; y: 22 }
            XYPoint { x: 30; y: 25 }

            axisX: valueAxisX
            axisY: valueAxisY
        }
    }
}

说明

该代码演示了如何用 Charts组件中 的 CategoryAxis对象 把纯数字坐标轴转换成业务语言，既保留数值计算能力，又提升用户可读性，适用于任何需要分段 + 中文标签的可视化场景。

---

5. 柱形图分类坐标轴（BarCategoryAxis）

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

📊 效果图：

示例代码

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	时间序列数据	股价图、日志图
CategoryAxis	把连续数值区间映射为业务分段标签（如低/中/高）	分段折线图、柱状图
BarCategoryAxis	离散分类数据	柱状图、条形图

源码下载

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

• 2025-08-25更新： 新增分类坐标轴，用于区分柱形图分类坐标轴。

---

参考

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