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

【问题标题】：How do MPAndroidChart renderers work and how do I write a custom renderer?MPAndroidChart 渲染器如何工作以及如何编写自定义渲染器？
【发布时间】：2017-09-12 14:48:42
【问题描述】：

我正在使用库 MPAndroidChart，但它没有我想要的所有功能。

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

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

MPAndroidChart 渲染器如何工作？

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

【问题讨论】：

标签： android mpandroidchart

【解决方案1】：

了解视图和画布

首先，应该研究一下 Android 官方文档中的Canvas and Drawables Guide。特别需要注意的是，LineChart、BarChart 等是 View 的子类，它们通过覆盖 View 超类的 onDraw(Canvas c) 回调来显示自己。还要注意“画布”的定义：

Canvas 为您充当伪装或界面，用于绘制图形的实际表面——它包含您所有的“绘制”调用。

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

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

图表上的点被指定为相对于图表上单位的 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值。

在上图中，条形图“知道”6 及以上的BarEntry，但由于它们超出范围且不在当前视口中，因此不会渲染 6 及以上。因此，x 值 0 到 5 都在当前视口内。

ChartAnimator

ChartAnimator 提供了要应用于图表的附加转换。通常这是一个简单的乘法。例如，假设我们想要一个动画，其中图表的点从底部开始，并在 1 秒内逐渐上升到正确的 y 值。动画师将提供一个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 循环基本上意味着“对于在视口左右边界内的每个点”。渲染看不见的 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) 和其他方法轻松使用它。

【讨论】：