移动端 canvas统计图

一、折线图

1. 获取画布画笔

2. 封装画线的方法

3. 画坐标轴

4. 循环数据画横轴
    > 4.1 画刻度
    > 4.2 刻度文字
    > 4.3 画折线
    > 4.4 画点

5. 纵轴刻度文字

 

#二、柱状图

1. 获取画布画笔

2. 封装画线的方法

3. 画坐标轴

4. 循环数据画横轴
    > 4.1 画刻度
    > 4.2 刻度文字
    > 4.3 画矩形
    > 4.4 矩形上方数据展示

5. 纵轴刻度文字

 

#三、饼图

1. 获取画布画笔

2. 封装画扇形方法

3. 计算总数据

4. 循环数据
    4.1 画扇形
    4.2 画图例