G2
一套图形语法
快速上手
教程
API
图表
移动端图表
下载
关于
github
箱型图
箱形图又称盒须图、盒式图或箱线图，是一种用作显示一组数据分布情况的统计图。
箱型图 /
箱型图
选择主题
源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>箱型图</title> <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/> <!--如果不需要jquery ajax 则可以不引入--> <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script> <!-- 引入 G2 脚本 --><script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script> </head> <body> <div id="c1"></div> <!-- G2 code start --> <script> $.getJSON('../../static/data/iris_flower_data.json', function(data) { var Stat = G2.Stat; var Util = G2.Util; var Frame = G2.Frame; var frame = new Frame(data); frame = Frame.combinColumns(frame,['萼片长度','萼片宽度','花瓣长度','花瓣宽度'],'value','type','品种'); var chart = new G2.Chart({ id: 'c1', width : 1000, height : 500, plotCfg: { margin: [80, 120] } }); chart.source(frame); chart.facet(['品种']); chart.schema().position(Stat.bin.quantile.letter('type*value')).color('品种').shape('box'); chart.render(); chart.on('tooltipchange', function(ev){ var items = ev.items; var origin = items[0]; var values = origin.point._origin.value; items.splice(0); // 清空 items.push(Util.mix({}, origin, { name: '最小值', value: values[0].toFixed(2) })); items.push(Util.mix({}, origin, { name: '下四分位数', value: values[1].toFixed(2), })); items.push(Util.mix({}, origin, { name: '中位数', value: values[2].toFixed(2), })); items.push(Util.mix({}, origin, { name: '上四分位数', value: values[3].toFixed(2), marker: 'circle' })); items.push(Util.mix({}, origin, { name: '最大值', value: values[4].toFixed(2), marker: 'circle' })); }); }); </script> <!-- G2 code end --> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>箱型图</title> <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/> <!--如果不需要jquery ajax 则可以不引入--> <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script> <!-- 引入 G2 脚本 --><script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script> <script> G2.Global.setTheme('dark'); </script> </head> <body> <div id="c1"></div> <script> $.getJSON('../../static/data/iris_flower_data.json', function(data) { var Stat = G2.Stat; var Util = G2.Util; var Frame = G2.Frame; var frame = new Frame(data); frame = Frame.combinColumns(frame,['萼片长度','萼片宽度','花瓣长度','花瓣宽度'],'value','type','品种'); var chart = new G2.Chart({ id: 'c1', width : 1000, height : 500, plotCfg: { margin: [80, 120] } }); chart.source(frame); chart.facet(['品种']); chart.schema().position(Stat.bin.quantile.letter('type*value')).color('品种').shape('box'); chart.render(); chart.on('tooltipchange', function(ev){ var items = ev.items; var origin = items[0]; var values = origin.point._origin.value; items.splice(0); // 清空 items.push(Util.mix({}, origin, { name: '最小值', value: values[0].toFixed(2) })); items.push(Util.mix({}, origin, { name: '下四分位数', value: values[1].toFixed(2), })); items.push(Util.mix({}, origin, { name: '中位数', value: values[2].toFixed(2), })); items.push(Util.mix({}, origin, { name: '上四分位数', value: values[3].toFixed(2), marker: 'circle' })); items.push(Util.mix({}, origin, { name: '最大值', value: values[4].toFixed(2), marker: 'circle' })); }); }); </script> </body> </html>
JS
<script> $.getJSON('../../static/data/iris_flower_data.json', function(data) { var Stat = G2.Stat; var Util = G2.Util; var Frame = G2.Frame; var frame = new Frame(data); frame = Frame.combinColumns(frame,['萼片长度','萼片宽度','花瓣长度','花瓣宽度'],'value','type','品种'); var chart = new G2.Chart({ id: 'c1', width : 1000, height : 500, plotCfg: { margin: [80, 120] } }); chart.source(frame); chart.facet(['品种']); chart.schema().position(Stat.bin.quantile.letter('type*value')).color('品种').shape('box'); chart.render(); chart.on('tooltipchange', function(ev){ var items = ev.items; var origin = items[0]; var values = origin.point._origin.value; items.splice(0); // 清空 items.push(Util.mix({}, origin, { name: '最小值', value: values[0].toFixed(2) })); items.push(Util.mix({}, origin, { name: '下四分位数', value: values[1].toFixed(2), })); items.push(Util.mix({}, origin, { name: '中位数', value: values[2].toFixed(2), })); items.push(Util.mix({}, origin, { name: '上四分位数', value: values[3].toFixed(2), marker: 'circle' })); items.push(Util.mix({}, origin, { name: '最大值', value: values[4].toFixed(2), marker: 'circle' })); }); }); </script>
运行
复制
箱型图
箱形图又称盒须图、盒式图或箱线图，是一种用作显示一组数据分布情况的统计图。
了解更多
箱型图
箱型图
分组箱型图
一维箱型图
