Android-图表绘制

Android图表绘制

1. 图表应用场景

• 饼状图
• 曲线图
• 柱状图
• 折线图
• k线图

2. 绘制图表需要的基础知识

• Android自定义View
• Canvas，Paint，Path等
• Android动画

2.1 画图三要素介绍

• Canvas:

  • Bitmap to hold the pixels: 保存像素
  • a Canvas to host the draw calls (writing into the bitmap): draw方法
  • a drawing promitive (e.g. Rect, Path, text, Bitmap): 图元
  • a Paint (to describe the colors and styles for the drawing): 画笔

• Paint: 颜色、样式

  The Paint class holds the style and color information about how to draw geometries, text and bitmaps.

• Path：路径、轨迹

  The Path class encapsulates compound (multiple contour) geometries paths consisting of straight line segments, quadratic curves, and cubic curves. It can be drawn with canvas.drawPath(path, Paint), either filled or stroked (based on the paint’s Style), or it can be used for clipping or to draw text on a path.

2.2 画图三要素基本用法

2.2.1 Canvas

1. 如果直接继承View，可以重写onDraw()方法，直接用里面的canvas进行绘制。
2. 可以直接利用Activity的绘制机制，用lockCanvas()方法来获得属于当前Activity的Canvas。
3. 在SurfaceView中，同2可以利用SurfaceHolder对象的lockCanvas()方法来获得Canvas。

2.2.2 Paint

画笔的使用很简单，直接通过new关键字来实例化，然后通过Paint对象对画笔进行相应的设置：

• 去锯齿：setAntiAlia(true)
• 去抖动：setDither(true)
• 设置图层混合模式：setXfermode(Xfermode xfermode)

2.2.3 Path

path路径，用法也很简单，直接用new实例化，然后通过path对象来设置你想要画图的轨迹或路线：比如矩形、三角形、圆、曲线等。

3. Android中绘制图表解决方案

• 使用google图表api （扩展性太差）
• 使用RChart2库: 纯Java开发，也支持JSP/Swing/J2mE（画风偏丑）
• 使用Chartriod库：ContentProvider数据共享
• 使用Acharengine库实现：jar，雷达图，饼状图，柱形图，曲线图 等【工厂模式，高度解耦】
• 其他：MPAndroidChart、HelloCharts

4. 绘图实战之直方图

4.1 自定义图表样式strings.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

<!--    图表样式-->
    <declare-styleable name="GraphStyle">
        <attr name="graphTitle" format="string"/>
        <attr name="xAxisName" format="string"/>
        <attr name="yAxisName" format="string"/>
        <attr name="axisTextSize" format="dimension|integer"/>
        <attr name="axisTextColor" format="color|integer"/>
    </declare-styleable>
</resources>

4.2 自定义图表的抽象类BaseView.java

public abstract class BaseView extends View {
   
    private String mGraphTitle;
    private String mXAxisName;
    private String mYAxisName;
    private float mAxisTextSize;
    private int mAxisTextColor;
//    画笔和上下文
    private Paint mPaint;
    private Context mContext;
//    视图的宽和高
    protected int width;
    protected int height;
//    起点的x，y坐标值,实际会根据UI标注来设置
    protected int originalX = 100;
    protected int originalY = 800;

    public void setColumnInfo(int[][] columnInfo) {
   
        this.columnInfo = columnInfo;
    }

    public void setXAxisScaleInfo(int xMax, int xSize) {
   
        maxAxisValueX = xMax;
        axisDividedSizeX = xSize;
    }

    public void setYAxisScaleInfo(int yMax, int ySize) {
   
        maxAxisValueY = yMax;
        axisDividedSizeY = ySize;
    }

    public int[][] columnInfo;
    public float maxAxisValueY;
    public float maxAxisValueX;
    public int axisDividedSizeX;
    public int axisDividedSizeY;