Swift Chart中如何修复X轴首尾标签被截断的问题

问题描述 #

我有一个仅显示X轴首尾标签的简单图表，代码如下：

import SwiftUI
import Charts

// ...

Chart(data) {
  
}
.chartXAxis {
  AxisMarks(values: [firstValue, lastValue]) { _ in
    AxisValueLabel()
  }
}

当数据点较少时，该图表显示正常：

但随着数据量增加，首尾标签被推至图表边缘后会出现截断：

请问是否有办法禁用此截断行为，确保这些标签无论数据量、标签内容及设备屏幕大小如何都能完整显示？

解决办法 #

• 给轴标签添加内边距：直接给AxisValueLabel添加水平内边距，让标签和边缘保持距离，避免被截断：

  .chartXAxis {
    AxisMarks(values: [firstValue, lastValue]) { _ in
      AxisValueLabel()
        .padding(.horizontal, 8)
    }
  }
  

• 调整图表整体边距：给整个Chart组件添加左右边距，让图表区域和屏幕边缘留出足够空间容纳标签：

  Chart(data) {
    
  }
  .padding(.horizontal, 16)
  .chartXAxis {
    AxisMarks(values: [firstValue, lastValue]) { _ in
      AxisValueLabel()
    }
  }
  

• 自定义标签最小宽度：通过给标签包裹一个带最小宽度的容器，强制保留足够显示空间：

  .chartXAxis {
    AxisMarks(values: [firstValue, lastValue]) { _ in
      AxisGridLine()
      AxisTick()
      HStack {
        AxisValueLabel()
      }
      .frame(minWidth: 60) // 根据标签内容调整最小宽度
    }
  }
  

• 调整标签对齐方式：针对首尾标签分别设置对齐方向，让首标签左对齐、尾标签右对齐，避免被边缘截断：

  .chartXAxis {
    AxisMarks(values: [firstValue, lastValue], position: .bottom) { context in
      AxisValueLabel()
        .alignment(context.value == firstValue ? .leading : .trailing)
    }
  }
  

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