使用Charts pod绘制柱状图遇网格线位置、柱体圆角问题求助

1. 柱体添加圆角效果 #

Charts库默认不支持柱体圆角配置，你需要自定义柱状图渲染器实现：

• 新建自定义渲染器类，继承BarChartRenderer，重写柱形绘制方法，指定顶部圆角裁剪：

class RoundedBarChartRenderer: BarChartRenderer {
    var cornerRadius: CGFloat = 8
    
    override func drawDataSet(context: CGContext, dataSet: BarChartDataSetProtocol, index: Int) {
        guard let dataProvider = dataProvider, let barData = dataProvider.barData else { return }
        
        let trans = dataProvider.getTransformer(forAxis: dataSet.axisDependency)
        let phaseY = animator.phaseY
        
        var barRect = CGRect()
        let entryCount = dataSet.entryCount
        
        for j in 0..<entryCount {
            guard let e = dataSet.entryForIndex(j) as? BarChartDataEntry else { continue }
            
            let x = e.x
            let y = e.y
            
            let barWidth = barData.barWidth
            let left = x - barWidth / 2.0
            let right = x + barWidth / 2.0
            let top = y * phaseY
            let bottom = 0.0
            
            barRect.origin.x = CGFloat(left)
            barRect.origin.y = CGFloat(top)
            barRect.size.width = CGFloat(right - left)
            barRect.size.height = CGFloat(bottom - top)
            
            trans.rectValueToPixel(&barRect)
            
            if !viewPortHandler.isInBoundsLeft(barRect.maxX) || !viewPortHandler.isInBoundsRight(barRect.minX) {
                continue
            }
            
            if !viewPortHandler.isInBoundsTop(barRect.maxY) || !viewPortHandler.isInBoundsBottom(barRect.minY) {
                continue
            }
            
            context.setFillColor(dataSet.color(atIndex: j).cgColor)
            let path = UIBezierPath(roundedRect: barRect, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
            context.addPath(path.cgPath)
            context.fillPath()
        }
    }
}

• 给你的柱状图实例绑定自定义渲染器：

let customRenderer = RoundedBarChartRenderer(dataProvider: barChartView, animator: barChartView.chartAnimator, viewPortHandler: barChartView.viewPortHandler)
customRenderer.cornerRadius = 6 // 可按需求调整圆角大小
barChartView.renderer = customRenderer

2. 调整柱体位置到网格线侧边 #

这个问题是x轴区间默认和柱体中心对齐导致的，修改x轴区间偏移即可：

// 假设yourXDataArray是你的x轴原始数据数组，共n个柱体
let xCount = yourXDataArray.count
barChartView.xAxis.axisMinimum = -0.5
barChartView.xAxis.axisMaximum = Double(xCount) - 0.5
// 关闭标签居中，保证标签和柱体对齐
barChartView.xAxis.centerAxisLabelsEnabled = false

如果是分组柱状图，还需要同步调整分组间距和barWidth，保证整体宽度匹配区间。

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