数据可视化–饼状图

功能：模拟从后台获取数据，将数据绘制成饼状图，效果如下：

<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(data){this.drawPie(data);}//绘制饼图PieChart.prototype.drawPie = function(data){var angleList = this.transformAngle(data);var startAngle = 0;var that = this;angleList.forEach(function(item,i){var endAngle = startAngle + item.angle;that.ctx.beginPath();that.ctx.moveTo(that.x0,that.y0);that.ctx.arc(that.x0,that.y0,that.radius,startAngle,endAngle);var color = that.ctx.fillStyle = that.getRandomColor();that.ctx.fill();that.drawTitle(startAngle,item.angle,color,item.title);that.drawDesc(i,item.title);startAngle = endAngle;});}// 绘制标题PieChart.prototype.drawTitle = function(startAngle,angle,color,title){//需求：从每个弧形的中点引出一条线，延长后再引出一条横线，将data所占比例写在横线上//思路：利用勾股定理来做//1.首先确定斜边（this.radius + this.outline）//2.确定角度：角度应该转换成弧度，应该是起始点的弧度+当前弧度/2;//3.利用三角函数计算出两条直角边//4.根据文字的大小，画出横线//计算出斜边var edge = this.radius + this.outline;//计算出两条直角边var edgeX = Math.cos(startAngle+angle/2)*edge;var edgeY = Math.sin(startAngle+angle/2)*edge;var outX = this.x0 + edgeX;var outY = this.y0 + edgeY;//绘制出伸出来的那个点this.ctx.beginPath();this.ctx.moveTo(this.x0,this.y0);this.ctx.lineTo(outX,outY);this.ctx.strokeStyle = color;// 画文字和下划线this.ctx.font = "14px microsoft yahei";var textWidth = this.ctx.measureText(title).width;if(outX>this.x0){this.ctx.lineTo(outX+textWidth,outY);this.ctx.textAlign = 'left';}else{this.ctx.lineTo(outX-textWidth,outY);this.ctx.textAlign = 'right';}this.ctx.stroke();this.ctx.textBaseline = "bottom";this.ctx.fillText(title,outX,outY);}// 绘制说明PieChart.prototype.drawDesc = function(index,title){//绘制矩形this.ctx.fillRect(this.rectSpace,15+index*(this.rectH+10),this.rectW,this.rectH);//绘制文字this.ctx.beginPath();this.ctx.textAlign = 'left';this.ctx.textBaseline = 'top';this.ctx.font = "12px microsoft yahei";this.ctx.fillText(title,this.rectSpace+this.rectW+15,this.rectSpace+index*(this.rectH+10));}//获取随机颜色PieChart.prototype.getRandomColor = function(){var r = Math.floor(Math.random()*256);var g = Math.floor(Math.random()*256);var b = Math.floor(Math.random()*256);return 'rgb('+r+','+g+','+b+')';}//转换成弧度PieChart.prototype.transformAngle = function(data){var total = 0;data.forEach(function(item,i){total += item.num;});data.forEach(function(item,i){var angle = (item.num/total)*Math.PI*2;item.angle = angle;});return data;}var pieChart = new PieChart();pieChart.init(data);</script>

数据可视化--饼状图相关推荐

python饼状图教程_Python数据可视化:饼状图的实例讲解
使用python实现论文里面的饼状图: 原图: python代码实现: # # 饼状图 # plot.figure(figsize=(8,8)) labels = [u'Canteen', u'Sup ...
ECharts数据可视化饼状图(环形图-进度半圆形)
销售进度 (quarter) -饼状图实现步骤: 寻找官方的类似示例,给予分析,引入到HTML页面中按照需求来定制它. 链接: 环形图. 完整js代码 // 销售模块饼形图半圆形设置方式 ( ...
用python把数据画成饼状图_Python学习第92课——数据可视化之饼状图绘制
[每天几分钟,从零入门python编程的世界!] 假如一个行业只有ABCD四个公司,我们想要用图表展现,它们各自每年的生产总额,占整个行业的比例是多少,这时我们用饼状图(pie chart)更好. 假 ...
excel根据数据画饼状图等
把Word的数据粘贴到excel 在Excel中的部分数据在一边计算各类病总数选择二维饼图改变标题更改图表类型可以选择其他图三维饼图圆环图旭日图柱状图条状图折线图面积图雷达图
数据可视化----ECharts---柱状图（三）
前面两篇博客我写了有关Echarts的一些基础和通用配置项,博客地址在下数据可视化----ECharts初体验(一) 数据可视化----ECharts通用配置(二) 柱状图柱状图一.搭建基础结构 ...
echarts动态加载数据生成饼状图
本文简单介绍使用ajax从JSON文件加载数据,动态生产并状态,第一次写,供大家参考.欢迎大家提出优化意见和建议. 一下是前端的代码: <!DOCTYPE html> <html l ...
java饼状图_使用Vue+echars+Java后端数据生成饼状图
效果图: 后端controller代码: //图表 @AuthIgnore @PostMapping("getData") public R getData() { long[] ...
神奇的饼状图：如何用最简单的方式呈现复杂的数据
简介饼状图顾名思义就是形如圆饼状的图形,它是一种常用的图表类型,通常用于展示数据的占比关系.饼状图通过将一个圆形区域划分为多个子区域,反应出不同子类数据之间的的对比关系以及子类数据在大类中的百分比. ...
java实现将数据生成图表至excel导出(包括折线图,柱状图,饼状图)
1. 目的根据已有数据,手动(java后台)生成图表至excel并导出.用于后台查询到数据后直接创建图表,可以代替直接使用图表信息字符串. 2. 说明使用jfree图表绘制类库绘制图表,并生成到本 ...

数据可视化--饼状图

数据可视化–饼状图

数据可视化--饼状图相关推荐

最新文章

热门文章