MPAndroidChart 修改柱状图高亮效果

MPAndroidChart 默认的选中高亮效果以下：

只是颜色加深，而后设计想要实现下面这种效果：

相似阴影效果，且显示的宽度须要增长。

1、MPAndroidChart 是否支持

查看该框架对外的接口，发现下面两个方法：

BarDataSet set1 = new BarDataSet(yValues, "");
 set1.setHighLightColor(ContextCompat.getColor(this, R.color.black));
 set1.setHighLightAlpha(40);
复制代码

只能修改高亮颜色和透明度，没有办法修改宽度和高度，没法达到咱们想要的效果。 没有办法，只能先查看源码是如何实现，而后尝试去修改了。

2、查看源码实现

从setHighLightAlpha() 方法入手：

//BarDataSet.java
    public void setHighLightAlpha(int alpha) {
        mHighLightAlpha = alpha;
    }

    @Override
    public int getHighLightAlpha() {
        return mHighLightAlpha;
    }
复制代码

查看 getHighLightAlpha() 方法在哪里调用：

//BarChartRenderer.java
    @Override
    public void drawHighlighted(Canvas c, Highlight[] indices) {

        BarData barData = mChart.getBarData();

        for (Highlight high : indices) {

            IBarDataSet set = barData.getDataSetByIndex(high.getDataSetIndex());
            ......
            prepareBarHighlight(e.getX(), y1, y2, barData.getBarWidth() / 2f, trans);

            setHighlightDrawPos(high, mBarRect);
            //原来高亮背景就是绘制了一个矩形
            c.drawRect(mBarRect, mHighlightPaint);
        }
    }

复制代码

从源码中能够看出，点击效果就是经过点击位置，从新绘制一个矩形。 因此重点就是 mBarRect 的赋值。

//BarChartRenderer.java
    protected void prepareBarHighlight(float x, float y1, float y2, float barWidthHalf, Transformer trans) {

        float left = x - barWidthHalf;
        float right = x + barWidthHalf;
        float top = y1;
        float bottom = y2;

        mBarRect.set(left, top, right, bottom);

        trans.rectToPixelPhase(mBarRect, mAnimator.getPhaseY());
    }
复制代码

能够看到只要复写该方法，修改参数，就能够修改高亮矩形框的宽高。

3、代码实现

3.1 重写 BarChartRenderer 类

查看源码，发现 BarChartRenderer 的初始化位置，且支持自定义：

//BarChart.java
    @Override
    protected void init() {
        super.init();
		//初始化地方
        mRenderer = new BarChartRenderer(this, mAnimator, mViewPortHandler);

        setHighlighter(new BarHighlighter(this));

        getXAxis().setSpaceMin(0.5f);
        getXAxis().setSpaceMax(0.5f);
    }
    //支持开发者自定义
    public void setRenderer(DataRenderer renderer) {

        if (renderer != null)
            mRenderer = renderer;
    }
复制代码

自定义 BarChartRenderer：

public class TestBarChartRenderer extends BarChartRenderer {

  private Transformer transformer;

  public TestBarChartRenderer( BarDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler) {
    super(chart, animator, viewPortHandler);
  }

  @Override
  protected void prepareBarHighlight(float x, float y1, float y2, float barWidthHalf, Transformer trans) {
    transformer = trans;
    //修改高亮效果的高度和宽度，getYChartMax获取的就是表格的最大值
    super.prepareBarHighlight(x, mChart.getYChartMax(), y2, barWidthHalf + 0.2f, trans);
  }

}

//设置自定义Renderer
barChart.setRenderer(
        new TestBarChartRenderer(barChart, barChart.getAnimator(), barChart.getViewPortHandler()));
//点击整条数据高亮
barChart.setHighlightFullBarEnabled(true);


复制代码

3.2 修改全部标记视图在同一高度问题

上面修改后虽然效果实现了，可是会致使一个问题，点击数据后，全部的数据的标记视图都在同一高度：

查看源码发现：

//BarChartRenderer.java
    @Override
    public void drawHighlighted(Canvas c, Highlight[] indices) {

        BarData barData = mChart.getBarData();

        for (Highlight high : indices) {

            IBarDataSet set = barData.getDataSetByIndex(high.getDataSetIndex());
            ......
            prepareBarHighlight(e.getX(), y1, y2, barData.getBarWidth() / 2f, trans);
			//修改高亮数据
            setHighlightDrawPos(high, mBarRect);
            //原来高亮背景就是绘制了一个矩形
            c.drawRect(mBarRect, mHighlightPaint);
        }
    }

 protected void setHighlightDrawPos(Highlight high, RectF bar) {
 		//这个位置会影响标记视图的显示位置
        high.setDraw(bar.centerX(), bar.top);
    }
复制代码

因此在 prepareBarHighlight() 方法中修改完数据后，须要在 setHighlightDrawPos() 方法中还原真实的数据。最终代码以下：

public class TestBarChartRenderer extends BarChartRenderer {

  private Transformer transformer;

  public TestBarChartRenderer( BarDataProvider chart, ChartAnimator animator, ViewPortHandler viewPortHandler) {
    super(chart, animator, viewPortHandler);
  }

  @Override
  protected void prepareBarHighlight(float x, float y1, float y2, float barWidthHalf, Transformer trans) {
    transformer = trans;
    //修改高亮背景的高度和宽度
    super.prepareBarHighlight(x, mChart.getYChartMax(), y2, barWidthHalf + 0.2f, trans);
  }

  @Override
  protected void setHighlightDrawPos(Highlight high, RectF bar) {
    if (transformer != null) {
      //还原真实的点击数据
      float barWidthHalf = mChart.getBarData().getBarWidth() / 2f;
      float x = high.getX();
      RectF rectF = new RectF();
      rectF.set(x - barWidthHalf, high.getY(), x + barWidthHalf, 0f);

      transformer.rectToPixelPhase(rectF, mAnimator.getPhaseY());

      super.setHighlightDrawPos(high, rectF);

    } else {
      super.setHighlightDrawPos(high, bar);
    }
  }
}
复制代码

柱状图的实现能够参考：

MPAndroidChart实现堆叠柱状图

MPAndroidChart 自定义 MarkerView