Swift Charts中如何控制LineMark不超出图表区域边界？

快速解决方案：裁剪绘图区内容 #

你已经用到了chartPlotStyle，只需要在背景设置后添加.clipped()修饰符，就能把超出绘图区的线条部分裁剪掉，让线条限制在绘图区范围内：

Chart(data, id: \.DateTime) {
    dataPoint in
    LineMark(x: .value("DateTime", dataPoint.DateTime),
             y: .value("Feet", dataPoint.HeightFeet))
                .interpolationMethod(.cardinal)
}
.padding()
.chartYScale(domain: [0, 8])                
.chartXScale(domain: [SelectedDate - 21600, SelectedDate + 86400])
.chartPlotStyle { chartContent in
    chartContent
        .background(Color.secondary.opacity(0.2))
        .clipped() // 新增裁剪设置
}

这个方法简单直接，能快速解决线条溢出的问题。

更精准的方案：预处理数据集 #

如果希望线条在绘图区边缘自然收尾（而非被生硬裁剪），可以提前处理数据，补充绘图区边缘的对应数据点：

1. 先过滤掉完全超出X/Y轴范围的数据
2. 检查数据集首尾是否超出设置的domain，若超出则补充边缘点（可通过插值计算对应Y值）

示例代码如下（假设你的数据模型为包含DateTime和HeightFeet的结构体）：

// 过滤出在显示范围内的数据
let filteredData = data.filter { point in
    point.DateTime >= SelectedDate - 21600 
    && point.DateTime <= SelectedDate + 86400 
    && point.HeightFeet >= 0 
    && point.HeightFeet <= 8
}

var processedData = filteredData

// 补充左边缘点（若第一个点的X大于左边界）
if let firstPoint = processedData.first, firstPoint.DateTime > SelectedDate - 21600 {
    let leftEdgeX = SelectedDate - 21600
    // 这里用简单的取值，你也可以根据相邻点做线性插值优化
    let leftEdgeY = firstPoint.HeightFeet
    processedData.insert(YourDataModel(DateTime: leftEdgeX, HeightFeet: leftEdgeY), at: 0)
}

// 补充右边缘点（若最后一个点的X小于右边界）
if let lastPoint = processedData.last, lastPoint.DateTime < SelectedDate + 86400 {
    let rightEdgeX = SelectedDate + 86400
    let rightEdgeY = lastPoint.HeightFeet
    processedData.append(YourDataModel(DateTime: rightEdgeX, HeightFeet: rightEdgeY))
}

// 使用处理后的数据集绘制图表
Chart(processedData, id: \.DateTime) {
    dataPoint in
    LineMark(x: .value("DateTime", dataPoint.DateTime),
             y: .value("Feet", dataPoint.HeightFeet))
                .interpolationMethod(.cardinal)
}
// 后续的scale、plotStyle设置保持不变

这种方法能让线条完美贴合绘图区边缘，视觉效果更自然。

补充说明 #

你之前设置的chartXScale和chartYScale只是控制坐标轴的显示范围，但Swift Charts默认会基于完整数据集绘制线条，因此超出domain的部分会延伸到绘图区外。上述两种方法分别从裁剪和数据预处理的角度解决了这个问题，你可以根据需求选择。

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