echarts学习笔记之箱线图的分析与绘制详解


Posted in Javascript onNovember 22, 2017

一、箱线图 Box-plot

箱线图(Boxplot)也称箱须图(Box-whisker Plot),它是用一组数据中的最小值、第一四分位数、中位数、第三四分位数和最大值来反映数据分布的中心位置和散布范围,可以粗略地看出数据是否具有对称性。通过将多组数据的箱线图画在同一坐标上,则可以清晰地显示各组数据的分布差异,为发现问题、改进流程提供线索。

什么是四分位数

箱线图需要用到统计学的四分位数(Quartile)的概念,所谓四分位数,就是把组中所有数据由小到大排列并分成四等份,处于三个分割点位置的数字就是四分位数。

  • 第一四分位数(Q1),又称“较小四分位数”或“下四分位数”,等于该样本中所有数值由小到大排列后第25%的数字。
  • 第二四分位数(Q2),又称“中位数”,等于该样本中所有数值由小到大排列后第50%的数字。
  • 第三四分位数(Q3),又称“较大四分位数”或“上四分位数”,等于该样本中所有数值由小到大排列后第75%的数字。
  • 第三四分位数与第一四分位数的差距又称四分位间距(InterQuartile Range,IQR)。

计算四分位数首先要确定Q1、Q2、Q3的位置(n表示数字的总个数):

  • Q1的位置=(n+1)/4
  • Q2的位置=(n+1)/2
  • Q3的位置=3(n+1)/4

对于数字个数为奇数的,其四分位数比较容易确定。例如,数字“5、47、48、15、42、41、7、39、45、40、35”共有11项,由小到大排列的结果为“5、7、15、35、39、40、41、42、45、47、48”,计算结果如下:

  • Q1的位置=(11+1)/4=3,该位置的数字是15。
  • Q2的位置=(11+1)/2=6,该位置的数字是40。
  • Q3的位置=3(11+1)/4=9,该位置的数字是45。

而对于数字个数为偶数的,其四分位数确定起来稍微繁琐一点。例如,数字“8、17、38、39、42、44”共有6项,位置计算结果如下:

  • Q1的位置=(6+1)/4=1.75
  • Q2的位置=(6+1)/2=3.5
  • Q3的位置=3(6+1)/4=5.25

这时的数字以数据连续为前提,由所确定位置的前后两个数字共同确定。例如,Q2的位置为3.5,则由第3个数字38和第4个数字39共同确定,计算方法是:38+(39-38)×3.5的小数部分,即38+1×0.5=38.5。该结果实际上是38和39的平均数。

同理,Q1、Q3的计算结果如下:

  • Q1 = 8+(17-8)×0.75=14.75
  • Q3 = 42+(44-42)×0.25=42.5

Excel为计算四分位数提供了QUARTILE(array,quart)函数,其中array参数用于指定要计算四分位数值的数组或数值型单元格区域,quart指定返回哪一个四分位值,可用值如下:

  • 0,返回最小值;
  • 1,返回第一个四分位数;
  • 2,返回第二个四分位数,即中位数;
  • 3,返回第三个四分位数;
  • 4,返回最大值。

箱线图一般被用作显示数据分散情况。具体是计算一组数据的中位数、25%分位数、75%分位数、上边界、下边界,来将数据从大到小排列,直观展示数据整体的分布情况。

echarts学习笔记之箱线图的分析与绘制详解

大部分正常数据在箱体中,上下边界之外的就是异常数据了。

上下边界的计算公式是:

UpperLimit=Q3+1.5IQR=75%分位数+(75%分位数-25%分位数)1.5

LowerLimit=Q1-1.5IQR=25%分位数-(75%分位数-25%分位数)1.5

参数说明:

      1.Q1表示下四分位数,即25%分位数;Q3为上四分位数,即75%分位数;IQR表示上下四分位差,系数1.5是一种经过大量分析和经验积累起来的标准,一般情况下不做调整。

      2.分位数的参数可根据具体预警结果调整:25%和75%,是比较灵敏的条件,在这种条件下,多达25%的数据可以变得任意远而不会很大地扰动四分位。具体业务中可结合拟合结果自行调整为其他分位

使用echarts时,这些计算通过调用echarts.dataTool.prepareBoxplotData()来完成。

说到这里,有一个预警,绘制箱线图除了要下载echart.js之外,还需要引入dataTool.js,否则浏览器会报错:Uncaught TypeError: Cannot read property 'prepareBoxplotData' of undefined(…)

dataTool.js可以到github上下载。

二、echarts箱线图示例

echart官网给出的箱线图示例有两种。

一种是单值对应(样本元素有一组对应的值数据):

echarts学习笔记之箱线图的分析与绘制详解

另一种是多值对应(样本元素有多个对应的值数据):

echarts学习笔记之箱线图的分析与绘制详解

三、数据结构分析

1.单值对应

单值对应的数据结构比较简单,一个样本信息的数据存储到对应的一个数组里,这些数组又存储在一个大数组里。然后用echarts.dataTool.prepareBoxplotData()处理这个大数组。

2.多值对应

举一个栗子:线上地址在这里

echarts学习笔记之箱线图的分析与绘制详解

两种性别的三种基因含量表。(数据纯虚构)

那要提供什么样的数据才能使用echart生成对应的箱线图?

再来看一下echart官网给出栗子数据,是通过三个for循环随机生成的。

data = [];
for (var seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
 var seriesData = [];
 for (var i = 0; i < 18; i++) {
 var cate = [];
 for (var j = 0; j < 100; j++) {
  cate.push(Math.random() * 200);
 }
 seriesData.push(cate);
 }
 data.push(echarts.dataTool.prepareBoxplotData(seriesData));
}

通过在控制台console.log(data) , console.log(seriesData) , console.log(cate) ,

可以看出外层的循环是echarts.dataTool.prepareBoxplotData()执行的次数=5,可以理解为每个样本有5类元素。内部的循环表示有18个样本,一类元素的样本数据有100条。

所以要实现的性别基因表的数据结构应该是:

echarts学习笔记之箱线图的分析与绘制详解

弄清楚数据结构剩下的绘图操作就是按部就班了,完整代码我已提交到github。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
使用js画图之饼图
Jan 12 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 #Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 #Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 #Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 #Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 #Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 #Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 #Javascript
You might like
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
python实现一次创建多级目录的方法
2015/05/15 Python
python实现kMeans算法
2017/12/21 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python发展简史 Python来历
2019/05/14 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
python 回溯法模板详解
2020/02/26 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
原料仓管员岗位职责
2014/04/12 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
教代会闭幕词
2015/01/28 职场文书
保管员岗位职责
2015/02/14 职场文书
小学班级口号大全
2015/12/25 职场文书
Python循环之while无限迭代
2022/04/30 Python