数据可视化–饼状图
功能:模拟从后台获取数据,将数据绘制成饼状图,效果如下:
<canvas height="500px" width="800px"></canvas>
<script>
//模拟从后台获取数据
var data = [
{title:'15-20岁',num:6},
{title:'20-25岁',num:30},
{title:'25-30岁',num:10},
{title:'30岁以上',num:8},
]
//构造饼图函数并初始化
var PieChart = function(ctx){
this.ctx = ctx || document.querySelector('canvas').getContext('2d');
this.w = this.ctx.canvas.width;
this.h = this.ctx.canvas.height;
this.x0 = this.ctx.canvas.width/2+50;
this.y0 = this.ctx.canvas.height/2;
this.radius = 150;
this.outline = 50;
this.rectW = 30;
this.rectH = 16;
this.rectSpace = 20;
}
//添加数据
PieChart.prototype.init = function