英文:
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:-
<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>
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, "translationX", -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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论