Android中使用MPAndroidChart实现从右到左折线图的动画问题

问题根源 #

你自定义的CustomLineChartRender重写drawHorizontalBezier时，没有结合动画的phaseX参数（控制X轴动画进度），直接遍历了所有可见点，导致animateX的动画逻辑完全失效。同时默认动画是基于左到右的进度，需要调整为右到左的进度映射。

修复方案 #

修改自定义Renderer的drawHorizontalBezier方法，加入phaseX的处理，根据动画进度反向计算需要绘制的点范围：

class CustomLineChartRender(
    chart: LineDataProvider?,
    animator: ChartAnimator?, 
    viewPortHandler: ViewPortHandler?,
) : LineChartRenderer(chart, animator, viewPortHandler) {
    override fun drawHorizontalBezier(dataSet: ILineDataSet) {
        val phaseY = mAnimator.phaseY
        // 获取X轴动画进度，0表示动画开始，1表示动画结束
        val phaseX = mAnimator.phaseX

        val trans = mChart.getTransformer(dataSet.axisDependency)
        mXBounds[mChart] = dataSet

        cubicPath.reset()

        if (mXBounds.range >= 1) {
            // 动画进度反向映射：phaseX=0时只显示最右侧点，phaseX=1时显示全部
            val animatedMaxIndex = mXBounds.max - ((mXBounds.max - mXBounds.min) * phaseX).toInt()
            var prev = dataSet.getEntryForIndex(mXBounds.max)
            var cur = prev

            cubicPath.moveTo(cur.x, cur.y * phaseY)

            // 从最右侧开始，绘制到animatedMaxIndex对应的点
            for (j in mXBounds.max - 1 downTo animatedMaxIndex) {
                prev = cur
                cur = dataSet.getEntryForIndex(j)
                val cpx = (prev.x - (prev.x - cur.x) / 2.0f)
                cubicPath.cubicTo(
                    cpx, prev.y * phaseY,
                    cpx, cur.y * phaseY,
                    cur.x, cur.y * phaseY
                )
            }
        }

        if (dataSet.isDrawFilledEnabled) {
            cubicFillPath.reset()
            cubicFillPath.addPath(cubicPath)
            drawCubicFill(mBitmapCanvas, dataSet, cubicFillPath, trans, mXBounds)
        }

        mRenderPaint.color = dataSet.color
        mRenderPaint.style = Paint.Style.STROKE
        trans.pathValueToPixel(cubicPath)
        mBitmapCanvas.drawPath(cubicPath, mRenderPaint)
        mRenderPaint.pathEffect = null
    }
}

关键修改说明 #

• 引入phaseX参数：通过mAnimator.phaseX获取X轴动画的进度值（0到1），将其反向映射为右到左的绘制进度。
• 动态计算绘制范围：animatedMaxIndex根据phaseX计算当前动画进度下应该绘制到的点索引，动画开始时（phaseX=0）只绘制最右侧的点，随着动画推进（phaseX从0到1），逐步向左绘制更多点。
• 调整遍历方向：保持从右往左的遍历逻辑，但限制遍历的终点为animatedMaxIndex，实现动画逐步展开的效果。

额外注意事项 #

• 确保你的lineChart已经设置了自定义Renderer：lineChart.renderer = CustomLineChartRender(lineChart, lineChart.animator, lineChart.viewPortHandler)
• 如果使用的是非贝塞尔折线（普通折线），需要同时重写drawLinear方法，用同样的逻辑处理phaseX参数。

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