SwiftUI Charts大数据集下RectangleMark前景样式透明度失效求助

问题现象 #

用SwiftUI Charts的RectangleMark做拖拽选框时，小数据集里foregroundStyle(.red.opacity(0.1))能正常显示半透明红色，但换成大数据集后，选框变成完全不透明的红色，透明度设置直接失效。

相关代码 #

图表实现代码：

Chart(item.selectedStockChart, id: \.id) { data in
    LineMark(x: .value("Index", data.formattedDate), y: .value("Value", data.close))
    // 其他Mark组件...

    if let (start, end) = range, enablePriceDrag {
        RectangleMark(xStart: .value("Selection Start", start),
                      xEnd: .value("Selection End", end))
            .foregroundStyle(.red.opacity(0.1))
    }
}

拖拽手势处理方法：

private func onChangeDrag(value: DragGesture.Value, chartProxy: ChartProxy, geometryProxy: GeometryProxy) {
    showStartingPriceLabel = true
    let startX = value.startLocation.x
    let currentX = value.location.x

    if let startDate: Date = chartProxy.value(atX: startX),
       let currentDate: Date = chartProxy.value(atX: currentX),
       currentDate > startDate
    {
        range = (startDate, currentDate)
    }
}

效果对比 #

• 大数据集错误效果：
  

• 小数据集正确效果：
  

解决方案 #

问题出在RectangleMark被放在了Chart的内部闭包中，大数据集下Chart会为每一条数据重复渲染这个选框，多层半透明矩形叠加后就会变成不透明。

把RectangleMark移到Chart的overlay修饰符里，只渲染一次就能解决：

Chart(item.selectedStockChart, id: \.id) { data in
    LineMark(x: .value("Index", data.formattedDate), y: .value("Value", data.close))
    // 其他Mark组件...
}
.overlay {
    if let (start, end) = range, enablePriceDrag {
        RectangleMark(xStart: .value("Selection Start", start),
                      xEnd: .value("Selection End", end))
            .foregroundStyle(.red.opacity(0.1))
    }
}

这样不管数据集多大，选框都只会渲染一次，透明度就能正常生效了。

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