前言

• 在两年前，做过一个几乎全部是图表展示的App，当时真是一脸懵逼。找来找去找到了MpAndroidChart这个框架，在使用这个框架一个多月的时间里面，对Canvas慢慢的认识了，后面接触Html5 的Canvas，发现有点触类旁通的感觉。有一天，我无聊，上班实在没事，觉得我应该也可以写个小图表。写着写着，我发现越写越多。绘图其实没有想象中复杂。
• github.com/huangyanbin…

图表基本结构

• 如何画一个图表，首先要了解一个图表的基本属性,大概就是这样的。
  [

  我们想着这么画出来呢？

框架基础

• 假设让我们绘制这个图表，首先来分析一下，最外面是标题，然后是Legend(图例)，坐标，最后是图表内容。好了，我们可以想到BaseChart里面有哪些成员了，(标题，图例，坐标，内容)。我们新建一个BaseChart extends view.

绘制图表标题

• 通过onSizeChanged()方法我们可以拿到View的大小，然后可以得到BaseChart的Rect即(0,0,width,height).新建一个类BaseChartTitle,我们定义4个常量代表Title位置。然后定义一个percent,标题占比多少。提供set get方法。

    int LEFT = 0;int TOP = 1;int RIGHT =2;int BOTTOM = 3;复制代码

• 开始绘制标题，首先通过计算我们已经得到startX,startY,通过paint得到文字长度和宽度。

   @Overridepublic void drawTitle(Canvas canvas, Rect rect, Paint paint) {fontStyle.fillPaint(paint);String chartName = chartData.getChartName();Paint.FontMetrics fontMetrics = paint.getFontMetrics();float textHeight = fontMetrics.descent - fontMetrics.ascent;int textWidth = (int)paint.measureText(chartName);int startX,startY;Path path = new Path();switch (titleDirection) {case TOP:startY = (int) (rect.top + rect.height() * percent/2);startX = rect.centerX();startY-= textHeight/2;startX -=textWidth/2;canvas.drawText(chartName, startX, startY, paint);break;case LEFT:startX = (int) (rect.left +  rect.width() * percent/2);startX -= textWidth/2;path.moveTo(startX,rect.top);path.lineTo(startX,rect.bottom);canvas.drawTextOnPath(chartName,path,rect.width()/2-textWidth/2,0,paint);break;case RIGHT:startX = (int) (rect.right - rect.width()* percent/2);startX -= textHeight/2;path.moveTo(startX,rect.top);path.lineTo(startX,rect.bottom);canvas.drawTextOnPath(chartName,path,rect.width()/2-textWidth/2,0,paint);break;case BOTTOM:startY = (int) (rect.bottom - rect.height() * percent/2);startX =  rect.centerX();startY -= textHeight/2;startX -=textWidth/2;canvas.drawText(chartName, startX, startY, paint);break;}}复制代码

• 当Left和Right绘制标题时，应该是竖向的，所以用canvas.drawTextOnPath方法，当Top和Bottom时，可以使用canvas.drawText方法。