SwiftUI Charts框架AxisValueLabel的truncate冲突解决失效

问题分析 #

当自定义AxisValueLabel内容时，collisionResolution: .truncate无法直接生效——该参数仅对系统自动生成的标签内容起作用。对于自定义的Text视图，需要手动配置文本截断属性，或者调整轴的布局空间来避免重叠。

方案1：实现文本截断 #

给自定义的Text添加行限制和截断模式，强制文本在空间不足时截断：

.chartYAxis {
    AxisMarks(position: .leading) { axis in
        AxisGridLine()
        AxisValueLabel(
            centered: true,
            orientation: AxisValueLabelOrientation.verticalReversed
        ) {
            Text("\(axis.index * 25) minutes")
                .lineLimit(1) // 限制文本仅显示一行
                .truncationMode(.tail) // 尾部截断
        }
    }
}

方案2：让标签区域自动扩展 #

通过调整Y轴布局优先级或设置固定宽度，确保标签有足够空间显示：

方法A：提升标签布局优先级 #

让Y轴标签优先获取布局空间，避免被挤压：

.chartYAxis {
    AxisMarks(position: .leading) { axis in
        AxisGridLine()
        AxisValueLabel(
            centered: true,
            orientation: AxisValueLabelOrientation.verticalReversed
        ) {
            Text("\(axis.index * 25) minutes")
                .layoutPriority(1) // 提升布局优先级，优先分配空间
        }
    }
}

方法B：设置Y轴固定宽度 #

直接给Y轴指定足够的宽度，确保标签完整显示：

.chartYAxis {
    AxisMarks(position: .leading) { axis in
        AxisGridLine()
        AxisValueLabel(
            centered: true,
            orientation: AxisValueLabelOrientation.verticalReversed
        ) {
            Text("\(axis.index * 25) minutes")
        }
    }
}
.chartYAxisWidth(80) // 根据实际文本长度调整宽度值

内容的提问来源于stack exchange，提问作者Asif Raza