区域图（存在空值）

基础面积图

区域图（存在空值）

区域图，数据存在空值

<!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 = [{
    "year": "1986",
    "ACME": 162,
    "Compitor": 42
  }, {
    "year": "1987",
    "ACME": 134,
    "Compitor": 54
  }, {
    "year": "1988",
    "ACME": 116,
    "Compitor": 26
  }, {
    "year": "1989",
    "ACME": 122,
    "Compitor": 32
  }, {
    "year": "1990",
    "ACME": 178,
    "Compitor": 68
  }, {
    "year": "1991",
    "ACME": 144,
    "Compitor": 54
  }, {
    "year": "1992",
    "ACME": 125,
    "Compitor": 35
  }, {
    "year": "1993",
    "ACME": 176,
    "Compitor": 66
  }, {
    "year": "1994",
    "ACME": 156
  }, {
    "year": "1995",
    "ACME": 195
  }, {
    "year": "1996",
    "ACME": 215
  }, {
    "year": "1997",
    "ACME": 176,
    "Compitor": 36
  }, {
    "year": "1998",
    "ACME": 167,
    "Compitor": 47
  }, {
    "year": "1999",
    "ACME": 142
  }, {
    "year": "2000",
    "ACME": 117
  }, {
    "year": "2001",
    "ACME": 113,
    "Compitor": 23
  }, {
    "year": "2002",
    "ACME": 132
  }, {
    "year": "2003",
    "ACME": 146,
    "Compitor": 46
  }, {
    "year": "2004",
    "ACME": 169,
    "Compitor": 59
  }, {
    "year": "2005",
    "ACME": 184,
    "Compitor": 44
  }];
  var dv = new DataSet.View().source(data);
  dv.transform({
    type: 'fold',
    fields: ['ACME', 'Compitor'],
    key: 'type',
    value: 'value'
  });
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(dv, {
    value: {
      alias: 'The Share Price in Dollars',
      formatter: function formatter(val) {
        return '$' + val;
      }
    },
    year: {
      range: [0, 1]
    }
  });
  chart.tooltip({
    crosshairs: true
  });
  chart.area().position('year*value').color('type').shape('smooth');
  chart.line().position('year*value').color('type').size(2).shape('smooth');
  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 = [{
    "year": "1986",
    "ACME": 162,
    "Compitor": 42
  }, {
    "year": "1987",
    "ACME": 134,
    "Compitor": 54
  }, {
    "year": "1988",
    "ACME": 116,
    "Compitor": 26
  }, {
    "year": "1989",
    "ACME": 122,
    "Compitor": 32
  }, {
    "year": "1990",
    "ACME": 178,
    "Compitor": 68
  }, {
    "year": "1991",
    "ACME": 144,
    "Compitor": 54
  }, {
    "year": "1992",
    "ACME": 125,
    "Compitor": 35
  }, {
    "year": "1993",
    "ACME": 176,
    "Compitor": 66
  }, {
    "year": "1994",
    "ACME": 156
  }, {
    "year": "1995",
    "ACME": 195
  }, {
    "year": "1996",
    "ACME": 215
  }, {
    "year": "1997",
    "ACME": 176,
    "Compitor": 36
  }, {
    "year": "1998",
    "ACME": 167,
    "Compitor": 47
  }, {
    "year": "1999",
    "ACME": 142
  }, {
    "year": "2000",
    "ACME": 117
  }, {
    "year": "2001",
    "ACME": 113,
    "Compitor": 23
  }, {
    "year": "2002",
    "ACME": 132
  }, {
    "year": "2003",
    "ACME": 146,
    "Compitor": 46
  }, {
    "year": "2004",
    "ACME": 169,
    "Compitor": 59
  }, {
    "year": "2005",
    "ACME": 184,
    "Compitor": 44
  }];
  var dv = new DataSet.View().source(data);
  dv.transform({
    type: 'fold',
    fields: ['ACME', 'Compitor'],
    key: 'type',
    value: 'value'
  });
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight
  });
  chart.source(dv, {
    value: {
      alias: 'The Share Price in Dollars',
      formatter: function formatter(val) {
        return '$' + val;
      }
    },
    year: {
      range: [0, 1]
    }
  });
  chart.tooltip({
    crosshairs: true
  });
  chart.area().position('year*value').color('type').shape('smooth');
  chart.line().position('year*value').color('type').size(2).shape('smooth');
  chart.render();
</script>
</body>
</html>

图表简介

区域图，数据存在空值

了解更多

图表用法

G2 的区域图遇到 null 值的时候，会对图形作截断处理

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接