如何绘制曲面等高线图（Swift语言）答案

【问题标题】：How to draw surface contour plot (Swift language)如何绘制曲面等高线图（Swift语言）
【发布时间】：2022-12-12 15:45:36
【问题描述】：

我想为 iOS 移动应用程序绘制如下图所示的表面等高线图（快速）

如果有人能让我走上正轨，我将不胜感激。

我在互联网上搜索，没有找到任何明显的解决方案。我考虑使用 SceneKit 或 SciChart.iOS 包，但我不确定。

【问题讨论】：

标签： plot swiftui contour scichart

【解决方案1】：

图表由 Apple 在 iOS16 和所有其他 Apple 平台上引入（有关简短的官方说明，请参见此处：https://developer.apple.com/documentation/charts）

我找到了一个 GitHub 项目，旨在复制 Apple 在 WWDC 2022 上取笑的漂亮图表（请在此处查看简要显示图表的视频https://developer.apple.com/videos/play/wwdc2022/10137/）

以下是 Jordi Bruin 的 GitHub 项目链接： https://github.com/jordibruin/Swift-Charts-Examples

我可以提取一个简化的单文件 HeatMap，它接近于 ContourPlot，所以我想你可以从那里开始。

import SwiftUI
import Charts

struct Grid {
    let numRows: Int
    let numCols: Int
    var points = [Point]()

    init(numRows: Int, numCols: Int) {
        self.numRows = numRows
        self.numCols = numCols
        generateData()
    }
    
    mutating func generateData() {
        for rowIndex in 0..<numRows {
            for colIndex in 0..<numCols {
                let maxValue = numRows + numCols - 2
                let variance = Double.random(in: 0..<20) - 10
                let value = (Double(rowIndex + colIndex) * 100)/Double(maxValue) + variance
                let point = Point(x: Double(colIndex), y: Double(rowIndex), val: value)
                points.append(point)
            }
        }
    }
}

struct ContentView: View {
    @State var grid = Grid(numRows: 20, numCols: 20)
    
    var gradientColors: [Color] = [.blue, .green, .yellow, .orange, .red]

    var body: some View {
        Chart(grid.points) { point in
            Plot {
                let xVal = Int(point.x)
                let yVal = Int(point.y)
                let val = Int(point.val)
                RectangleMark(
                    xStart: PlottableValue.value("xStart", xVal),
                    xEnd: PlottableValue.value("xEnd", xVal + 1),
                    yStart: PlottableValue.value("yStart", yVal),
                    yEnd: PlottableValue.value("yEnd", yVal + 1)
                )
                .foregroundStyle(by: .value("Value", val))
            }
        }
        .chartForegroundStyleScale(range: Gradient(colors: gradientColors))
        .chartYAxis {
            AxisMarks(values: .automatic(desiredCount: grid.numRows, roundLowerBound: false, roundUpperBound: false)) { _ in
                AxisGridLine()
                AxisTick()
                AxisValueLabel(centered: true)
            }
        }
        .chartXAxis {
            AxisMarks(values: .automatic(desiredCount: grid.numCols, roundLowerBound: false, roundUpperBound: false)) { _ in
                AxisGridLine()
                AxisTick()
                AxisValueLabel(centered: true)
            }
        }
        .aspectRatio(1, contentMode: .fit)
    }

}

struct Point: Hashable, Identifiable {
    let id = UUID()
    let x: Double
    let y: Double
    let val: Double
}

这是此代码在 iPhone 14 Pro 模拟器 (iOS 16.0) 上的结果。对于您将执行的代码的每次迭代，我都会有所不同，因为值是随机输入的，只是为了让您了解一下。

【讨论】：