饼状图itemStyle 饼状图的制作方法word

简单绘制饼状图

线上图吧

绘制简单的view主要就是onDraw方法

几个思路简单分析：

1.我们可以绘制几个扇形，然后把扇形拼到一起就是一个圆形的饼图了。

2.我们也可以绘制一个圆形，然后在圆形绘制半径出来。

如上方案很多，简单的view是如此，复杂的view可以拆分成简单的来处理，这样就不会摸不到头脑了。

---

下面介绍方案1的方法：

1.首先绘制饼图我们需要先确定基础的东西，如：圆心、半径等

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mTotalWidth = w - getPaddingLeft() - getPaddingRight();
        mTotalHeight = h - getPaddingTop() - getPaddingBottom();
        mRadius = (float) (Math.min(mTotalWidth, mTotalHeight) / 2 * 0.6);
        //调整,mRadius半径啊
        rectF.left = -mRadius;
        rectF.top = -mRadius;
        rectF.right = mRadius;
        rectF.bottom = mRadius;

    }

2.既然绘制饼图，目的是数据分布情况，这里就开始进行分份了

//这里是把你传进来数据，进行汇总，后面会看每份数据占比，然后在对应到饼图上 
for (int i = 0; i < mDataList.size(); i++) {
            totalNumber += mDataList.get(i).getRatio();
        }

if (totalNumber!=0) {
            //移动画布
            canvas.translate(mTotalWidth/2,mTotalHeight/2);
            //绘制开始的方法
            mydrawArc(canvas, rectF);
        }

3.正式开始绘制的流程，其实很简单的

private void mydrawArc(Canvas canvas, RectF rectF) {
  //开始绘制的角度，其实从什么角度都可以
  startAngle = 0;
  //这是我自己在外围绘制了一个圈
 canvas.drawCircle(0,0, mRadius+5, paintCircle);
  //下面循环绘制每个扇形区域了
  for (int i = 0; i < mDataList.size(); i++) {
    //获取传入数据的值，并计算占多少弧度
     float ratio = mDataList.get(i).getRatio();
     float sweepAngle = (ratio / totalNumber) * 360;
//绘制扇形了           paint.setColor(Color.parseColor(mDataList.get(i).getColor()));
            canvas.drawArc(rectF, startAngle, sweepAngle, true, paint);
    //计算扇形中间的坐标值，用于绘制引出线来显示占比多少
     float pxs = (float) (mRadius * Math.cos(Math.toRadians(startAngle + sweepAngle / 2)));
      float pys = (float) (mRadius * Math.sin(Math.toRadians(startAngle + sweepAngle / 2)));
      float pxt = (float) ((mRadius + 20) * Math.cos(Math.toRadians(startAngle + sweepAngle / 2)));
      float pyt = (float) ((mRadius + 20) * Math.sin(Math.toRadians(startAngle + sweepAngle / 2)));
    //这里绘制的是引出线
    canvas.drawLine(pxs, pys, pxt, pyt, paintLine);
    //用于比较引出线的朝向
      endAngle=startAngle+sweepAngle/2;
    //显示占比多少的数字
     String format = String.format("%.2f", (ratio / totalNumber)*100);
       float v = paintText.measureText(format + "%");
        //这里绘制的是引出线，绘制上数字
            if (endAngle>90&&endAngle<270) {
                canvas.drawLine(pxt, pyt, pxt-20, pyt, paintLine);
                canvas.drawText(format + "%", pxt-20-v, pyt, paintText);
            }else {
                canvas.drawLine(pxt, pyt, pxt+20, pyt, paintLine);
                canvas.drawText(format + "%", pxt+20, pyt, paintText);
            }
            //更新其实的角度
            startAngle += sweepAngle;
        }

    }

如上基本完成了整个的绘制流程

结语

自己定义view其实并没有多难，只要你开始做，你就一定可以。