基础箱型图（有异常值）

箱型图

基础箱型图（有异常值）

Box Chart with error，有异常值的基础箱型图。

<!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 data = [{
    x: '职业 A',
    low: 20000,
    q1: 26000,
    median: 27000,
    q3: 32000,
    high: 38000,
    outliers: [50000, 52000]
  }, {
    x: '职业 B',
    low: 40000,
    q1: 49000,
    median: 62000,
    q3: 73000,
    high: 88000,
    outliers: [32000, 29000, 106000]
  }, {
    x: '职业 C',
    low: 52000,
    q1: 59000,
    median: 65000,
    q3: 74000,
    high: 83000,
    outliers: [91000]
  }, {
    x: '职业 D',
    low: 58000,
    q1: 96000,
    median: 130000,
    q3: 170000,
    high: 200000,
    outliers: [42000, 210000, 215000]
  }, {
    x: '职业 E',
    low: 24000,
    q1: 28000,
    median: 32000,
    q3: 38000,
    high: 42000,
    outliers: [48000]
  }, {
    x: '职业 F',
    low: 47000,
    q1: 56000,
    median: 69000,
    q3: 85000,
    high: 100000,
    outliers: [110000, 115000, 32000]
  }, {
    x: '职业 G',
    low: 64000,
    q1: 74000,
    median: 83000,
    q3: 93000,
    high: 100000,
    outliers: [110000]
  }, {
    x: '职业 H',
    low: 67000,
    q1: 72000,
    median: 84000,
    q3: 95000,
    high: 110000,
    outliers: [57000, 54000]
  }];

var _DataSet = DataSet,
    DataView = _DataSet.DataView;

var errorPointView = chart.view();
  errorPointView.source(data);
  errorPointView.axis(false);
  errorPointView.tooltip(false);
  errorPointView.point().position('x*outliers').shape('circle').size(3).active(false);
  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 data = [{
    x: '职业 A',
    low: 20000,
    q1: 26000,
    median: 27000,
    q3: 32000,
    high: 38000,
    outliers: [50000, 52000]
  }, {
    x: '职业 B',
    low: 40000,
    q1: 49000,
    median: 62000,
    q3: 73000,
    high: 88000,
    outliers: [32000, 29000, 106000]
  }, {
    x: '职业 C',
    low: 52000,
    q1: 59000,
    median: 65000,
    q3: 74000,
    high: 83000,
    outliers: [91000]
  }, {
    x: '职业 D',
    low: 58000,
    q1: 96000,
    median: 130000,
    q3: 170000,
    high: 200000,
    outliers: [42000, 210000, 215000]
  }, {
    x: '职业 E',
    low: 24000,
    q1: 28000,
    median: 32000,
    q3: 38000,
    high: 42000,
    outliers: [48000]
  }, {
    x: '职业 F',
    low: 47000,
    q1: 56000,
    median: 69000,
    q3: 85000,
    high: 100000,
    outliers: [110000, 115000, 32000]
  }, {
    x: '职业 G',
    low: 64000,
    q1: 74000,
    median: 83000,
    q3: 93000,
    high: 100000,
    outliers: [110000]
  }, {
    x: '职业 H',
    low: 67000,
    q1: 72000,
    median: 84000,
    q3: 95000,
    high: 110000,
    outliers: [57000, 54000]
  }];

var _DataSet = DataSet,
    DataView = _DataSet.DataView;

图表简介

Box Chart with error，有异常值的基础箱型图。

了解更多

图表用法

除了观察数据集的分布情况外，还可以显著标识出该数据集的异常点。

关联图表

箱形图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接