G2
G2
G6
F2
L7
墨者学院
关于 G2
图表示例
API 文档
使用教程
English
折线图
基础折线图
双折线图
多折线图
其他折线图
条形图
分组条形图
堆叠条形图
基础条形图
柱状图
基础柱状图
分组柱状图
堆叠柱状图
直方图
饼图
环图
玫瑰图
基础饼图
嵌套饼图
点图
散点图
面积图
基础面积图
堆叠面积图
区间面积图
箱形图
箱型图
烛形图
烛形图
热力图
热力图
仪表盘
仪表盘
漏斗图
漏斗图
地图
地图
雷达图
雷达图
分面
分面
关系图
关系图
其他图表
其他
迷你图
组件使用
组件
箱型图
基础箱型图
Basic Box Chart,基础箱型图,又称盒须图、盒式图或箱线图,是一种用作显示一组数据分布情况的统计图。
源码
复制成功
复制失败
全屏
复制
运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>基础箱型图</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> </head> <body> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script> var _DataSet = DataSet, DataView = _DataSet.DataView; var data = [{ x: 'Oceania', low: 1, q1: 9, median: 16, q3: 22, high: 24 }, { x: 'East Europe', low: 1, q1: 5, median: 8, q3: 12, high: 16 }, { x: 'Australia', low: 1, q1: 8, median: 12, q3: 19, high: 26 }, { x: 'South America', low: 2, q1: 8, median: 12, q3: 21, high: 28 }, { x: 'North Africa', low: 1, q1: 8, median: 14, q3: 18, high: 24 }, { x: 'North America', low: 3, q1: 10, median: 17, q3: 28, high: 30 }, { x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22 }, { x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16 }]; var dv = new DataView().source(data); dv.transform({ type: 'map', callback: function callback(obj) { obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high]; return obj; } }); var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight // padding: [ 20, 120, 95 ] }); chart.source(dv, { range: { max: 35 } }); chart.tooltip({ showTitle: false, crosshairs: { type: 'rect' }, itemTpl: '<li data-index={index} style="margin-bottom:4px;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + '{name}<br/>' + '<span style="padding-left: 16px">最大值:{high}</span><br/>' + '<span style="padding-left: 16px">上四分位数:{q3}</span><br/>' + '<span style="padding-left: 16px">中位数:{median}</span><br/>' + '<span style="padding-left: 16px">下四分位数:{q1}</span><br/>' + '<span style="padding-left: 16px">最小值:{low}</span><br/>' + '</li>' }); chart.schema().position('x*range').shape('box').tooltip('x*low*q1*median*q3*high', function(x, low, q1, median, q3, high) { return { name: x, low: low, q1: q1, median: median, q3: q3, high: high }; }).style({ stroke: '#545454', fill: '#1890FF', fillOpacity: 0.3 }); chart.render(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>基础箱型图</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> </head> <body style="background: #1f1f1f;"> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script>G2.Global.setTheme('dark');</script> <script> var _DataSet = DataSet, DataView = _DataSet.DataView; var data = [{ x: 'Oceania', low: 1, q1: 9, median: 16, q3: 22, high: 24 }, { x: 'East Europe', low: 1, q1: 5, median: 8, q3: 12, high: 16 }, { x: 'Australia', low: 1, q1: 8, median: 12, q3: 19, high: 26 }, { x: 'South America', low: 2, q1: 8, median: 12, q3: 21, high: 28 }, { x: 'North Africa', low: 1, q1: 8, median: 14, q3: 18, high: 24 }, { x: 'North America', low: 3, q1: 10, median: 17, q3: 28, high: 30 }, { x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22 }, { x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16 }]; var dv = new DataView().source(data); dv.transform({ type: 'map', callback: function callback(obj) { obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high]; return obj; } }); var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight // padding: [ 20, 120, 95 ] }); chart.source(dv, { range: { max: 35 } }); chart.tooltip({ showTitle: false, crosshairs: { type: 'rect' }, itemTpl: '<li data-index={index} style="margin-bottom:4px;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + '{name}<br/>' + '<span style="padding-left: 16px">最大值:{high}</span><br/>' + '<span style="padding-left: 16px">上四分位数:{q3}</span><br/>' + '<span style="padding-left: 16px">中位数:{median}</span><br/>' + '<span style="padding-left: 16px">下四分位数:{q1}</span><br/>' + '<span style="padding-left: 16px">最小值:{low}</span><br/>' + '</li>' }); chart.schema().position('x*range').shape('box').tooltip('x*low*q1*median*q3*high', function(x, low, q1, median, q3, high) { return { name: x, low: low, q1: q1, median: median, q3: q3, high: high }; }).style({ stroke: '#545454', fill: '#1890FF', fillOpacity: 0.3 }); chart.render(); </script> </body> </html>
图表简介
Basic Box Chart,基础箱型图,又称盒须图、盒式图或箱线图,是一种用作显示一组数据分布情况的统计图。
了解更多
图表用法
如果一个数据集中包含了一个分类变量和一个或者多个连续变量,那么你可能会想知道连续变量会如何随着分类变量水平的变化而变化,而箱形图就可以提供这种方法,它只用了5个数字对分布进行概括,即一组数据的最大值、最小值、中位数、下四分位数及上四分位数。对于数据集中的异常值,通常会以单独的点的形式绘制。箱形图可以水平或者垂直绘制。箱形图多用于数值统计,虽然相比于直方图和密度曲线较原始简单,但是它不需要占据过多的画布空间,空间利用率高,非常适用于比较多组数据的分布情况。
关联图表
箱形图
相关链接
BizCharts
Viser