iOS Swift中Charts组件图标与标签间距及层级调整方法

嘿，我刚好之前折腾过类似的需求，先分两种常见情况给你说清楚——你提到的图标+数字标签，大概率是**图例（Legend）**里的项，或者是每个数据点上的标签？我都给你整理好解决方案：

情况1：调整图例（Legend）的标签位置 #

默认Charts的图例是图标在左、标签在右的水平排列，要改成标签在图标上方的垂直布局，直接用默认API没法直接实现，最灵活的方式是手动自定义绘制：

1. 先禁用默认的图例绘制：

chartView.legend.enabled = false

2. 自定义你的ChartView子类（或者直接在控制器里重写draw方法），手动绘制每个图例项的标签和图标：

class CustomChartView: LineChartView { // 换成你用的图表类型，比如BarChartView
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        guard let legendEntries = legend.entries else { return }
        
        // 初始化布局参数，可根据你的UI需求调整
        var currentY: CGFloat = 20 // 图例区域的起始Y坐标
        let horizontalPadding: CGFloat = 20 // 水平边距
        let iconSize = CGSize(width: 12, height: 12) // 图标大小
        let labelToIconSpace: CGFloat = 4 // 标签和图标之间的间距
        let entrySpacing: CGFloat = 10 // 不同图例项之间的间距
        
        for entry in legendEntries {
            // 第一步：先绘制数字标签（在图标上方）
            let labelText = entry.label ?? ""
            let labelAttrs: [NSAttributedString.Key: Any] = [
                .font: UIFont.systemFont(ofSize: 12),
                .foregroundColor: entry.textColor ?? .darkText
            ]
            let labelSize = labelText.size(withAttributes: labelAttrs)
            let labelRect = CGRect(
                x: horizontalPadding,
                y: currentY,
                width: labelSize.width,
                height: labelSize.height
            )
            labelText.draw(in: labelRect, withAttributes: labelAttrs)
            
            // 第二步：绘制图标（在标签下方，和标签居中对齐）
            let iconX = horizontalPadding + (labelSize.width - iconSize.width) / 2
            let iconY = currentY + labelSize.height + labelToIconSpace
            let iconRect = CGRect(
                x: iconX,
                y: iconY,
                width: iconSize.width,
                height: iconSize.height
            )
            entry.form.draw(in: iconRect, with: entry.formColor ?? .clear)
            
            // 更新下一个图例项的起始Y坐标
            currentY = iconY + iconSize.height + entrySpacing
        }
    }
}

这样你就能完全控制标签和图标的相对位置，间距也能通过labelToIconSpace自由调整，想怎么改就怎么改~

情况2：调整数据点的标签位置 #

如果你说的是每个数据点（比如柱状图、折线图的点）旁边的图标+数字标签，那需要自定义渲染器来调整绘制顺序：

1. 先自定义一个数值格式化器（可选，用来控制数字的显示格式）：

class CustomValueFormatter: NSObject, IValueFormatter {
    func stringForValue(_ value: Double, entry: ChartDataEntry, dataSetIndex: Int, viewPortHandler: ViewPortHandler?) -> String {
        // 这里可以自定义数字格式，比如保留小数、加单位等
        return "\(Int(value))"
    }
}

2. 自定义图表渲染器，重写drawValues方法，先绘制数字标签，再绘制图标：

class CustomBarChartRenderer: BarChartRenderer { // 换成你用的图表类型对应的Renderer
    override func drawValues(context: CGContext) {
        guard let dataProvider = dataProvider,
              let barData = dataProvider.barData else { return }
        
        // 布局参数，按需调整
        let iconSize = CGSize(width: 10, height: 10)
        let labelToIconSpace: CGFloat = 3
        
        for (dataSetIndex, dataSet) in barData.dataSets.enumerated() {
            guard dataSet.isDrawValuesEnabled else { continue }
            
            let valueFormatter = dataSet.valueFormatter ?? DefaultValueFormatter(decimals: 0)
            let valueFont = dataSet.valueFont
            let valueTextColor = dataSet.valueTextColor
            
            let trans = dataProvider.getTransformer(forAxis: .left)
            let phaseY = animator.phaseY
            
            context.saveGState()
            
            for entry in dataSet.entries {
                let barEntry = entry as! BarChartDataEntry
                let xPos = barEntry.x
                let yPos = barEntry.y * phaseY
                
                // 先绘制数字标签（在图标上方）
                let valueText = valueFormatter.stringForValue(barEntry.y, entry: barEntry, dataSetIndex: dataSetIndex, viewPortHandler: viewPortHandler)
                let labelSize = valueText.size(withAttributes: [.font: valueFont])
                let pixelPos = trans.pixelForValues(x: xPos, y: yPos)
                let labelX = pixelPos.x - labelSize.width / 2
                let labelY = pixelPos.y - labelSize.height - labelToIconSpace
                
                valueText.draw(at: CGPoint(x: labelX, y: labelY), withAttributes: [
                    .font: valueFont,
                    .foregroundColor: valueTextColor
                ])
                
                // 再绘制图标（在标签下方，和标签居中对齐）
                let iconX = labelX + (labelSize.width - iconSize.width) / 2
                let iconY = labelY + labelSize.height + labelToIconSpace
                let iconRect = CGRect(x: iconX, y: iconY, width: iconSize.width, height: iconSize.height)
                
                // 这里可以换成你自己的图标图片，或者用颜色填充
                dataSet.colors[dataSetIndex % dataSet.colors.count].setFill()
                context.fill(iconRect)
            }
            
            context.restoreGState()
        }
    }
}

3. 最后给你的图表设置自定义渲染器和格式化器：

// 假设你用的是BarChartView
let barChartView = BarChartView(frame: view.bounds)
barChartView.renderer = CustomBarChartRenderer(dataProvider: barChartView, animator: barChartView.chartAnimator, viewPortHandler: barChartView.viewPortHandler)

// 设置数据时给数据集配置格式化器
let dataSet = BarChartDataSet(entries: yourEntries, label: "")
dataSet.valueFormatter = CustomValueFormatter()
dataSet.isDrawValuesEnabled = true
barChartView.data = BarChartData(dataSet: dataSet)

这样就能把数据点的数字标签移到图标上方，间距和位置都能精准控制~

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