表格桑基图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格桑基图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;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.g6-3.1.1/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-2.2.0/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-2.2.6/build/plugins.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/us_president.json', function(data) {
    var sankeyPlugin = new G6.Plugins['template.tableSankey']({
      table: data,
      fields: ['president', 'birth_place', 'age_decade', 'party', 'sgin'],
      onBeforeRender: function onBeforeRender(graph) {
        graph.node({
          color: function color() {
            var colors = ['#FD8C3D', '#D83F43', '#F7BED6', '#E487C7', '#46A848', '#D83F43', '#3B85BA', '#48335B', '#B7CDE9'];
            return colors[parseInt(colors.length * Math.random())];
          },

style: {
            stroke: '#616161'
          }
        });
        graph.edge({
          style: {
            stroke: 'rgb(0, 0, 0)',
            strokeOpacity: 0.2
          }
        });
      }
    });
    var graph = new G6.Graph({
      container: 'mountNode',
      height: window.innerHeight, // 画布高
      fitView: 'cc',
      animate: true,
      plugins: [sankeyPlugin]
    });
  });
</script>
</body>
</html>

树图

流图

网图

编辑器