QML Chart组件之坐标轴共有属性

引言

在上文 QML Chart组件之坐标轴示例 中介绍了5种常见的坐标轴，包括：ValueAxis、LogValueAxis、DateTimeAxis、CategoryAxis和BarCategoryAxis。本篇主要介绍坐标轴的共有属性，通过具体示例展示如何使用这些属性来自定义图表坐标轴的外观和行为。

相关系列

• QML Chart组件之坐标轴示例
• 在QML中使用Chart组件

基础示例

以下展示一个基础的折线图示例：

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: 4}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}}
}

接下来要在此示例的基础上进行调整，展示如何使用坐标轴的基础属性，以及修改后的效果。

---

基础属性说明

1. 设置X轴颜色

ValueAxis {id: valueAxisXmin: 0max: 4color: "#1296FF"
}

效果：X轴及其标签颜色变为蓝色。

---

2. 设置X轴标签样式

ValueAxis {id: valueAxisXmin: 0max: 4labelsColor: "#1296FF"labelsFont.family: "Courier"labelsFont.pointSize: 12labelsFont.bold: true
}

效果：X轴标签变为蓝色、Courier字体、12号字、加粗。

---

3. 设置X轴标签倾斜角度

ValueAxis {id: valueAxisXmin: 0max: 4labelsVisible: truelabelsAngle: 45
}

效果：X轴标签倾斜45度显示。注意：仅设置 labelsAngle 可能不生效，需同时设置 labelsVisible 或字体样式。

---

4. 设置X轴网格线样式

ValueAxis {id: valueAxisXmin: 0max: 4gridLineColor: "#888888"gridVisible: true
}

效果：显示灰色网格线。

---

5. 设置X轴标题样式

titleText : string

坐标轴的标题。默认留空。坐标轴标题支持 HTML 格式设置。

ValueAxis {id: valueAxisXmin: 0max: 4titleFont.family: "Courier"titleFont.pointSize: 14titleFont.bold: truetitleText: "X Title"titleVisible: true
}

效果：X轴标题显示为“X Title”，使用Courier字体、14号、加粗。

---

6. 设置X轴阴影

ValueAxis {id: valueAxisXmin: 0max: 4shadesBorderColor: "#333333"shadesColor: "#999999"shadesVisible: true
}

效果：在坐标轴区域显示灰色阴影。

---

7. 设置X轴数据反转

reverse：bool

定义是否使用反向坐标轴。默认值为 false。
反向坐标轴适用于折线、样条线和散点系列，以及笛卡尔图表中的面积系列。
若同一系列上所有同方向的坐标轴中有一个被反转，则其余坐标轴也必须全部反转，否则行为未定义。

ValueAxis {id: valueAxisXmin: 0max: 4reverse: true
}

效果：X轴数据方向反转，从右向左递增。
注意：官方文档中 reverse 类型实际为 bool。

---

8. 设置X轴标签截断

truncateLabels : bool

标签的截断状态。
指示当空间不足以显示完整文本时，是否应截断标签。默认值为 true。

ValueAxis {id: valueAxisXmin: 0max: 999999999labelsColor: "#1296FF"labelsFont.family: "Courier"labelsFont.pointSize: 12labelsFont.bold: truetruncateLabels: true
}

效果：当标签文本过长时自动截断显示。

---

9. 设置X轴不可见

ValueAxis {id: valueAxisXmin: 0max: 4visible: false
}

效果：隐藏X轴及其所有元素。

---

10. 设置X轴次要网格线

ValueAxis {id: valueAxisXmin: 0max: 4minorGridLineColor: "#F0F0F0"minorGridVisible: trueminorTickCount: 4
}

效果：显示浅灰色次要网格线，每两个主刻度之间显示4条次要网格线。

---

结语

通过上述示例，展示了QML Chart组件中坐标轴的常用共有属性及其效果。这些属性可以帮助开发者灵活定制图表的坐标轴样式，提升图表的可读性和美观性。在实际使用中，可根据需求组合使用这些属性，实现更复杂的图表效果。

源码下载

Git Code 下载链接：QML Chart组件之坐标轴共有属性示例

---

参考

• AbstractAxis QML Type
• ValueAxis QML Type