当前位置:首页 > Javascript技术文章 > echarts学习笔记之箱线图的分析与绘制详解

echarts中箱线图的分析与绘制实例分享

  • 发布时间:
  • 作者:码农之家原创
  • 点击:218

这篇文章主要知识点是关于echarts、箱线图、echarts、箱线图、颜色、echarts动态获取数据、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下java相关资源

你不知道的JavaScript 下卷

本书讲解JavaScript开发人员不求甚解的大趋势,深入理解语言内部的机制,全面介绍JavaScript中常被人误解和忽视的重要知识点,分为上中下三套,欢迎下载

查看详情

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

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中的call、apply方法、 echarts中箱线图的分析与绘、 让JS验证密码不能为空的实、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:时钟效果js代码分享

下一篇:element-ui的select下拉框加上滚动加载实现方法

展开 +

收起 -

相关内容
精通JavaScript

精通JavaScript(第2版) 是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

查看详情
JavaScript忍者秘籍

这是由jQuery库创始人编写的一本深入剖析JavaScript语言的书,从不同层次讲述了逐步成为JavaScript高手所需的知识,适合具备一定JavaScript基础知识的读者阅读

查看详情
JavaScript核心技术开发解密

这本书针对JavaScript 中的核心技术,结合前沿开发实践,全面的讲解与分析JavaScript 的内存、函数、执行上下文、面向对象、模块等重点知识

查看详情
学习JavaScript数据结构与算法 查看详情
JavaScript框架设计

JavaScript,框架设计

查看详情
JavaScript网页动画设计

JavaScript网页动画设计 由业界先进的动画库Velocity。js的作者所著,书中内容共分为8章,简明扼要地总结了在网页上使用动画的技术技巧,让读者掌握如何有效利用动画实现无与伦比的用户体验

查看详情
你不知道的JavaScript(上卷)

很多人对JavaScript这门语言的印象都是简单易学,很容易上手。虽然JavaScript语言本身有很多复杂的概念,但语言的使用者不必深入理解这些概念就可以编写出功能全面的应用。

查看详情
21天学通HTML+CSS+JavaScript Web开发

21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技

查看详情
HTML CSS JavaScript网页制作从入门到精通

HTML CSS JavaScript网页制作从入门到精通 第3版 共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特

查看详情
学习笔记
网友NO.204252

vue中使用echarts制作圆环图的实例代码

vue使用echarts制作圆环图,代码如下所示: div id="main"/divscript type="text/ecmascript-6" export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts: '', totalIncome:'', opinionData: [ {value: Math.abs(this.chartT.imp_rate)},//取绝对值 {value: 100} ] } }, methods: { drawPie (id) { this.charts = this.$echarts.init(document.getElementById(id)); this.charts.setOption({ tooltip: { trigger: 'item', formatter: '{a}br/{b}:{c} ({d}%)' }, legend: { orient: 'vertical', x: 'left', data: this.opinion }, color:['#2872ef','#d6d6d6','#fc6e51'], series: [ { name: '访问来源', type: 'pie', radius: ['90%', '65%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, testStyle: { fontSize: '30', fontWeight: 'bold' } } }, //根据数值判断颜色// itemStyle:{// normal:{// color:function(params){// console.log(params)// console.log(params.dataIndex)// console.log(……

网友NO.967215

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

在后台管理系统中,图表是一个很普遍的元素。目前常用的图标插件有 charts, Echarts, highcharts。这次将介绍 Echarts 在 Vue 项目中的应用。 一、安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 import echarts from 'echarts' 也可以在 main.js 中引入,然后修改原型链 Vue.prototype.$echarts = echarts 然后就可以全局使用了 let myChart = this.$echarts.init(document.getElementById('myChart')) 二、创建图表 首先需要在 HTML 中创建图表的容器 需要注意的是,图表的容器必须指定宽高,也就是说 width,height 不能使用百分比,只能用 px 这样确实不够灵活,不过我们可以用 js 来改变 width 和 height,使图表容器能够自适应,具体的实现请往后看 然后在 mounted 中创建图表,具体的配置参考官……

网友NO.774481

jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】

本文实例讲述了jQuery插件echarts实现的去掉X轴、Y轴和网格线效果。分享给大家供大家参考,具体如下: 1、问题背景: 如何在echarts中,去掉X轴、Y轴和网格线,只留数据图形 2、实现源码: !DOCTYPE htmlhtml head meta charset="UTF-8" titleecharts-去掉X轴、Y轴和网格线/title script type="text/javascript" src="jquery-1.4.2.min.js" /script script type="text/javascript" src="echarts.js" /script script $(function(){ function randomDataArray() { var d = []; var arr = [3,5,7,9,10,1,2,4,8,6]; var len = 10; for(var i=0;ilen;i++) { d.push([i+1,0,arr[i],]); } return d; } var chart = document.getElementById('chart'); var echart = echarts.init(chart); var option = { legend: { data:['scatter1'], show:false }, textStyle:{ fontSize:16 }, xAxis : [ { type : 'value', splitNumber: 2, scale: true, show:false, splitLine:{ show:false } } ], yAxis : [ { type : 'value', splitNumber: 2, scale: true, show:false, splitLine:{ show:false } } ], ser……

网友NO.485190

解决echarts的多个折现数据出现坐标和值对不上的问题

当出现多个折现数据,echarts可以配置stack值使用堆积值还是单个值 option = { noDataLoadingOption: { text: '暂无数据', effect: 'bubble', effectOption: {effect: {n: 0}}, textStyle: {fontSize: 24} }, symbolList: ['circle'], tooltip: { trigger: 'axis', textStyle: {align: 'left'}, axisPointer: {lineStyle: {color: '#E3E3E3', width: 1, type: 'solid'},} }, // grid: {x: '60px', x2: '60px', borderWidth: 0}, legend: {data: ['最大响应时长', '平均响应时长', '最小响应时长']}, toolbox: {show: true}, // calculable: true, xAxis: [{ type: 'category', boundaryGap: false, data: ['00:00-02:00', '02:00-04:00', '04:00-06:00', '06:00-08:00', '08:00-10:00', '10:00-12:00'], splitLine: {lineStyle: {width: 0}}, axisLabel: {interval: 0,/*横轴信息全部显示*/ rotate: 20,/*20度角倾斜显示*……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757