瀑布图 - AntV

基础柱状图

瀑布图

Waterfall 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>
  var _G = G2,
    Util = _G.Util,
    Shape = _G.Shape,
    Global = _G.Global;

Shape.registerShape('interval', 'waterfall', {
    draw: function draw(cfg, container) {
      var attrs = getFillAttrs(cfg);
      var rectPath = getRectPath(cfg.points);
      rectPath = this.parsePath(rectPath);
      var interval = container.addShape('path', {
        attrs: Util.mix(attrs, {
          path: rectPath
        })
      });

if (cfg.nextPoints) {
        var linkPath = [['M', cfg.points[2].x, cfg.points[2].y], ['L', cfg.nextPoints[0].x, cfg.nextPoints[0].y]];

if (cfg.nextPoints[0].y === 0) {
          linkPath[1] = ['L', cfg.nextPoints[1].x, cfg.nextPoints[1].y];
        }
        linkPath = this.parsePath(linkPath);
        container.addShape('path', {
          attrs: {
            path: linkPath,
            stroke: '#8c8c8c',
            lineDash: [4, 2]
          }
        });
      }

return interval;
    }
  });

var data = [{
    type: '日用品',
    money: 300
  }, {
    type: '伙食费',
    money: 900
  }, {
    type: '交通费',
    money: 200
  }, {
    type: '水电费',
    money: 300
  }, {
    type: '房租',
    money: 1200
  }, {
    type: '商场消费',
    money: 1000
  }, {
    type: '应酬交际',
    money: 2000
  }, {
    type: '总费用',
    money: 5900
  }];

for (var i = 0; i < data.length; i++) {
    var item = data[i];
    if (i > 0 && i < data.length - 1) {
      if (Util.isArray(data[i - 1].money)) {
        item.money = [data[i - 1].money[1], item.money + data[i - 1].money[1]];
      } else {
        item.money = [data[i - 1].money, item.money + data[i - 1].money];
      }
    }
  }

return {
      name: '生活费',
      value: money
    };
  }).shape('waterfall');

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>G2.Global.setTheme('dark');</script>
<script>
  var _G = G2,
    Util = _G.Util,
    Shape = _G.Shape,
    Global = _G.Global;

if (cfg.nextPoints) {
        var linkPath = [['M', cfg.points[2].x, cfg.points[2].y], ['L', cfg.nextPoints[0].x, cfg.nextPoints[0].y]];

return interval;
    }
  });

return {
      name: '生活费',
      value: money
    };
  }).shape('waterfall');

chart.render();
</script>
</body>
</html>

图表简介

Waterfall Chart，瀑布图。瀑布图有助于理解依次引入正值或负值的累积效应。瀑布图也被称为飞行砖图或马里奥图，因为看起来像悬挂在空中的砖头。

图表用法

瀑布图通常用于了解初始值如何受到一系列中间正值或负值的影响。

关联图表

条形图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接