Swift Charts热力图出现淡线：原因排查与解决咨询

成因 #

这些淡线并非图表网格线，而是独立矩形标记间的抗锯齿渲染间隙。每个RectangleMark单独绘制时，若图表缩放或像素对齐存在细微偏差，系统的抗锯齿处理会在相邻矩形边缘生成半透明细线条，色彩对比强烈时这类线条会更明显。

解决方法 #

以下是三种可行的修复方案：

方案1：启用离屏渲染合并图层 #

给Chart添加.drawingGroup()修饰符，让系统将所有矩形合并为单个图层渲染，彻底消除间隙：

struct ContentView: View {
    @State private var grid = Grid(rows: 10, columns: 10)
    
    var body: some View {
        Chart(grid.points) { point in
            RectangleMark(
                xStart: .value("xStart", point.x),
                xEnd: .value("xEnd", point.x + 1),
                yStart: .value("yStart", point.y),
                yEnd: .value("yEnd", point.y + 1)
            )
            .foregroundStyle(by: .value("Weight", point.val))
        }
        .chartYAxis(.hidden)
        .chartXAxis(.hidden)
        .chartForegroundStyleScale(range: Gradient(colors: [.yellow, .red]))
        .drawingGroup() // 新增：启用离屏渲染合并图层
        .padding()
        .frame(minWidth: 400, minHeight: 400)
    }
}

方案2：让矩形轻微重叠 #

微调矩形的坐标范围，让相邻矩形产生极小重叠，覆盖间隙区域：

RectangleMark(
    xStart: .value("xStart", point.x - 0.01),
    xEnd: .value("xEnd", point.x + 1 + 0.01),
    yStart: .value("yStart", point.y - 0.01),
    yEnd: .value("yEnd", point.y + 1 + 0.01)
)

方案3：添加极细透明描边 #

给每个矩形标记添加极细的透明描边，填补边缘间隙：

RectangleMark(
    xStart: .value("xStart", point.x),
    xEnd: .value("xEnd", point.x + 1),
    yStart: .value("yStart", point.y),
    yEnd: .value("yEnd", point.y + 1)
)
.foregroundStyle(by: .value("Weight", point.val))
.stroke(Color.clear, lineWidth: 0.2) // 新增：透明描边填补间隙

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