桑基图布局 - AntV

关系图

桑基图布局

展示桑基图的几种布局

<!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>
  $('#mountNode').append('\n<div class="toolbar" style="text-align: center;">\n    <label for="node-align">Select nodeAlign style: </label>\n    <select name="node-align" id="node-align">\n        <option value="sankeyLeft" selected="selected">sankeyLeft</option>\n        <option value="sankeyRight" >sankeyRight</option>\n        <option value="sankeyCenter">sankeyCenter</option>\n        <option value="sankeyJustify">sankeyJustify</option>\n    </select>\n</div>\n');

$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/energy.json', function(data) {
    var $nodeAlign = $('#node-align');

var edges = data.links;
    var graph = {
      nodes: [],
      edges: edges
    };
    var nodeById = {};

function addNode(id) {
      if (!nodeById[id]) {
        var node = {
          id: id,
          name: id
        };
        nodeById[id] = node;
        graph.nodes.push(node);
      }
    }

edges.forEach(function(edge) {
      addNode(edge.source);
      addNode(edge.target);
    });

var chart = void 0,
      dv = void 0;

function repaint() {
      if (chart) chart.destroy();

dv = new DataSet.View().source(graph, {
        // const dv = ds.createView().source(data, {
        // edges: data => data.links,
        type: 'graph'
      });
      dv.transform({
        type: 'diagram.sankey',
        nodeId: function nodeId(node) {
          return node.id;
        },
        nodeAlign: $nodeAlign.val()
      });

chart = new G2.Chart({
        container: 'mountNode',
        forceFit: true,
        height: window.innerHeight
      });
      chart.legend(false);
      chart.tooltip({
        showTitle: false
      });

chart.scale({
        x: {
          sync: true
        },
        y: {
          sync: true
        }
      });
      // edge view
      var edgeView = chart.view();
      edgeView.source(dv.edges);
      edgeView.axis(false);
      edgeView.edge().position('x*y').shape('arc').color('#bbb').opacity(0.6).tooltip('value');

// node view
      var nodeView = chart.view();
      nodeView.axis(false);
      nodeView.source(dv.nodes);
      nodeView.polygon().position('x*y').color('name')
        // .label('name', {
        //   labelEmit: true,
        //   textStyle: {
        //     fill: 'black'
        //   }
        // })
        .style({
          stroke: '#ccc'
        });
      chart.render();
    }

repaint();

$nodeAlign.on('change', function() {
      repaint();
    });
  });
</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>
  $('#mountNode').append('\n<div class="toolbar" style="text-align: center;">\n    <label for="node-align">Select nodeAlign style: </label>\n    <select name="node-align" id="node-align">\n        <option value="sankeyLeft" selected="selected">sankeyLeft</option>\n        <option value="sankeyRight" >sankeyRight</option>\n        <option value="sankeyCenter">sankeyCenter</option>\n        <option value="sankeyJustify">sankeyJustify</option>\n    </select>\n</div>\n');

$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/energy.json', function(data) {
    var $nodeAlign = $('#node-align');

var edges = data.links;
    var graph = {
      nodes: [],
      edges: edges
    };
    var nodeById = {};

function addNode(id) {
      if (!nodeById[id]) {
        var node = {
          id: id,
          name: id
        };
        nodeById[id] = node;
        graph.nodes.push(node);
      }
    }

edges.forEach(function(edge) {
      addNode(edge.source);
      addNode(edge.target);
    });

var chart = void 0,
      dv = void 0;

function repaint() {
      if (chart) chart.destroy();

repaint();

$nodeAlign.on('change', function() {
      repaint();
    });
  });
</script>
</body>
</html>

图表简介

展示桑基图的几种布局

图表用法

展示桑基图的几种布局

关联图表

关系图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接