如何消除SwiftUI Chart坐标轴右侧的溢出问题？

你设置了chartXScale(domain: 0...100)限制X轴显示范围，但Chart仍会绘制所有数据点（包括101-200的部分），超出显示区域的点就会造成右侧溢出。以下是两种直接有效的解决方式：

方案1：使用clipped()裁剪超出区域 #

给Chart添加clipped()修饰符，自动裁剪掉绘图区域外的内容，这是最简单的处理方式：

import SwiftUI
import Charts

struct ContentView: View {
    var body: some View {
        GroupBox(label: Text("My Chart")) { 
            Chart {
                ForEach(Range(0...200), id: \.self) { x in
                    LineMark(
                        x: .value("X", x),
                        y: .value("Y", x)
                    )
                    .foregroundStyle(by: .value("Function", "x"))
                    LineMark(
                        x: .value("X", x),
                        y: .value("Y", Double(x) / 2)
                    )
                    .foregroundStyle(by: .value("Function", "x/2"))
                }
            }
            .chartXScale(domain: 0...100)
            .chartYScale(domain: 0...100)
            .clipped() // 新增裁剪修饰符
        }
    }
}

方案2：自定义绘图区域裁剪（精细控制） #

如果需要更精准的裁剪范围，可以通过chartPlotStyle指定裁剪形状，确保仅显示目标区域：

import SwiftUI
import Charts

struct ContentView: View {
    var body: some View {
        GroupBox(label: Text("My Chart")) { 
            Chart {
                ForEach(Range(0...200), id: \.self) { x in
                    LineMark(
                        x: .value("X", x),
                        y: .value("Y", x)
                    )
                    .foregroundStyle(by: .value("Function", "x"))
                    LineMark(
                        x: .value("X", x),
                        y: .value("Y", Double(x) / 2)
                    )
                    .foregroundStyle(by: .value("Function", "x/2"))
                }
            }
            .chartXScale(domain: 0...100)
            .chartYScale(domain: 0...100)
            .chartPlotStyle { plotArea in
                plotArea.clipShape(Rectangle()) // 限定绘图区域为矩形并裁剪
            }
        }
    }
}

适配横向滚动的后续优化 #

当你需要实现横向滚动时，只需将Chart包裹在ScrollView(.horizontal)中，并根据数据量设置足够的Chart宽度，同时保留轴域控制逻辑即可：

import SwiftUI
import Charts

struct ContentView: View {
    let dataRange = 0...200
    var body: some View {
        GroupBox(label: Text("My Chart")) { 
            ScrollView(.horizontal) {
                Chart {
                    ForEach(dataRange, id: \.self) { x in
                        LineMark(
                            x: .value("X", x),
                            y: .value("Y", x)
                        )
                        .foregroundStyle(by: .value("Function", "x"))
                        LineMark(
                            x: .value("X", x),
                            y: .value("Y", Double(x) / 2)
                        )
                        .foregroundStyle(by: .value("Function", "x/2"))
                    }
                }
                .chartXScale(domain: 0...100) // 初始显示0-100区间
                .chartYScale(domain: 0...100)
                .frame(width: CGFloat(dataRange.count) * 8) // 根据数据量设置宽度，可调整适配需求
                .clipped()
            }
        }
    }
}

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