iOS平台Danielgindi Charts柱状图上下添加双文本的实现方法咨询

嘿，这个需求完全可以实现的！Danielgindi Charts（也就是咱们iOS圈常用的Charts框架）提供了足够的自定义能力来搞定柱状图上下添加双文本的效果，我来给你拆解下具体怎么做：

1. 先搞定柱子上方的文本显示 #

这部分是框架的基础能力，你可以直接通过配置BarChartDataSet来实现：

// 假设你已经创建好了柱状图的entries数据
let dataSet = BarChartDataSet(entries: chartEntries, label: "你的数据集标签")

// 设置上方文本的样式
dataSet.valueFont = UIFont.systemFont(ofSize: 12)
dataSet.valueTextColor = .darkGray
// 自定义上方要显示的内容，比如直接显示柱子的数值，或者从entry的自定义属性取值
dataSet.valueFormatter = DefaultValueFormatter(formatter: NumberFormatter()) { value, entry, dataSetIndex, viewPortHandler in
    // 这里返回你想在柱子顶部展示的文本，比如entry.y的格式化内容
    return String(format: "%.1f", entry.y)
}

2. 自定义Renderer实现柱子下方的文本 #

框架默认只支持顶部文本，要在柱子下方加文本，我们需要自定义BarChartRenderer，重写绘制逻辑来额外渲染底部文本：

class CustomBarChartRenderer: BarChartRenderer {
    override func drawValues(context: CGContext) {
        // 先调用父类方法绘制顶部的文本
        super.drawValues(context: context)
        
        guard let chart = self.chart, let barData = chart.barData else { return }
        
        // 遍历所有数据集
        for dataSetIndex in 0..<barData.dataSetCount {
            guard let dataSet = barData.dataSets[dataSetIndex] as? IBarChartDataSet,
                  dataSet.isDrawValuesEnabled else { continue }
            
            let valueFont = dataSet.valueFont
            let valueTextColor = dataSet.valueTextColor
            let transformer = chart.getTransformer(forAxis: .left)
            
            // 遍历每个柱子的entry
            for entry in dataSet.entries {
                guard let barEntry = entry as? BarChartDataEntry else { continue }
                
                // 计算柱子底部的位置坐标
                let bottomPixel = transformer.pixelForValues(x: barEntry.x, y: 0)
                let barCenterX = transformer.pixelForValues(x: barEntry.x, y: barEntry.y).x
                
                // 从entry的data属性中取出底部要显示的文本（你可以在创建entry时把文本存在这里）
                guard let bottomText = barEntry.data as? String else { continue }
                
                // 计算文本绘制的位置，避免和柱子或坐标轴重叠
                let textAttributes: [NSAttributedString.Key: Any] = [
                    .font: valueFont,
                    .foregroundColor: valueTextColor
                ]
                let textSize = bottomText.size(withAttributes: textAttributes)
                let drawX = barCenterX - textSize.width / 2
                let drawY = bottomPixel.y + textSize.height + 4 // 向下偏移一点，避免贴在柱子底部
                
                // 绘制底部文本
                bottomText.draw(at: CGPoint(x: drawX, y: drawY), withAttributes: textAttributes)
            }
        }
    }
}

3. 给柱状图设置自定义Renderer #

最后把我们写的自定义Renderer绑定到你的BarChartView上：

// 假设你的柱状图实例是barChartView
barChartView.renderer = CustomBarChartRenderer(
    dataProvider: barChartView,
    animator: barChartView.chartAnimator,
    viewPortHandler: barChartView.viewPortHandler
)

额外提示 #

• 你可以在创建BarChartDataEntry时，把底部需要的文本存在data属性里，比如：BarChartDataEntry(x: 0, y: 100, data: "Q1")
• 如果需要调整文本的样式、位置偏移，直接修改自定义Renderer里的字体、颜色、坐标计算逻辑就行，非常灵活。

这样就能实现你想要的柱状图上下双文本的效果啦！

内容的提问来源于stack exchange，提问作者Deepak D K