MPAndroidChart渲染器如何工作以及如何编写自定义渲染器？

Question

我正在使用库MPAndroidChart但它没有开箱即用的所有功能.

我听说可以通过编写自定义渲染器来实现我想要的功能.

我查看了MPAndroidChart GitHub仓库中渲染器的源代码,但我无法理解所涉及的概念.

MPAndroidChart渲染器如何工作？

编写自定义渲染器的高级过程是什么？

_{注意:对于在mpandroidchart上发布的许多问题,解决方案是实现某种自定义渲染器.如果没有指南,对"你可以通过编写自定义渲染器来解决这个问题"这样的问题的评论是不满意的.编写包含完整解决方案的答案可能非常耗时.没有现成的编写自定义渲染器的指南,希望这个问题可以作为提问者能够帮助自己的实用工具,如果不是重复的目标.虽然我在这里尝试了自己的答案,但欢迎其他答案,更正和评论.}

Answer 1

了解视图和画布

首先,应该从官方Android文档中学习Canvas and Drawables Guide.特别重要的是要注意LineChart,BarChart等等是View通过覆盖onDraw(Canvas c)View超类的回调来显示它们自己的子类.另请注意"画布"的定义:

Canvas可以作为一个伪装或界面,用于绘制图形的实际表面 - 它可以保存所有"绘制"调用.

当您使用渲染器时,您将处理在画布上绘制线条,条形等的功能.

图表上的值与画布上的像素之间的转换

图表上的点指定为相对于图表上单位的x和y值.例如,在下面的图表中,第一个条的中心位于x = 0.第一个条的y值为52.28.

这显然与画布上的像素坐标不对应.在画布x = 0上,画布上最左边的像素显然是空白的.同样,因为像素枚举从顶部开始y = 0,所以条形的尖端显然不在52.28(图表上的y值).如果我们使用开发人员选项/指针位置我们可以看到,第一棒的尖端大约是x = 165和y = 1150.

A Transformer负责将图表值转换为像素(屏幕上)坐标,反之亦然.渲染器中的常见模式是使用图表值(更容易理解)执行计算,然后使用变换器将变换应用于渲染到屏幕上.

查看端口和边界

视口是一个窗口,即图表上的有界区域.视图端口用于确定用户当前可以看到的图表的哪个部分.每个图表都包含一个ViewPortHandler封装与视图端口相关的功能.我们可以ViewPortHandler#isInBoundsLeft(float x) isInBoundsRight(float x)用来确定用户当前可以看到的x值.

在上面的图表中,BarChart"知道" BarEntryfor 6及以上,但因为它们超出界限而不在当前视口中,所以不会渲染6和向上.因此,x值0到5当前视口内.

ChartAnimator

它ChartAnimator提供了一个应用于图表的附加转换.通常这是一个简单的乘法.例如,假设我们想要一个动画,其中图表的点从底部开始,并逐渐上升到正确的y值超过1秒.动画师将提供一个phaseY即简单的标量开始于0.000在时间0ms和逐渐上升到1.000在1000ms.

渲染器代码的示例

既然我们理解了所涉及的基本概念,那么让我们看看以下代码LineChartRenderer:

protected void drawHorizontalBezier(ILineDataSet dataSet) {

    float phaseY = mAnimator.getPhaseY(); 

    Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());

    mXBounds.set(mChart, dataSet);

    cubicPath.reset();

    if (mXBounds.range >= 1) {

        Entry prev = dataSet.getEntryForIndex(mXBounds.min);
        Entry cur = prev;

        // let the spline start
        cubicPath.moveTo(cur.getX(), cur.getY() * phaseY);

        for (int j = mXBounds.min + 1; j <= mXBounds.range + mXBounds.min; j++) {

            prev = cur;
            cur = dataSet.getEntryForIndex(j);

            final float cpx = (prev.getX())
                    + (cur.getX() - prev.getX()) / 2.0f;

            cubicPath.cubicTo(
                    cpx, prev.getY() * phaseY,
                    cpx, cur.getY() * phaseY,
                    cur.getX(), cur.getY() * 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.setColor(dataSet.getColor());

    mRenderPaint.setStyle(Paint.Style.STROKE);

    trans.pathValueToPixel(cubicPath);

    mBitmapCanvas.drawPath(cubicPath, mRenderPaint);

    mRenderPaint.setPathEffect(null);
}

for循环前的前几行是渲染器循环的设置.请注意,我们phaseY从ChartAnimator,Transformer获取,并计算视图端口边界.

该for环路基本上意味着"对于作为所述视口的左和右范围内的每个点".渲染无法看到的x值没有意义.

在循环中,我们使用当前条目获取x值和y值,dataSet.getEntryForIndex(j)并在该值和前一个条目之间创建路径.请注意路径是如何与phaseYfor动画相乘的.

最后,在计算了路径之后,应用了转换,trans.pathValueToPixel(cubicPath);并将路径渲染到画布上mBitmapCanvas.drawPath(cubicPath, mRenderPaint);

编写自定义渲染器

第一步是选择正确的子类.请注意,在包中的类com.github.mikephil.charting.renderer,包括XAxisRenderer和LineChartRenderer一旦你建立一个子类,你可以简单地重写适当的方法.根据上面的示例代码,我们将在不调用的void drawHorizontalBezier(ILineDataSet dataSet)情况下覆盖super(以便不调用渲染阶段两次)并将其替换为我们想要的功能.如果你做得对,被覆盖的方法应该至少看起来像你要覆盖的方法:

1. 获取变压器,动画师和边界的句柄
2. 循环显示可见的x值(视图端口范围内的x值)
3. 准备要在图表值中渲染的点
4. 将点转换为画布上的像素
5. 使用Canvas类方法在画布上绘制

您应该研究Canvas类中的方法(drawBitmap等),以查看允许在渲染器循环中执行哪些操作.

如果未公开您需要覆盖的方法,则可能必须为基本渲染器创建子类,LineRadarRenderer以实现所需的功能.

一旦设计了所需的渲染器子类,就可以使用Chart#setRenderer(DataRenderer renderer)or BarLineChartBase#setXAxisRenderer(XAxisRenderer renderer)和其他方法轻松使用它.