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

总结

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

时间: 2017-11-19

在Vue中使用echarts的实例代码(3种图)

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

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

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

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

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

echarts3 使用总结(绘制各种图表,地图)

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

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

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

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

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

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

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

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

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

基于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/

基于android布局中的常用占位符介绍

大家在做布局文件是肯定会遇到过下面的这种情况 填充出现问题,所以需要用到占位符规范填充 汉字常用占位符: <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这是测试:" android:textSize="22sp" /> <TextView android:layo

基于Three.js插件制作360度全景图

这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"></script> <script src="js/photo-sphere-viewer.min.js"></script> 2.初始化一下,(具体各种参数配置根据情况而定) var PSV = new PhotoSphereViewer({ // 全

基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)

先给大家展示效果图,感兴趣的朋友可以下载源码哦. 效果演示         源码下载 数字时钟可以应用在一些WEB倒计时效果.WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果. HTML 我们先在页面中准备一个时钟区域#clock,并且要展示的数字放在.digits中. <div id="clock" class="light"> <div class=&

基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)

废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦 查看演示       源码下载 HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" class="light"> <div class="display"> <div class="date"></

基于C# 网站地图制作

1. 我们的网站是用C#开发的,我们采用数据库存储所有文章信息.所以我们的文章都是动态地从数据库中提取出来的.这点很不利于蜘蛛的顺藤摸瓜. 2. 这点嘛,嘿嘿,就有些勉强了.做个网站地图,可以让用户对敝网站的内容一目了然,能起到很好的导航作用. 鉴于上述原因,于是乎,俺就决定为俺地"赤兔英语网"做一个网站地图.由于Google等搜索引擎所需的网站地图必须是XML文件,所以俺决定做网页形式和XML形式两种网站地图.我们的网站是用C#开发的,当然是使用C#语言来编写俺地网站地图了,赫赫.

基于jQuery日历插件制作日历

来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天,需要一个7X6的表格去装载 ·如果知道了某个月份1号是星期几,这个月份有多少天,一个循环就可以显示某个月的日历了吧(眼睛都放光了*.*) ·加上一些控件让用户可以方便操作吧(比如可以输入年份.月份,可以点击选择年份.月份) 新建一个html文件,html结构: <div class="container"> <input type="text

基于sql语句的一些常用语法积累总结

1.当某一字段的值希望通过其它字值显示出来时(记录转换),可通过下面的语句实现:case Type when '1' then '普通通道' when '2' then '高端通道' end as Type其中"Type"是字段名,"1","2"是字段值 2.返回数据库中用户表的表单名:select name from table where type = 'u' and status >=2 3.按拼音首字母排序:select * fro

基于PHP异步执行的常用方式详解

1.客户端页面采用AJAX技术请求服务器优点:最简单,也最快,就是在返回给客户端的HTML代码中,嵌入AJAX调用,或者,嵌入一个img标签,src指向要执行的耗时脚本.缺点:一般来说Ajax都应该在onLoad以后触发,也就是说,用户点开页面后,就关闭,那就不会触发我们的后台脚本了.而使用img标签的话,这种方式不能称为严格意义上的异步执行.用户浏览器会长时间等待php脚本的执行完成,也就是用户浏览器的状态栏一直显示还在load.当然,还可以使用其他的类似原理的方法,比如script标签等等.

基于prototype扩展的JavaScript常用函数库

复制代码 代码如下: /** 2 * 检索数组元素(原型扩展或重载) 3 * @param {o} 被检索的元素值 4 * @type int 5 * @returns 元素索引 6 */ 7 Array.prototype.contains = function(o) { 8 var index = -1; 9 for(var i=0;i<this.length;i++){if(this[i]==o){index = i;break;}} return index; } /** * 日期格式化