6柱状图数据的绘制(MPAndroidChart源码解析)

Chart中数据的绘制时通过一系列的Renderer类来实现的,类结构如下:


Renderer.png

下面以BarChartRenderer为例讲解。

1. BarBuffer(防止对象重复创建)

由于Renderer中方法的执行大部分都是在onDraw方法中,为了防止对象的频繁创建而引起内存抖动问题(会造成卡段现象),这里使用了Buffer的方式。
BarBuffer中维护了一个float[],用来存储所绘制的所有的点信息(Bar就是一个矩形,大小由left,top,right,bottom四个点所决定),BarBuffer保存了所有数据的原始value值,当我们缩放或者平移之后,会遍历buffer中的每一个数据,先判断这个数据是否在可见范围内才绘制,这样至始至终,无论是动画还是缩放或者是拖拽,我们都是从buffer中取数据,然后根据Utils中的matrix的信息映射出px值进行绘制,防止每次绘制都要重新创建一系列的点。
先来看一下BarBuffer中的主要字段:

 /** float-buffer that holds the data points to draw, order: x,y,x,y,... */
    public final float[] buffer;
//设置为1每一个bar会充满它所在的x-index组,如果设置为0.9,相邻两个bar之间就会有一个0.1的间隔
    protected float mBarWidth = 1f;

BarBuffer中最重要的一个方法是feed(IBarDataSet data),它会遍历传入的BarDataSet中所有的BarEntry,根据BarEntry的x,y生成当前bar的left,top,right,bottom,然后存如buffer中:

 @Override
    public void feed(IBarDataSet data) {
        //phaseX 是x轴动画的进度,可以先认为是1
        float size = data.getEntryCount() * phaseX;
        //1.根据mBarWidth计算出bar的一半宽度,注意此时是百分比值
        float barWidthHalf = mBarWidth / 2f;

        for (int i = 0; i < size; i++) {

            BarEntry e = data.getEntryForIndex(i);

            if(e == null)
                continue;

            float x = e.getX();
            float y = e.getY();
            float[] vals = e.getYVals();
            //非堆叠图
            if (!mContainsStacks || vals == null) {
                //2.以barEntry的x为中心点,计算出left,top,right,bottom
                float left = x - barWidthHalf;
                float right = x + barWidthHalf;
                float bottom, top;

                if (mInverted) {
                    bottom = y >= 0 ? y : 0;
                    top = y <= 0 ? y : 0;
                } else {
                    top = y >= 0 ? y : 0;
                    bottom = y <= 0 ? y : 0;
                }

                // multiply the height of the rect with the phase
                if (top > 0)
                    top *= phaseY;
                else
                    bottom *= phaseY;
                //3.添加到buffer中
                addBar(left, top, right, bottom);
            } else {//堆叠图
             ...
            }
        }
        //重置index
        reset();
    }

2.BarBuffer的初始化

在BarLineChartBase的中会调用Renderer的initBuffers()方法

 @Override
    public void notifyDataSetChanged() {
        ...
        if (mRenderer != null)
            mRenderer.initBuffers();
     ...
    }
   @Override
    public void initBuffers() {
        BarData barData = mChart.getBarData();
        mBarBuffers = new BarBuffer[barData.getDataSetCount()];

        for (int i = 0; i < mBarBuffers.length; i++) {
            IBarDataSet set = barData.getDataSetByIndex(i);
            mBarBuffers[i] = new BarBuffer(set.getEntryCount() * 4 * (set.isStacked() ? set.getStackSize() : 1),
                    barData.getDataSetCount(), set.isStacked());
        }
    }

上面的代码只是初始化了Barbuffer中长度,向其填充内容实在绘制每一个DataSet中进行的。

 protected void drawDataSet(Canvas c, IBarDataSet dataSet, int index) {
        Transformer trans = mChart.getTransformer(dataSet.getAxisDependency());
        float phaseX = mAnimator.getPhaseX();
        float phaseY = mAnimator.getPhaseY();
        ...
         BarBuffer buffer = mBarBuffers[index];
        buffer.setPhases(phaseX, phaseY);
        buffer.setDataSet(index);
        buffer.setInverted(mChart.isInverted(dataSet.getAxisDependency()));
        buffer.setBarWidth(mChart.getBarData().getBarWidth());
        //调用feed方法,填充一系列的point
        buffer.feed(dataSet);
        //上面的buffer只是原始值value,需要通过Transformer映射成px值
        trans.pointValuesToPixel(buffer.buffer);
        ...
 }

通过上面的操作,Barbuffer中就填充好了所有要绘制的数据(px值),剩下的就是遍历这个buffer,四个点为一组绘制矩形了。
下面来看一下具体的绘制过程。

3.具体绘制流程

首先会遍历BarData绘制所有的DataSet:

 @Override
    public void drawData(Canvas c) {
        BarData barData = mChart.getBarData();
        for (int i = 0; i < barData.getDataSetCount(); i++) {
            IBarDataSet set = barData.getDataSetByIndex(i);
            if (set.isVisible()) {
                drawDataSet(c, set, i);
            }
        }
    }

