使用Charts库开发折线图时如何在X轴和Y轴上添加标记圆点

你需要自定义X轴、Y轴的渲染器，重写轴绘制逻辑，在每个刻度对应的轴线位置添加圆点绘制逻辑，具体实现如下： #

步骤1：自定义Y轴渲染器 #

class CustomYAxisRenderer: YAxisRenderer {
    let dotRadius: CGFloat = 4 // 圆点半径，可自行调整
    let dotColor: UIColor = .darkGray // 圆点颜色，可自行调整
    
    override func drawAxisLine(context: CGContext) {
        super.drawAxisLine(context: context)
        
        guard let axis = axis as? YAxis, axis.isEnabled, axis.drawAxisLineEnabled else { return }
        
        let axisLinePosition = self.viewPortHandler.contentLeft // Y轴在左侧的位置
        let entries = axis.entries
        
        context.saveGState()
        context.setFillColor(dotColor.cgColor)
        
        for entry in entries {
            let yPos = getPixelForValues(x: 0, y: entry)
            let dotRect = CGRect(x: axisLinePosition - dotRadius, y: yPos - dotRadius, width: dotRadius * 2, height: dotRadius * 2)
            context.fillEllipse(in: dotRect)
        }
        
        context.restoreGState()
    }
}

步骤2：自定义X轴渲染器 #

class CustomXAxisRenderer: XAxisRenderer {
    let dotRadius: CGFloat = 4
    let dotColor: UIColor = .darkGray
    
    override func drawAxisLine(context: CGContext) {
        super.drawAxisLine(context: context)
        
        guard let axis = axis as? XAxis, axis.isEnabled, axis.drawAxisLineEnabled else { return }
        
        let axisLinePosition = self.viewPortHandler.contentBottom // X轴在底部的位置
        let entries = axis.entries
        
        context.saveGState()
        context.setFillColor(dotColor.cgColor)
        
        for entry in entries {
            let xPos = getPixelForValues(x: entry, y: 0)
            let dotRect = CGRect(x: xPos - dotRadius, y: axisLinePosition - dotRadius, width: dotRadius * 2, height: dotRadius * 2)
            context.fillEllipse(in: dotRect)
        }
        
        context.restoreGState()
    }
}

步骤3：替换原有Chart的渲染器，调整配置 #

在你原有配置代码的末尾添加如下内容：

// 替换默认渲染器
lineChart.leftYAxisRenderer = CustomYAxisRenderer(viewPortHandler: lineChart.viewPortHandler, yAxis: lineChart.leftAxis, transformer: lineChart.getTransformer(forAxis: .left))
lineChart.xAxisRenderer = CustomXAxisRenderer(viewPortHandler: lineChart.viewPortHandler, xAxis: lineChart.xAxis, transformer: lineChart.getTransformer(forAxis: .left))

// 刷新图表
lineChart.notifyDataSetChanged()

如果需要调整圆点的大小、颜色，直接修改自定义渲染器里的dotRadius和dotColor参数即可。

内容的提问来源于stack exchange，提问作者As If Prince