如何在SwiftUI的LineMark中为X轴刻度添加左右间距

问题场景 #

用SwiftUI Chart组件实现LineMark图表时，X轴首尾刻度（如17/7、07/08）紧贴图表边缘，可读性差。直接给Chart加padding只会在整个图表外层加空白，无法调整刻度位置。

原代码如下：

Chart {
  ForEach(numberWorkouts) { numberworkouts in
    if dateState == .weeks {
      LineMark(
        x: .value("Date", numberworkouts.date, unit: .day),
        y: .value("Total", numberworkouts.numberOfWorkouts)
      )
      .interpolationMethod(.catmullRom)
      .symbol {
        Circle()
          .fill(.blue)
          .frame(width: 7, height: 7)
      }
    } else {
      LineMark(
        x: .value("Date", numberworkouts.date, unit: .month),
        y: .value("Total", numberworkouts.numberOfWorkouts)
      )
      .symbol {
        Circle()
          .fill(.blue)
          .frame(width: 7, height: 7)
      }
    }
  }
}
.chartYAxis {
  AxisMarks(position: .leading)
}
.chartYAxisLabel(position: .leading, alignment: .center) {
}
.chartYAxis {
  AxisMarks(stroke: StrokeStyle(lineWidth: 0))
}
.chartXAxis {
  if dateState == .weeks {
    AxisMarks(preset: .aligned, values: .stride(by: .day, count: 7)) {
      AxisValueLabel(format: .dateTime.month(.twoDigits).day())
    }
  } else {
    AxisMarks(values: .stride(by: .month)) {
      AxisValueLabel(format: .dateTime.month(.abbreviated), centered: true)
    }
  }
}
.chartForegroundStyleScale(["No. of Workouts": Color.blue])
.chartLegend(.visible)
.aspectRatio(1.7, contentMode: .fit)

解决方法 #

核心是通过扩展X轴的定义域范围，让首尾刻度自动向中间偏移，具体步骤：

1. 计算数据的首尾日期，根据dateState对日期进行左右偏移
2. 给Chart添加.chartXScale(domain:)修饰符，用扩展后的范围作为X轴定义域

修改后的代码 #

首先在视图中计算扩展后的X轴范围：

// 先获取数据中的最小/最大日期
private var minDate: Date { numberWorkouts.map(\.date).min() ?? Date() }
private var maxDate: Date { numberWorkouts.map(\.date).max() ?? Date() }

// 根据状态生成扩展后的X轴范围
private var extendedXDomain: ClosedRange<Date> {
    switch dateState {
    case .weeks:
        // 周模式：首尾各偏移3天，可根据需求调整
        let start = Calendar.current.date(byAdding: .day, value: -3, to: minDate)!
        let end = Calendar.current.date(byAdding: .day, value: 3, to: maxDate)!
        return start...end
    case .months:
        // 月模式：首尾各偏移1个月，可根据需求调整
        let start = Calendar.current.date(byAdding: .month, value: -1, to: minDate)!
        let end = Calendar.current.date(byAdding: .month, value: 1, to: maxDate)!
        return start...end
    }
}

然后给原Chart添加.chartXScale修饰符：

Chart {
  // 原LineMark代码保持不变
}
.chartXScale(domain: extendedXDomain) // 添加这一行
// 原有的其他修饰符保持不变
.chartYAxis { ... }
.chartXAxis { ... }
...

效果说明 #

• X轴的显示范围被扩展，首尾刻度会自动向中间移动，不再紧贴边缘
• 图表的LineMark数据点位置不变，仅左右两侧留出空白，不影响数据展示
• 偏移天数/月数可根据实际需求调整，比如周模式可以改成偏移2天，让空白更贴合需求

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