Question

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

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

我查看了MPAndroidChart GitHub仓库中的source code for the renderers，但我无法理解所涉及的概念。

MPAndroidChart渲染器如何工作？

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

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

Answer 1

了解视图和画布

首先，应该从官方Android文档中学习Canvas and Drawables Guide。特别值得注意的是，LineChart，BarChart等是View的子类，它们通过覆盖View超类的onDraw(Canvas c)回调来显示自己。另请注意＆＃34; canvas＆＃34;的定义：

Canvas可以作为一个假装或界面，用于绘制图形的实际表面 - 它可以保存您所有的＆＃34;绘制＆＃34;调用

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

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

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

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

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

查看端口和边界

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

在上图中，BarChart＆＃34;了解＆＃34;对于6及以上的BarEntry，但由于它们超出界限而不在当前视口中，因此不会渲染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循环之前的前几行是渲染器循环的设置。请注意，我们从ChartAnimator，Transformer获取phaseY，并计算视图端口边界。

for循环基本上意味着＆＃34;对于视口左右边界内的每个点＆＃34;。渲染无法看到的x值是没有意义的。

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

最后，在计算了路径后，将使用trans.pathValueToPixel(cubicPath);应用转换，并使用mBitmapCanvas.drawPath(cubicPath, mRenderPaint);

将路径渲染到画布

编写自定义渲染器

第一步是选择正确的子类。注意课程包com.github.mikephil.charting.renderer包括XAxisRenderer和LineChartRenderer等。在创建子类后，您可以简单地覆盖相应的方法。根据上面的示例代码，我们将覆盖void drawHorizontalBezier(ILineDataSet dataSet)而不调用super（以便不调用呈现阶段两次）并将其替换为我们想要的功能。如果你做得对，被覆盖的方法应该至少看起来像你要覆盖的方法：

获取变压器，动画师和界限上的句柄
循环显示可见的x值（视口内边界内的x值）
准备点以图表值呈现
将点转换为画布上的像素
使用Canvas类方法在画布上绘图

您应该研究Canvas class（drawBitmap等）中的方法，以了解允许您在渲染器循环中执行哪些操作。

如果未公开您需要覆盖的方法，则可能必须子类化LineRadarRenderer之类的基本渲染器以实现所需的功能。

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

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

1 个答案: