如何用饼状图显示数据

开发工具与关键技术：VS MVC基础
作者：卢雅婷
撰写时间：2019/04/27

（代码来源于老师）
在我们平常处理数据的时候为了让客户、老师或者老板更直观的看到数据的情况及其变化趋向，我们会选择性的运用表格、图形、曲线等方法去呈现数据。
而我今天要说的是饼状图的数据分析图，饼状图相对于其他的图形优点在于它可以更直观的看到某部分数据占据总体的比率如下图所示，把鼠标移到该部分的上面，它可清楚的看出各个分数段占据比率的多少。哪这种饼状图是如何完成的呢？

其实它就是echarts这个插件的内容，上网搜索echarts，点击进去，再点击实例，下面就会出现很多类型的图标，折线图、饼状图、散点图、雷达图等等，你都可在上面学习。废话不多说，我们进入今天的主题，饼状图的创建。

因为饼状图的方法我们是从echarts这个插件学习的，所以我们在创建之前要先引进echarts这个插件（我的echarts.min.js 放在Plugins这个文件夹中）

然后为Echarts准备一个具备达小宽高的Dom

首先判断之前是否有图表若有则销毁后再次初始化，接着就是基于准备好的dom，初始化echarts实例，然后就是指定图表的配置项和数据，data数据的来源是下面控制器的查询结果。
Formatter的值分别是是饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比），type是图形的形状，pie为饼状，（因为我的案例是有两个饼状图的，下图显示的是第一个小的饼状图，所以没用到分数段的数据，因为它们的方法都是一样的，我就不再一一举例了）第二个饼状图只要改一下data中的数据，和图形的大小就可以了。

3. 再到控制器中写查询图标字段的方法，（因为我们用的是饼状图，其显示的是数据的百分比，和不及格、及格等类型的数据，而我们的数据库中并没有该类型的字段，所以需要创建一个静态类来接收该字段，如下图所示就是我创建的一个实体类）

4. 要先得到图一的数据我们就必须经过连表查询（在此因为我侧重的是图形的创建所以有关多表查询的内容，我会一拉而过，如有不明白的可以查看我的文章有关多表查询的部分。）下图是在控制器中的一个方法查询后的内容，当我们查询出数据后，声明一个totals来接收其总人数（就是数据的条数）（因为现在得到的总人数是后面百分比计算的分母，所以我们要在此做个三目运算，当总人数为零时让其等于一）。

接着实例化上图的实体类，再获取总人数和总成绩接着就是平均分，总人数除于总分数，就是AverageScore的取值，再到合格分数的获取PassNumber是进行获取大于九十分的的数据，PassNumberPercentage就是百分比的数字（还没加上%符号）。下面的数据的获取方法的原理是一样，所以我就不再细说。把各个分数段的数据的获取之后，再把数据返回给页面。

鄙人学之尚浅如有不对之处，请给予矫正。

如何用饼状图显示数据相关推荐

python excel数据分析画直方图饼状图_Excel数据可视化应用（直方图、折线图、饼状图）...
直方图:对比关系直方图是一种统计报告图,是表示资料变化情况的主要工具.直方图由一系列高度不等的的纵向条纹或线段表示数据分布的情况.一般用横轴表示数据类型,纵轴表示分布情况. 例1: 1.右键单击图表 ...
python饼状图颜色一样_python数据可视化：折线图、条形图、饼状图显示
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. matplotlib是Python的一个强大的2D图形绘制库,使用需要安装 ...
python数据可视化：折线图、条形图、饼状图显示
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. matplotlib是Python的一个强大的2D图形绘制库,使用需要安装 ...
echart饼状图没有数据的时候显示暂无数据_Python数据结构可视化 day 5
Python 数据结构可视化 (Day5) 01年度工作总结有时候画布太大,影响到图表的展示,这个时候输入: "init_opts=opts.InitOpts(width='',heigh ...
AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示
前言: "宁肯像种子一样等待也不愿像疲惫的陀螺旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...
echerts 饼状图百分比数据为0的问题
问题: 复制官网代码画了饼状图,但是当数据都为0时,因为0不能做除数,百分比显示为undefined. label: {formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b ...
echarts 饼状图（数据为0或很小的扇形显示问题、扇形间隔）
series: [{name: '概况',type: 'pie',label:{formatter: '{b}({d}%)',color:'#555555'},radius: ['30%', '50% ...
通过生日查询各年龄段数量通过饼状图显示
数据库表t_member中 birthday 字段为date类型需求:根据年龄段(可以指定几个年龄段,例如0-18.18-30.30-45.45以上)展示各个年龄段的占比,通过饼形图来展示(Echa ...
echarts柱状图显示百分比_Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总...
增加了显示比例,显示内容显示比例代码显示完整代码: series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap ...
vb 饼状图显示百分比_Matplotlib-饼图
一.饼图(Pie)介绍饼图广泛得应用在各个领域,用于表示不同分类的占比情况,通过弧度大小来对比各种分类.饼图通过将一个圆饼按照分类的占比划分成多个区块,整个圆饼代表数据的总量,每个区块(圆弧)表示该 ...

如何用饼状图显示数据

如何用饼状图显示数据相关推荐

最新文章

热门文章