用 canvs 实现 图表绘制

实现饼图 柱状图 嵌套柱状图

效果图

知识点

1. canvs 文本 线 圆 弧度 矩形 绘制 填充
2. js 部分 原型 组合 继承 实现思路

1. MyChart 原型 用于 被继承 , 原型上有以下方法 extend 属性继承 drawGrid 绘制网格 ，drawCoordinate >>坐标系 randomColor 随机颜色 drawDescription 色块描述
   2 . PieChart \ BarChart 继承 MyChart 饼图 需计算圆心 柱状图 以 坐标原点 计算 数据矩形相对位置 默认 绘制坐标系

js 详细分步实现

1 数据参数 vanvasid, 网格数量 grid 默认20 ， drawGrid 是否绘制网格 ，drawDescription 是否绘制 色块描述 drawCoordinate 是否绘制坐标系 data 数据结构见下

 window.onload = function(){
        var data = [
            {title:'小于20岁', value:15,},
            {title:'20~30岁', value:50},
            {title:'30~60岁', value:20},
            {title:'大于60岁', value:6},
        ]
        var data1 = [
            {title:'小于20岁',data:[{title:'男',value:'10'},{title:'女',value:'6'}]},
            {title:'20~30岁',data:[{title:'男',value:'15'},{title:'女',value:'20'}]},
            {title:'30~60岁',data:[{title:'男',value:'20'},{title:'女',value:'18'}]},
            {title:'大于60岁',data:[{title:'男',value:'5'},{title:'女',value:'3'}]},
        ]
        var pieChart = new PieChart({
            id:'#cvs1',
            grid: 40,
            drawGrid:true,
            drawDescription:true,
            data:data
        })
        var barChart = new BarChart({
            id:'#cvs2',
            drawDescription:true,
            data:data
        })
        var barChart2 = new BarChart({
            id:'#cvs3',
            drawGrid:true,            
            drawDescription:true,            
            data:data1
        })
    }

2 MyChart

// 图表类 用于继承
    var MyChart = function() {
    }
    // 属性继承
    MyChart.prototype.extend = function(options){
        this.data = options.data || null
        this.ctx  =  document.querySelector(options.id).getContext('2d') 
        this.cwidth = this.ctx.canvas.width 
        this.cheight = this.ctx.canvas.height
        this.gridN = options.grid || 20 // 网格数量
        // 网格大小