使用MPAndroidChart添加彩色区域后网格线前置显示问题求助

核心思路 #

问题根源在于彩色区域的绘制层级高于网格线，调整绘制顺序，让彩色区域在网格线绘制之前完成渲染，就能保证网格线显示在前景。

方法一：自定义图表并重写绘制流程 #

以LineChart为例，自定义子类调整绘制顺序：

class CustomLineChart(context: Context, attrs: AttributeSet?) : LineChart(context, attrs) {
    private val paint = Paint().apply {
        color = Color.parseColor("#E0F7FA") // 自定义彩色区域颜色
        style = Paint.Style.FILL
    }
    private val lowerLimit = 20f // 区域下限值
    private val upperLimit = 60f // 区域上限值

    override fun draw(canvas: Canvas) {
        // 1. 先绘制彩色区域
        drawColorRange(canvas)
        // 2. 再执行原有的绘制流程（包含网格线、数据等）
        super.draw(canvas)
    }

    private fun drawColorRange(canvas: Canvas) {
        val left = viewPortHandler.contentLeft()
        val right = viewPortHandler.contentRight()
        // 将Y轴数值转换为画布坐标
        val bottomY = getTransformer(YAxis.AxisDependency.LEFT).getPixelForValue(lowerLimit)
        val topY = getTransformer(YAxis.AxisDependency.LEFT).getPixelForValue(upperLimit)
        
        canvas.drawRect(left, topY, right, bottomY, paint)
    }
}

彩色区域会被后续绘制的网格线覆盖，自然显示在网格线下方。

方法二：自定义AxisRenderer绘制彩色区域 #

如果需要基于Y轴的LimitLine动态确定区域，可自定义Y轴渲染器，在网格线绘制前添加彩色区域：

class CustomYAxisRenderer(
    viewPortHandler: ViewPortHandler,
    yAxis: YAxis,
    trans: Transformer
) : YAxisRenderer(viewPortHandler, yAxis, trans) {
    private val fillPaint = Paint().apply {
        color = Color.parseColor("#E8F5E9")
        style = Paint.Style.FILL
    }

    override fun renderGridLines(canvas: Canvas) {
        // 先绘制彩色区域
        drawColorRangeBetweenLimits(canvas)
        // 再绘制网格线
        super.renderGridLines(canvas)
    }

    private fun drawColorRangeBetweenLimits(canvas: Canvas) {
        val left = viewPortHandler.contentLeft()
        val right = viewPortHandler.contentRight()
        // 读取Y轴已添加的LimitLine
        val limitLines = yAxis.limitLines
        if (limitLines.size >= 2) {
            val lower = limitLines[0].limit
            val upper = limitLines[1].limit
            val bottomY = transformer.getPixelForValue(lower)
            val topY = transformer.getPixelForValue(upper)
            canvas.drawRect(left, topY, right, bottomY, fillPaint)
        }
    }
}

给图表设置自定义Y轴渲染器：

chart.yAxisRenderer = CustomYAxisRenderer(chart.viewPortHandler, chart.axisLeft, chart.getTransformer(YAxis.AxisDependency.LEFT))

关键注意点 #

• 用viewPortHandler.contentLeft()/contentRight()获取图表内容区域边界，避免彩色区域超出范围。
• 通过transformer.getPixelForValue()完成Y轴数值到画布坐标的转换，适配缩放、平移状态。

内容的提问来源于stack exchange，提问作者Iñigo Bereciartua