iOS中基于Charts库获取三次曲线折线图可见X对应的Y值

嘿，我来帮你搞定这个需求！你已经实现了实时数据的三次曲线折线图，现在要在右侧加个圆形标记，核心就是找到当前可视区域最右侧对应的Y值，然后绘制图形就行，下面是具体步骤：

1. 获取可视区域的最右侧X轴数值 #

Charts提供了viewPortHandler来获取图表的可视范围，我们可以把右侧边缘的像素坐标转换成X轴的数值：

// 获取图表可视区域的矩形
let visibleRect = chartView.viewPortHandler.contentRect
// 把可视区域最右侧的x像素转成X轴对应的数值
let rightMostX = chartView.xAxis.valueForPixel(x: visibleRect.maxX)

2. 找到对应X值的Y值 #

接下来要从你的折线数据集中找到匹配这个X值的Y值。如果你的实时数据是按顺序新增的，最新的那个数据点大概率就是右侧的点，但为了精准适配可视区域（比如手动滚动图表的情况），可以遍历数据集找最接近的点：

guard let dataSet = chartView.data?.dataSets.first as? LineChartDataSet else {
    print("没有找到折线数据集")
    return
}

var targetYValue: Double = 0.0
// 遍历数据条目，找到对应X值的Y值
for entry in dataSet.entries {
    // 如果是精确匹配直接取
    if entry.x == rightMostX {
        targetYValue = entry.y
        break
    }
    // 如果是递增的X值，找到第一个大于rightMostX的点（可视区域右侧的第一个数据点）
    if entry.x > rightMostX {
        targetYValue = entry.y
        break
    }
}

如果你的三次曲线是通过Charts自动插值生成的，需要获取曲线上的插值点Y值，可以用转换器来计算：

let transformer = chartView.getTransformer(forAxis: .left)
let interpolatedPoint = transformer.pixelForValues(x: rightMostX, y: 0)
// 反向计算Y值
let interpolatedY = chartView.leftAxis.valueForPixel(y: interpolatedPoint.y)
targetYValue = interpolatedY

3. 转换坐标并绘制圆形 #

拿到Y值后，把它转换成图表上的像素坐标，然后用CAShapeLayer添加圆形：

// 把X、Y值转换成图表上的像素点
let targetPixelPoint = chartView.getPosition(
    entry: ChartDataEntry(x: rightMostX, y: targetYValue),
    axis: .left
)

// 创建圆形图层
let circleLayer = CAShapeLayer()
let circlePath = UIBezierPath(
    arcCenter: targetPixelPoint,
    radius: 8, // 圆形半径，根据需求调整
    startAngle: 0,
    endAngle: CGFloat.pi * 2,
    clockwise: true
)
circleLayer.path = circlePath.cgPath
circleLayer.fillColor = UIColor.systemRed.cgColor // 填充色
circleLayer.strokeColor = UIColor.white.cgColor // 边框色
circleLayer.lineWidth = 2 // 边框宽度

// 先移除旧的圆形图层，避免重复添加
chartView.layer.sublayers?.filter { $0 is CAShapeLayer }.forEach { $0.removeFromSuperlayer() }
// 添加新的圆形图层
chartView.layer.addSublayer(circleLayer)

4. 实时更新圆形位置 #

因为你的图表是持续更新的，所以要在每次图表绘制完成后重新计算并绘制圆形，这时候可以用ChartViewDelegate的代理方法：

extension YourViewController: ChartViewDelegate {
    func chartViewDidFinishDrawing(_ chartView: ChartViewBase) {
        // 把上面的步骤1-3的代码放到这里，每次图表绘制完就更新圆形位置
        updateRightSideCircle()
    }
}

// 把绘制逻辑封装成方法
func updateRightSideCircle() {
    // 步骤1-3的代码
}

这样就能保证每次图表更新（新增数据、滚动）后，圆形都能准确出现在右侧对应的Y值位置啦！

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