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

Question

我想为 iOS 移动应用程序绘制如下图所示的表面轮廓图（swift）

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

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

Answer 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

我可以提取一个接近 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) 上的结果。对于您将执行的代码的每次迭代，我都会有所不同，因为这些值是随机输入的，仅供您了解。

Answer 2

您标记了 [scichart]，以便我可以发布答案。

虽然 SciChart 的 WPF 和 Javascript 版本支持 二维图表中的轮廓，但似乎 SciChart 的 ios/android 热图 不支持。

但它确实有这个 3D 等高线图，可以通过在 3D 场景中设置正交投影和相机位置来从上方查看。

您可以在此处了解有关 3D 相机属性的更多信息。属性projectionMode设置正交模式，位置/目标允许您从上方控制视图。

scichart 示例应用程序上还有一个演示，可让您动态操作 3D 相机。 在这里看到它。

Answer 3

我在 coreplot 和 DGCharts 框架上做了一些工作： https://github.com/swainwri/core-plot-release-2.4-sw (objc) && https://github.com/swainwri/DCGCharts （快速）。这些并不完整，因为没有涵盖轮廓函数中不连续性的所有基础。