iOS中如何实现轴垂直堆叠？类似Android的LayoutManager效果

嘿，这个问题我刚好踩过坑！之前用多个独立图表做堆叠时，也遇到过CursorModifier没法跨面板同步的头疼问题，后来发现用SciChart的垂直布局管理器就能完美解决——相当于把多个面板塞进同一个SCIChartSurface里，所有元素共享同一个图表上下文，CursorModifier自然就能全局生效了。下面给你一步步拆解实现方案：

核心思路 #

用单个SCIChartSurface作为容器，通过SCIVerticalLayoutManager将多个Y轴（每个面板对应一个独立Y轴）垂直划分区域，共享同一个X轴。这样所有的渲染系列都在同一个图表实例里，CursorModifier可以无缝跨所有面板同步显示。

步骤1：初始化图表容器 #

先在代码里创建SCIChartSurface并铺满父视图（也可以用Storyboard拖拽）：

let chartSurface = SCIChartSurface()
chartSurface.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(chartSurface)

// 添加约束让图表铺满父视图
NSLayoutConstraint.activate([
    chartSurface.topAnchor.constraint(equalTo: view.topAnchor),
    chartSurface.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    chartSurface.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    chartSurface.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

步骤2：配置共享X轴与多Y轴 #

每个面板需要独立的Y轴来控制数据范围，X轴可以共享：

// 全局共享的X轴
let xAxis = SCINumericAxis()
xAxis.growBy = SCIDoubleRange(min: 0.1, max: 0.1) // 给X轴两端留一点空白
chartSurface.xAxes.add(xAxis)

// 第一个面板的Y轴
let yAxis1 = SCINumericAxis()
yAxis1.axisId = "YAxis_Panel1"
yAxis1.title = "温度数据"
yAxis1.alignment = .left
chartSurface.yAxes.add(yAxis1)

// 第二个面板的Y轴
let yAxis2 = SCINumericAxis()
yAxis2.axisId = "YAxis_Panel2"
yAxis2.title = "湿度数据"
yAxis2.alignment = .left
chartSurface.yAxes.add(yAxis2)

步骤3：设置垂直布局管理器 #

用SCIVerticalLayoutManager来实现面板的垂直堆叠，还能自定义面板间距和高度比例：

let layoutManager = SCIVerticalLayoutManager()
layoutManager.padding = 12 // 面板之间的垂直间距
layoutManager.viewportOffset = 8 // 图表边缘的内边距

// 可选：设置面板高度比例（默认是均分）
layoutManager.setWeight(forAxisId: "YAxis_Panel1", weight: 0.6) // 第一个面板占60%高度
layoutManager.setWeight(forAxisId: "YAxis_Panel2", weight: 0.4) // 第二个面板占40%高度

chartSurface.layoutManager = layoutManager

步骤4：给每个面板添加数据系列 #

创建对应的数据系列，并绑定到各自的Y轴：

// 第一个面板的折线系列
let tempSeries = SCIFastLineRenderableSeries()
tempSeries.dataSeries = createXyDataSeries(with: temperatureData) // 自定义方法生成数据
tempSeries.yAxisId = "YAxis_Panel1"
tempSeries.style.strokeStyle = SCISolidPenStyle(color: .systemRed, thickness: 2)
chartSurface.renderableSeries.add(tempSeries)

// 第二个面板的柱状系列
let humiditySeries = SCIFastColumnRenderableSeries()
humiditySeries.dataSeries = createXyDataSeries(with: humidityData)
humiditySeries.yAxisId = "YAxis_Panel2"
humiditySeries.style.fillBrushStyle = SCISolidBrushStyle(color: .systemBlue.withAlphaComponent(0.6))
chartSurface.renderableSeries.add(humiditySeries)

注：createXyDataSeries是你自己封装的方法，用来生成SCIXyDataSeries实例，传入对应的数据即可。

步骤5：添加CursorModifier实现跨面板同步 #

现在添加的CursorModifier会自动在所有面板上同步显示：

let cursorModifier = SCICursorModifier()
cursorModifier.modifierGroup = .allAxes // 显示所有轴的光标标签
cursorModifier.style.lineStyle = SCISolidPenStyle(color: .systemGray, thickness: 1)
cursorModifier.style.labelStyle.backgroundColor = .systemBackground
cursorModifier.style.labelStyle.textColor = .label
chartSurface.chartModifiers.add(cursorModifier)

额外注意事项 #

• 如果需要更多面板，只需要重复添加Y轴和对应的数据系列即可，布局管理器会自动适配
• 每个面板的轴样式、系列样式可以完全独立配置，互不干扰
• 若要禁用某个面板的光标显示，可以给对应的数据系列设置isVisibleInLegend = false，或者调整CursorModifier的过滤规则

这样设置后，你就拥有了一个单图表容器下的多垂直面板，CursorModifier可以完美跨所有面板同步显示，完全解决了之前多图表的痛点！

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