在drawDataSet()中会先想BarBuffer中填充数据,然后遍历buffer绘制矩形,需要注意的是,只会绘制在可见区域中的数据,可见区域就是ViewPortHandler中的mContentRect:

 protected void drawDataSet(Canvas c, IBarDataSet dataSet, int index) {

        Transformer trans = mChart.getTransformer();
        //TODO 动画暂不处理
//        float phaseX = mAnimator.getPhaseX();
//        float phaseY = mAnimator.getPhaseY();

        float phaseX = 1f;
        float phaseY = 1f;
        
        //1.初始化buffer
        BarBuffer buffer = mBarBuffers[index];
        buffer.setPhases(phaseX, phaseY);
        buffer.setDataSet(index);
        buffer.setInverted(false);
        buffer.setBarWidth(mChart.getBarData().getBarWidth());
        buffer.feed(dataSet);
        trans.pointValuesToPixel(buffer.buffer);

        final boolean isSingleColor = dataSet.getColors().size() == 1;
        if (isSingleColor) {
            mRenderPaint.setColor(dataSet.getColor());
        }
        
        //2.遍历buffer绘制矩形
        for (int j = 0; j < buffer.size(); j += 4) {
            //如果这个bar的right 小于 content的left就不绘制
            if (!mViewPortHandler.isInBoundsLeft(buffer.buffer[j + 2]))
                continue;
            //如果这个bar的left大于content的right就不绘制
            if (!mViewPortHandler.isInBoundsRight(buffer.buffer[j]))
                break;

            if (!isSingleColor) {
                mRenderPaint.setColor(dataSet.getColor(j / 4));
            }
            c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],
                    buffer.buffer[j + 3], mRenderPaint);
        }
    }

4.绘制柱状图上面的文字

文字的绘制是在drawValues方法中,类似于矩形的绘制,也是遍历BarBuffer进行绘制,我们只看单独绘制一个dataSet中文字的流程:

 //0.获取要绘制的dataSet
                IBarDataSet dataSet = datasets.get(i);
                //1.是否要绘制文字
                if (!shouldDrawValues(dataSet)) {
                    continue;
                }
//                mValuePaint.setTextSize(dataSet.getValueTextSize());
//                boolean isInverted = mChart.isInverted(dataSet.getAxisDependency());
                boolean isInverted = false;
                //2.计算文字的高度
                float valueTextHeight = Utils.calcTextHeight(mValuePaint, "8");
                posOffset = (drawValueAboveBar ? -valueOffsetPlus : valueTextHeight + valueOffsetPlus);
                negOffset = (drawValueAboveBar ? valueTextHeight + valueOffsetPlus : -valueOffsetPlus);

                if (isInverted) {
                    posOffset = -posOffset - valueTextHeight;
                    negOffset = -negOffset - valueTextHeight;
                }
                //3.获取buffer
                BarBuffer buffer = mBarBuffers[i];
                //TODO 动画相关,暂不考虑
//                final float phaseY = mAnimator.getPhaseY();
                final float phaseY = 1;

                //4.遍历属于该dataSet下的buffer绘制文字
                if (!dataSet.isStacked()) {
                    // TODO 动画相关,暂不考虑
//                    for (int j = 0; j < buffer.buffer.length * mAnimator.getPhaseX(); j += 4) {
                    //
                    for (int j = 0; j < buffer.buffer.length; j += 4) {
                        //5.文字的中心位置在bar的中心
                        float x = (buffer.buffer[j] + buffer.buffer[j + 2]) / 2f;
                        //6.从左向右绘制,如果某个value的x超过了content的right则不绘制
                        if (!mViewPortHandler.isInBoundsRight(x))
                            break;
                        //7.不在可见区域中的数据不会只文字
                        if (!mViewPortHandler.isInBoundsY(buffer.buffer[j + 1])
                                || !mViewPortHandler.isInBoundsLeft(x))
                            continue;
                        BarEntry entry = dataSet.getEntryForIndex(j / 4);
                        //8.获取绘制的文字原始值,如果设置了valueFormatter,就会格式化一下这个原始值
                        float val = entry.getY();

                        if (dataSet.isDrawValuesEnabled()) {
                            //9.开始绘制文字
                            drawValue(c, dataSet.getValueFormatter(), val, entry, i, 
                                    x,//绘制文字的x中心点
                                    val >= 0 ? (buffer.buffer[j + 1] + posOffset) : (buffer.buffer[j + 3] + negOffset),//文字的top点,就是bar的top加上文字的高度
                                    dataSet.getValueTextColor()
                            );
                        }
                    }

drawValue方法如下,这里就不讲解了:

 public void drawValue(Canvas c, IValueFormatter formatter, float value, Entry entry, int dataSetIndex, float x, float y, int color) {
        mValuePaint.setColor(color);
        c.drawText(formatter.getFormattedValue(value, entry, dataSetIndex, mViewPortHandler), x, y, mValuePaint);
    }

到这里,数据的绘制就分析完了,后面将会分析Highlight的处理。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容