引言

在使用QML進行數據可視化開發時，QtCharts模塊提供了強大而靈活的圖表功能。其中坐標軸是圖表的核心組成部分之一，它決定了數據如何在圖表中被展示和解讀。合理選擇和配置坐標軸類型，不僅能提升圖表的可讀性，還能更準確地反映數據特征。

本文將詳細介紹 QtCharts 中的五種常用坐標軸類型：

• ValueAxis：數值坐標軸
• LogValueAxis：對數坐標軸
• DateTimeAxis：日期時間坐標軸
• CategoryAxis：分類坐標軸
• 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. 分類坐標軸（CategoryAxis）

? 適用場景 需要將連續的數值區間映射成業務語義的場景。

📊 效果圖：

示例代碼

import QtQuick
import QtQuick.Layouts
import QtChartsRectangle {Layout.fillWidth: trueLayout.fillHeight: trueChartView {id: chartViewtitle: "分類坐標軸示例"titleFont.bold: truetitleFont.pointSize: 14anchors.fill: parentantialiasing: trueCategoryAxis {id: valueAxisXmin: 0max: 30CategoryRange {label: "前段"endValue: 10}CategoryRange {label: "中段"endValue: 20}CategoryRange {label: "后段"endValue: 30}}CategoryAxis {id: valueAxisYmin: 0max: 40CategoryRange {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: valueAxisXaxisY: valueAxisY}}
}

說明

該代碼演示了如何用 Charts組件中 的 CategoryAxis對象 把純數字坐標軸轉換成業務語言，既保留數值計算能力，又提升用戶可讀性，適用于任何需要分段 + 中文標簽的可視化場景。

---

5. 柱形圖分類坐標軸（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	時間序列數據	股價圖、日志圖
CategoryAxis	把連續數值區間映射為業務分段標簽（如低/中/高）	分段折線圖、柱狀圖
BarCategoryAxis	離散分類數據	柱狀圖、條形圖

源碼下載

Git Code 下載鏈接：Charts 坐標軸示例

• 2025-08-25更新： 新增分類坐標軸，用于區分柱形圖分類坐標軸。

---

參考

• ValueAxis 文檔
• LogValueAxis 文檔
• DateTimeAxis 文檔
• CategoryAxis 文檔
• BarCategoryAxis 文檔