柱状图标签触顶裁剪及标签位置自适应设置问题咨询

一、解决柱子触顶时标签被裁剪的问题 #

三种简单有效的处理方式：

1. 增加图表顶部内边距
   给图表顶部预留足够空间放置标签，直接添加一行代码：

barChart.setExtraTopOffset(20f) // 数值可根据文本大小调整，比如文本12f的话，20f足够

2. 调整Y轴最大值，预留缓冲空间
   如果Y轴最大值是固定值（比如你设置的10f），可以给最大值加一点缓冲：

barChart.axisLeft.axisMaximum = 10f + 1f // 也可以根据数据动态计算，比如取所有entry的最大值*1.1f

3. 调整标签偏移量
   让标签稍微向下偏移，避免被顶部裁剪：

dataSet.valueTextOffset = -5f // 负数表示向下偏移，数值按需调整

二、根据柱子高度自动切换标签位置 #

要实现「空间不足时标签在内部，柱子过短时在外部」，需要自定义标签绘制逻辑，步骤如下：

1. 关闭默认的标签绘制
   先关闭DataSet自带的标签绘制，由我们自己控制位置：

dataSet.setDrawValues(false)
// 同时删除原来的 barChart.setDrawValueAboveBar(true) 这行代码

2. 自定义BarChartRenderer绘制标签
   通过重写Renderer的drawValues方法，判断每个柱子的高度和是否触顶，决定标签位置：

// 在handleDate方法中，完成barChart基础配置后添加这段代码
val valueTextSize = 12f
val valuePaint = Paint().apply {
    textSize = valueTextSize
    color = Color.BLACK // 默认外部文本颜色
}
val textHeight = valuePaint.fontMetrics.run { bottom - top }

barChart.renderer = object : BarChartRenderer(barChart, barChart.animator, barChart.viewPortHandler) {
    override fun drawValues(c: Canvas?) {
        super.drawValues(c)
        if (c == null) return
        val chartData = mChart.data ?: return
        val barWidth = chartData.barWidth
        val phaseY = mAnimator.phaseY
        val yAxisMax = mChart.axisLeft.axisMaximum

        for (dataSet in chartData.dataSets) {
            val barDataSet = dataSet as BarDataSet
            if (!barDataSet.isDrawValuesEnabled) continue

            val valueFormatter = barDataSet.valueFormatter
            valuePaint.textSize = barDataSet.valueTextSize

            for (entry in barDataSet.values) {
                entry ?: continue
                val xPos = entry.x - barWidth / 2f + barWidth / 2f // 柱子中心X坐标
                val barHeight = entry.y * phaseY

                // 判断逻辑：触顶 或 柱子太矮时，标签放外部；否则放内部
                val isTouchTop = barHeight >= yAxisMax - textHeight / 2
                val isBarShort = barHeight < textHeight * 1.5 // 阈值可根据需求调整

                val (drawY, textColor) = if (isTouchTop || isBarShort) {
                    // 外部：柱子上方，加一点间距
                    Pair(entry.y * phaseY + textHeight / 2f + 2f, Color.BLACK)
                } else {
                    // 内部：柱子垂直居中
                    Pair(entry.y * phaseY / 2f, Color.WHITE) // 白色文本和深色柱子区分
                }

                valuePaint.color = textColor
                val valueText = valueFormatter.getFormattedValue(entry.y)
                val textBounds = Rect()
                valuePaint.getTextBounds(valueText, 0, valueText.length, textBounds)

                // 转换坐标为屏幕像素
                val pixelCoords = floatArrayOf(xPos, drawY)
                mChart.getTransformer(barDataSet.axisDependency).pointValuesToPixel(pixelCoords)

                // 居中绘制文本
                c.drawText(
                    valueText,
                    pixelCoords[0] - textBounds.width() / 2f,
                    pixelCoords[1] + textBounds.height() / 2f,
                    valuePaint
                )
            }
        }
    }
}

修改后的完整核心代码片段 #

把上述修改整合到你的handleDate方法中，关键部分如下：

private fun handleDate(chartData: Chartdata?) {
    val entries = ArrayList<BarEntry>()
    val labels = ArrayList<String>()
    val colors = ArrayList<Int>()
    val colorMap = mutableMapOf<Float, Int>()
    val rupeesPercentageMap = mutableMapOf<Float, String>()

    // 填充entries、labels、colors等数据的逻辑...

    val dataSet = BarDataSet(entries, "Bar Chart")
    dataSet.colors = colors
    dataSet.setDrawValues(false) // 关闭默认绘制

    val data = BarData(dataSet)

    dataSet.valueFormatter = object : ValueFormatter() {
        override fun getFormattedValue(value: Float): String {
            return try {
                rupeesPercentageMap.getValue(value)
            } catch (e: Exception) {
                e.printStackTrace()
                ""
            }
        }
    }
    data.setValueTextSize(12f)
    barChart.data = data

    // X轴配置...（保留原来的X轴代码）

    barChart.setScaleEnabled(false)
    barChart.enableScroll()
    barChart.description.isEnabled = false
    barChart.animateY(500)

    // Y轴配置...（保留原来的Y轴代码，可调整axisMaximum增加缓冲）
    barChart.axisLeft.axisMaximum = 10f + 1f // 增加缓冲
    barChart.setExtraTopOffset(20f) // 增加顶部内边距

    // 自定义Renderer绘制标签
    val valueTextSize = 12f
    val valuePaint = Paint().apply {
        textSize = valueTextSize
        color = Color.BLACK
    }
    val textHeight = valuePaint.fontMetrics.run { bottom - top }

    barChart.renderer = object : BarChartRenderer(barChart, barChart.animator, barChart.viewPortHandler) {
        override fun drawValues(c: Canvas?) {
            super.drawValues(c)
            if (c == null) return
            val chartData = mChart.data ?: return
            val barWidth = chartData.barWidth
            val phaseY = mAnimator.phaseY
            val yAxisMax = mChart.axisLeft.axisMaximum

            for (dataSet in chartData.dataSets) {
                val barDataSet = dataSet as BarDataSet
                if (!barDataSet.isDrawValuesEnabled) continue

                val valueFormatter = barDataSet.valueFormatter
                valuePaint.textSize = barDataSet.valueTextSize

                for (entry in barDataSet.values) {
                    entry ?: continue
                    val xPos = entry.x - barWidth / 2f + barWidth / 2f
                    val barHeight = entry.y * phaseY

                    val isTouchTop = barHeight >= yAxisMax - textHeight / 2
                    val isBarShort = barHeight < textHeight * 1.5

                    val (drawY, textColor) = if (isTouchTop || isBarShort) {
                        Pair(entry.y * phaseY + textHeight / 2f + 2f, Color.BLACK)
                    } else {
                        Pair(entry.y * phaseY / 2f, Color.WHITE)
                    }

                    valuePaint.color = textColor
                    val valueText = valueFormatter.getFormattedValue(entry.y)
                    val textBounds = Rect()
                    valuePaint.getTextBounds(valueText, 0, valueText.length, textBounds)

                    val pixelCoords = floatArrayOf(xPos, drawY)
                    mChart.getTransformer(barDataSet.axisDependency).pointValuesToPixel(pixelCoords)

                    c.drawText(
                        valueText,
                        pixelCoords[0] - textBounds.width() / 2f,
                        pixelCoords[1] + textBounds.height() / 2f,
                        valuePaint
                    )
                }
            }
        }
    }

    barChart.legend.isEnabled = false
    barChart.invalidate()
}

内容的提问来源于stack exchange，提问作者Himanshu Yadav An Anshu