阅读 279
MPAndroidChart 修改柱状图高亮效果

MPAndroidChart 修改柱状图高亮效果

MPAndroidChart 默认的选中高亮效果如下:

只是颜色加深,然后设计想要实现下面这种效果:

类似阴影效果,且显示的宽度需要增加。

一、MPAndroidChart 是否支持

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

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

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

二、查看源码实现

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.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

文章分类
Android
文章标签