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

一、箱线图 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%分位数、上边界、下边界，来将数据从大到小排列，直观展示数据整体的分布情况。

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

上下边界的计算公式是：

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官网给出的箱线图示例有两种。

一种是单值对应（样本元素有一组对应的值数据）：

另一种是多值对应（样本元素有多个对应的值数据）：

三、数据结构分析

1.单值对应

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

2.多值对应

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

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

那要提供什么样的数据才能使用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条。

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

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

总结

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

赞 (0)

相关推荐

  • echarts3 使用总结（绘制各种图表,地图）

    echarts3 使用总结（绘制各种图表,地图）

    由于项目需要自学了echarts,下面将学到的东西总结如下,如果有哪里写的不好,请批评指正 一.前期准备 1.使用echarts之前先要引入echarts.js,js可以到官网下载 2.写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容. 3.在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表. (代码如下)注:后面将不再对引入js,获取id,调用option生

  • 在vue中添加Echarts图表的基本使用教程

    在vue中添加Echarts图表的基本使用教程

    前言 我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D

  • vue.js+Echarts开发图表放大缩小功能实例

    vue.js+Echarts开发图表放大缩小功能实例

    最近使用echarts来开发某系统的图表功能,先申明我以前用的ext.js,ext.js对图表有自己的一套组件,用起来也很方便.但是由于ext.js过于臃肿,公司决定使用echarts来开发图表功能.当我们使用的时候才悲催的发现,echart绘制之后,不能随着容器div的大小而变化.而我们所开发的图表是需要有放大缩小功能,于是在网上找了很久,也没有找到合适的答案,大部分是通过监听窗口大小改变事件来设置,然而并不是我们所需要的.于是自己用了一点点时间,了解了为何echarts不能重新渲染,原来是在

  • jQuery插件Echarts实现的渐变色柱状图

    jQuery插件Echarts实现的渐变色柱状图

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="container" style="width:

  • jsp使用ECharts动态在地图上标识点

    ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:＇map＇)是如何实现的. 首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标． 地图类型的图表需要关注的元素 title:标题,显示这个地图所表示的名称 title: { text: '清大云

  • echarts学习笔记之图表自适应问题详解

    echarts学习笔记之图表自适应问题详解

    前言 为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表. 最后实现的效果如图: 然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了图表之外其他都是响应式.当窗口缩小后,就会发生很尴尬的出界事件. 如图: 针对这个问题,刚开始的解决思路及方法:把echart容器的宽度设置为100%: <div class="col-sm-12 row" id="logic1_node" style=&q

  • 在Vue中使用echarts的实例代码（3种图）

    在Vue中使用echarts的实例代码（3种图）

    前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换

  • Vue2 使用 Echarts 创建图表实例代码

    在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 import echarts from 'echarts' 也可以在 main

  • 基于Echarts 3.19 制作常用的图形(非静态)

    基于Echarts 3.19 制作常用的图形(非静态)

    饼图: 环境:Echarts 3.19 vs2013 实现方式:ajax+ashx+json 注意事项: 官网所需格式为 [{value:23,name:'xxxx' }] 请将key 的名字不要写错 具体代码,各位看官 请下移目光. <!--请先引用文件--> <script src="../Scripts/jquery-1.8.2.min.js"></script> <script src="../Scripts/echarts/

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

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

    一.箱线图 Box-plot 箱线图(Boxplot)也称箱须图(Box-whisker Plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布范围,可以粗略地看出数据是否具有对称性.通过将多组数据的箱线图画在同一坐标上,则可以清晰地显示各组数据的分布差异,为发现问题.改进流程提供线索. 什么是四分位数 箱线图需要用到统计学的四分位数(Quartile)的概念,所谓四分位数,就是把组中所有数据由小到大排列并分成四等份,处于三个分割点位置的数

  • 微信小程序学习笔记之文件上传、下载操作图文详解

    微信小程序学习笔记之文件上传、下载操作图文详解

    本文实例讲述了微信小程序学习笔记之文件上传.下载操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序登录API与获取用户信息操作.这里再来介绍一下文件的上传与下载操作. [文件上传]wx.uploadFile (以上传图片为例) 后台上传接口Upload.php:(tp5) <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上传图片API public fun

  • JS学习笔记之原型链和利用原型实现继承详解

    本文实例讲述了JS学习笔记之原型链和利用原型实现继承.分享给大家供大家参考,具体如下: 原型链 原型链是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的 实例对象中有__proto__,是对象,叫原型,不是标准的属性,浏览器使用,并且有的游览器不支持 构造函数中有prototype属性,也是对象,叫原型 注意 原型中的方法是可以互相访问的 实例代码 function Animal(name,age){ this.name=name; thia.age=age;

  • Python学习笔记之列表和成员运算符及列表相关方法详解

    本文实例讲述了Python学习笔记之列表和成员运算符及列表相关方法.分享给大家供大家参考,具体如下: 列表和成员运算符 列表可以包含我们到目前为止所学的任何数据类型并且可以混合到一起. lst_of_random_things = [1, 3.4, 'a string', True] # 这是一个包含 4 个不同类型元素的列表 print(lst_of_random_things[0]) # 1 获取上述列表的第一个值和最后一个值 print(lst_of_random_things[0]) #

  • JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解

    JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解

    本文实例讲述了JavaScript学习笔记之基于定时器实现图片无缝滚动功能.分享给大家供大家参考,具体如下: 一.无缝滚动理论基础 基础知识 1.setInterval(function,time).clearInterval(timer) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clea

  • Python学习笔记之错误和异常及访问错误消息详解

    本文实例讲述了Python错误和异常及访问错误消息.分享给大家供大家参考,具体如下: 错误和异常 当 Python 无法解析代码时,就会发生语法错误,因为我们没有遵守正确的 Python 语法. 当在程序执行期间出现意外情况时,就会发生异常,即使代码在语法上正确无误.Python 有不同类型的内置异常. 指定异常 可以指定要在 except 块中处理哪个错误,如下所示: try: # some code except ValueError: # some code 现在它会捕获 ValueErr

  • Python编程matplotlib绘图挑钻石seaborn小提琴和箱线图

    Python编程matplotlib绘图挑钻石seaborn小提琴和箱线图

    目录 箱线图 小提琴图 想不到大家都这么喜欢用python给女朋友挑钻石,所以我又写了个续. 如果看过之前一篇用python给女朋友挑钻石的文章,那么可以直接从箱线图开始读. seaborn是matplotlib的补充包,提供了一系列高颜值的figure,并且集成了多种在线数据集,通过sns.load_dataset()进行调用,可供学习,如果网络不稳定,可下载到本地,然后在调用的时候使用把cache设为True. 其中,diamonds数据集中包含了钻石数据,总计十项,分别是[重量/克拉]ca

  • Python pyecharts Boxplot箱线图的实现

    Python pyecharts Boxplot箱线图的实现

    本篇博客只是单纯的记录一下自己学习Boxplot,没有过多的解释,官网:>>Boxplot import seaborn as sns import numpy as np import pandas as pd import matplotlib as mpl import matplotlib.pyplot as plt %matplotlib inline plt.rcParams['font.sans-serif']=['Microsoft YaHei'] # 用来正常显示中文标签 p

  • Python数据可视化：箱线图多种库画法

    概念 箱线图通过数据的四分位数来展示数据的分布情况.例如:数据的中心位置,数据间的离散程度,是否有异常值等. 把数据从小到大进行排列并等分成四份,第一分位数(Q1),第二分位数(Q2)和第三分位数(Q3)分别为数据的第25%,50%和75%的数字. 四分位间距(Interquartilerange(IQR))=上分位数(upper quartile)-下分位数(lower quartile) 箱线图分为两部分,分别是箱(box)和须(whisker).箱(box)用来表示从第一分位到第三分位的数

  • R语言箱线图创建实例讲解

    R语言箱线图创建实例讲解

    箱线图是数据集中的数据分布良好的度量. 它将数据集分成三个四分位数. 此图表表示数据集中的最小值,最大值,中值,第一四分位数和第三四分位数. 它还可用于通过绘制每个数据集的箱线图来比较数据集之间的数据分布. R语言中使用boxplot()函数来创建箱线图. 语法 在R语言中创建箱线图的基本语法是 - boxplot(x, data, notch, varwidth, names, main) 以下是所使用的参数的描述 - x是向量或公式. 数据是数据帧. notch是逻辑值. 设置为TRUE以绘

随机推荐