如何在Android中使用MPAndroidChart库绘制从右到左方向的折线图?

huangapple go评论90阅读模式
英文:

How to Plot Line Chart in reverse direction ie. starting from right to left direction in Android using MPAndroidChart library?

问题

抱歉,你的要求是只返回翻译好的代码部分,不包括其他内容。以下是代码部分的翻译:

class CustomLineChartRender(
    chart: LineDataProvider?,
    animator: ChartAnimator?,
    viewPortHandler: ViewPortHandler?
) : LineChartRenderer(chart, animator, viewPortHandler) {
    override fun drawHorizontalBezier(dataSet: ILineDataSet) {

        val phaseY = mAnimator.phaseY

        val trans = mChart.getTransformer(dataSet.axisDependency)

        mXBounds[mChart] = dataSet

        cubicPath.reset()

        if (mXBounds.range >= 1) {
            var prev = dataSet.getEntryForIndex(mXBounds.max)
            var cur = prev

            // 让样条线开始
            cubicPath.moveTo(cur.x, cur.y * phaseY)
            //for (j in mXBounds.min + 1..mXBounds.range + mXBounds.min) {
            for (j in (mXBounds.min until mXBounds.max).reversed()) {
                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
    }
}

请注意,我只提供了代码的翻译部分,不包括其他内容。如果需要其他帮助,请随时提问。

英文:

Hi I am using this library https://github.com/PhilJay/MPAndroidChart and trying to draw line chart from Endpoint to Start point that is from right to left direction, I followed library document and tried to implement below custom class code:

    class CustomLineChartRender(
    chart: LineDataProvider?,
    animator: ChartAnimator?, viewPortHandler: ViewPortHandler?,
) : LineChartRenderer(chart, animator, viewPortHandler) {
    override fun drawHorizontalBezier(dataSet: ILineDataSet) {

        val phaseY = mAnimator.phaseY

        val trans = mChart.getTransformer(dataSet.axisDependency)

        mXBounds[mChart] = dataSet

        cubicPath.reset()

        if (mXBounds.range >= 1) {
            var prev = dataSet.getEntryForIndex(mXBounds.max)
            var cur = prev

            // let the spline start
            cubicPath.moveTo(cur.x, cur.y * phaseY)
            //for (j in mXBounds.min + 1..mXBounds.range + mXBounds.min) {
            for (j in (mXBounds.min until mXBounds.max).reversed()) {
                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 filled is enabled, close the path
        if (dataSet.isDrawFilledEnabled) {
            cubicFillPath.reset()
            cubicFillPath.addPath(cubicPath)
            // create a new path, this is bad for performance
            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
    }
}

But above code stops animation lineChart.animateX(1000, Easing.EasingOption.Linear)starting from right direction at all. Any pointer will be appreciated!!

Current behavior is Line chart start rendering from Left to Right direction and
Expected behavior is Line chart should start rendering from Right to Left direction with animation

Thank You

答案1

得分: -1

以下是翻译好的内容:

这里是一个简单的解决方案,我找到了一个几乎不需要太多代码的方法,如果有人正在研究它的话:

在你的XML文件中,在折线图的上方添加一个视图,如下所示:

<FrameLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">
    <com.github.mikephil.charting.charts.LineChart
       android:id="@+id/lineChart"
       android:layout_width="400dp"
       android:layout_height="244dp"/>
    
    <LinearLayout
       android:id="@+id/llOverLay"
       android:layout_width="400dp"
       android:layout_height="200dp"
       android:background="@color/white"/>
</FrameLayout>

首先不带动画渲染折线图

lineChart?.invalidate()

然后从右向左应用展开动画,将llOverLayView移动到折线图的上方,如下所示

lineChart?.doOnLayout {
    ObjectAnimator.ofFloat(binding.llOverLay, "translationX", -screenWidth).apply {
        duration = 1000
        start()
    }
}

现在这样可以使折线图从右向左渲染,就是这样!

请注意,这种方法有一个限制,它要求在一个固定方向上渲染单个或多个系列,要么正向要么反向,但不能同时进行。

英文:

Here is an easy solution I found without any much code if anyone is looking into it:-

Inside your XML file add one View on top of line chart like that below:-

    &lt;FrameLayout
       android:layout_width=&quot;wrap_content&quot;
       android:layout_height=&quot;wrap_content&quot;&gt;
    &lt;com.github.mikephil.charting.charts.LineChart
       android:id=&quot;@+id/lineChart&quot;
       android:layout_width=&quot;400dp&quot;
       android:layout_height=&quot;244dp&quot;/&gt;
    
    &lt;LinearLayout
       android:id=&quot;@+id/llOverLay&quot;
       android:layout_width=&quot;400dp&quot;
       android:layout_height=&quot;200dp&quot;
       android:background=&quot;@color/white&quot;/&gt;
   &lt;/FrameLayout&gt;

Rendered line chart without animation first

lineChart?.invalidate()

Then apply reveal animation from right to left which is translate llOverLayView on top of line chart like below

lineChart?.doOnLayout {
    ObjectAnimator.ofFloat(binding.llOverLay, &quot;translationX&quot;, -screenWidth).apply {
                                    duration = 1000
                                    start()
}

Now this makes Line Chart rendering from right to left and thats it!!

Please be advised, this approach has one restriction which enforced single or multiple series rendering in one fixed direction. Either forward or reverse direction at the same time.

huangapple
  • 本文由 发表于 2023年6月1日 03:19:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76376641.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定