基于MPAndroidChart实现股票K线图之自定义HighL

1 前言

之前的文章提到过如何基于MPAndroidChart来实现股票K线图的效果，显然这个开源框架十分强大，连缩放、拖曳、坐标自动适配数据等交互细节都很高效率地完善了。但毕竟是别人写的框架，再强大也未必能够满足老板和产品经理的需求。所以下面就从源码入手 进行手指选中时HighLight的自定义。

2 源码梳理

我们研究的对象是BarChart:

1. BarChart

public class BarChart extends BarLineChartBase<BarData> implements BarDataProvider {

里面并没有关于绘制的逻辑，只有一些set/get方法。
于是我们把目标放在父类BarLineChartBase。

2. BarLineChartBase

 ......
  protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        ......
            this.mXAxisRenderer.renderAxisLine(canvas);
            this.mAxisRendererLeft.renderAxisLine(canvas);
            this.mAxisRendererRight.renderAxisLine(canvas);
            ...
            this.mXAxisRenderer.renderGridLines(canvas);
            this.mAxisRendererLeft.renderGridLines(canvas);
            this.mAxisRendererRight.renderGridLines(canvas);
            
            if(this.mXAxis.isDrawLimitLinesBehindDataEnabled()) {
                this.mXAxisRenderer.renderLimitLines(canvas);
            }

            if(this.mAxisLeft.isDrawLimitLinesBehindDataEnabled()) {
                this.mAxisRendererLeft.renderLimitLines(canvas);
            }

            if(this.mAxisRight.isDrawLimitLinesBehindDataEnabled()) {
                this.mAxisRendererRight.renderLimitLines(canvas);
            }
            ...
             this.mXAxisRenderer.renderAxisLabels(canvas);
            this.mAxisRendererLeft.renderAxisLabels(canvas);
            this.mAxisRendererRight.renderAxisLabels(canvas);
            this.mRenderer.drawValues(canvas);
            this.mLegendRenderer.renderLegend(canvas);
            this.drawMarkers(canvas);
            this.drawDescription(canvas);
            ...
            }

一下子就看了我们想要的onDraw(Canvas canvas)方法，在Android中，一般控件即View的绘制都是在这里面完成。
很容易就发现，onDraw(Canvas canvas)里的逻辑基本上都是一些“Renderer”。这个单词的字面意思就是渲染器，从源码里面可以看到，不同的Renderer负责绘制整个Chart的不同部分，下图大概地展示了Renderer的职责：

public abstract class DataRenderer extends Renderer {.
......
    public abstract void drawHighlighted(Canvas var1, Highlight[] var2);
    }

3. 把目光重新放到BarChart上：
   构造函数中执行了init()进行一些成员变量的初始化。

public class BarChart extends BarLineChartBase<BarData> implements BarDataProvider {
/** * object responsible for rendering the data */
protected DataRenderer mRenderer;
protected void init() {
        super.init();
        this.mRenderer = new BarChartRenderer(this, this.mAnimator, this.mViewPortHandler);
        this.mXAxisRenderer = new XAxisRendererBarChart(this.mViewPortHandler, this.mXAxis, this.mLeftAxisTransformer, this);
        this.setHighlighter(new BarHighlighter(this));
        this.mXAxis.mAxisMinimum = -0.5F;
    }

可以看到，在BarChart中，DataRenderer 的具体实现是BarChartRenderer。

4. BarChartRender
   终于找到源码绘制HighLight的逻辑。

 public class BarChartRenderer extends DataRenderer {
....
            public void drawHighlighted(Canvas c, Highlight[] indices) {
                int setCount = this.mChart.getBarData().getDataSetCount();

                for (int i = 0; i < indices.length; ++i) {
                    Highlight h = indices[i];
                    int index = h.getXIndex();
                    int dataSetIndex = h.getDataSetIndex();
                    IBarDataSet set = (IBarDataSet) this.mChart.getBarData().getDataSetByIndex(dataSetIndex);
                    ......
                    BarEntry e = (BarEntry) set.getEntryForXIndex(index);
                    if (e != null && e.getXIndex() == index) {
                        float groupspace = this.mChart.getBarData().getGroupSpace();
                        float x = (float) (index * setCount + dataSetIndex) + groupspace / 2.0F + groupspace * (float) index;
                        float y1 = e.getVal();
                        float y2 = 0.0F;
                        this.prepareBarHighlight(x, y1, y2, barspaceHalf, trans);
                        c.drawRect(this.mBarRect, this.mHighlightPaint);
                    }
                }
            }
        }

最后一行代码是关键，很明显就是绘制一个矩形。所以选中直方的HighLight效果就是整个矩形变暗了。
而我们只需要把drawRect换成drawLine，控制好绘制的位置即可。十分简单，可以说只是修改了一行代码就实现了文章开头想要的效果！
继续往下看：

 this.prepareBarHighlight(x, y1, y2, barspaceHalf, trans);

这个方法进行了位置的计算：

 /**
     * Prepares a bar for being highlighted.
     *
     * @param x            the x-position
     * @param y1           the y1-position
     * @param y2           the y2-position
     * @param barspaceHalf the space between bars
     * @param trans
     */
    protected void prepareBarHighlight(float x, float y1, float y2, float barspaceHalf,
                                       Transformer trans) {
        float barWidth = 0.5f;
        float left = x - barWidth + barspaceHalf;
        float right = x + barWidth - barspaceHalf;
        float top = y1;
        float bottom = y2;
        mBarRect.set(left, top, right, bottom);
        trans.rectValueToPixel(mBarRect, mAnimator.getPhaseY());
    }

3 我们要修改的代码

上面mBarRect就是原本HighLight绘制阴影的区域。
我们要把阴影变成矩形中间的一条直线，这个实在太好办了，把c.drawRect(this.mBarRect, this.mHighlightPaint);换成以下代码。

这条线与X轴垂直，其坐标是：

float xValue = mBarRect.left + (mBarRect.right - mBarRect.left) / 2;

最后开始drawLine:

c.drawLine(xValue,     //startX
                this.mViewPortHandler.contentTop(),    //startY
                xValue,       //stopX
                this.mViewPortHandler.contentBottom(),       //stopY
                this.mHighlightPaint);      //paint

大功告成！

4 总结

想要改变MPAndroidChart的绘制渲染逻辑，从对应的Renderer下手准没错。