iOS-Chart：如何为柱状图中的零值定制显示方式？

嘿，我完全懂你说的这个问题——iOS-Charts里默认的零值柱子要么几乎缩成一条线，要么干脆不显示，用户确实很难一眼意识到这个位置对应的值是0。这里有几个实用的定制方案，你可以根据自己的需求选：

这种方式既能保留柱状图的形态，又能通过视觉差异让用户快速识别零值。你可以自定义BarChartDataSet来实现：

class CustomBarDataSet: BarChartDataSet {
    override func colorForEntry(_ entry: ChartDataEntry, index: Int) -> UIColor {
        // 零值柱子用灰色区分，正常柱子用主色
        return entry.y == 0 ? UIColor.systemGray : UIColor.systemBlue
    }
    
    override func calcMinMax() {
        super.calcMinMax()
        // 调整Y轴最小值，确保零值的小柱子能显示出来
        if self.yMin >= 0 {
            self.yMin = -0.1
        }
    }
}

// 使用自定义的DataSet
let entries = [
    BarChartDataEntry(x: 0, y: 5),
    BarChartDataEntry(x: 1, y: 0),
    BarChartDataEntry(x: 2, y: 3)
]
let dataSet = CustomBarDataSet(entries: entries, label: "业务数据")
dataSet.drawValuesEnabled = true // 显示数值标签，强化零值认知
let chartData = BarChartData(dataSet: dataSet)
chartView.data = chartData

如果不想显示小柱子，而是直接在对应位置突出显示“0”，可以自定义值格式化器或者渲染器：

自定义值格式化器 #

让零值标签用加粗红色显示，一眼就能注意到：

class ZeroHighlightFormatter: DefaultValueFormatter {
    override func stringForValue(_ value: Double, entry: ChartDataEntry, dataSetIndex: Int, viewPortHandler: ViewPortHandler?) -> String {
        if value == 0 {
            // 零值用醒目文本
            return "*0*"
        }
        return super.stringForValue(value, entry: entry, dataSetIndex: dataSetIndex, viewPortHandler: viewPortHandler)
    }
}

// 应用到DataSet
dataSet.valueFormatter = ZeroHighlightFormatter(decimals: 0)
dataSet.valueTextColor = .red
dataSet.valueFont = UIFont.boldSystemFont(ofSize: 12)

自定义渲染器绘制标记 #

如果想更个性化，比如在零值位置加个小红点+文本：

class CustomBarRenderer: BarChartRenderer {
    override func drawDataSet(context: CGContext, dataSet: IBarChartDataSet, index: Int) {
        super.drawDataSet(context: context, dataSet: dataSet, index: index)
        
        let viewPort = chart.viewPortHandler
        // 遍历所有数据点，找到零值并绘制标记
        for (idx, entry) in dataSet.entries.enumerated() {
            guard entry.y == 0 else { continue }
            
            let barRect = barRects[idx]
            let centerX = barRect.midX
            let bottomY = viewPort.contentBottom + 15
            
            // 绘制小红点
            context.setFillColor(UIColor.red.cgColor)
            context.addArc(center: CGPoint(x: centerX, y: bottomY), radius: 4, startAngle: 0, endAngle: .pi*2, clockwise: false)
            context.fillPath()
            
            // 绘制"0"文本
            let text = "0"
            let textAttr: [NSAttributedString.Key: Any] = [
                .font: UIFont.boldSystemFont(ofSize: 10),
                .foregroundColor: UIColor.red
            ]
            let textSize = text.size(withAttributes: textAttr)
            text.draw(at: CGPoint(x: centerX - textSize.width/2, y: bottomY + 6), withAttributes: textAttr)
        }
    }
}

// 给图表设置自定义渲染器
chartView.renderer = CustomBarRenderer(dataProvider: chartView, animator: chartView.chartAnimator, viewPortHandler: chartView.viewPortHandler)

不管用哪种方案，都可以开启Y轴的零值线，让用户更清晰地感知零值位置：

let leftAxis = chartView.leftAxis
leftAxis.drawZeroLineEnabled = true
leftAxis.zeroLineColor = UIColor.systemGray
leftAxis.zeroLineWidth = 1.0

你可以根据产品的视觉风格，组合这些方案来达到最好的用户体验~

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