G2 - The Grammar Of Graphics

关系图 / 流程图

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>流程图</title>
      <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
      
      <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <script>

// 定义流程图的各种图形
  // 起始点、结束点、流程节点、条件节点

// 自定义start 的图形
  G2.Shape.registShape('point', 'start', {
    drawShape: function(cfg, group) {
      var x = cfg.x;
      var y = cfg.y;
      group.addShape('circle', { // 由于开始的点设置了透明度，所以会显示连接线
        attrs: {
          x: x,
          y: y,
          r: 15,
          fill: '#fff'
        }
      });
      var shape = group.addShape('circle', {
        attrs: {
          x: x,
          y: y,
          r: 10,
          fill: 'black',
          fillOpacity: 0.6,
          stroke: 'black'
        }
      });
      return shape;
    }
  });

// 自定义action的图形
  G2.Shape.registShape('point', 'action', {
    drawShape: function(cfg, group) {
      var x = cfg.x;
      var y = cfg.y;
      var width = 60;
      var height = 30;
      var shape = group.addShape('rect', {
        attrs: {
          x: x - width / 2,
          y: y - height / 2,
          width: width,
          height: height,
          fill: '#fff',
          stroke: 'black'
        }
      });
      return shape;
    }
  });

function combine(Command, x, y) {
    return Command + ' ' + x + ' ' + y;
  }

// 自定义condition 的图形
  G2.Shape.registShape('point', 'condition', {
    drawShape: function(cfg, group) {
      var x = cfg.x;
      var y = cfg.y;
      var width = 50;
      var height = 50;
      var path = '';
      path += combine('M', x, y - height / 2);
      path += combine('L', x - width / 2, y);
      path += combine('L', x, y + height / 2);
      path += combine('L', x + width / 2, y);
      path += 'z';
      var shape = group.addShape('path', {
        attrs: {
          path: path,
          fill: '#fff',
          stroke: 'black' // 可以直接设置颜色 cfg.color，也可以使用映射
        }
      });
      return shape;
    }
  });

// 自定义end 的图形
  G2.Shape.registShape('point', 'end', {
    drawShape: function(cfg, group) {
      var x = cfg.x;
      var y = cfg.y;

group.addShape('circle', {
        attrs: {
          x: x,
          y: y,
          r: 15,
          fill: '#fff',
          stroke: 'black'
        }
      });

var shape = group.addShape('circle', {
        attrs: {
          x: x,
          y: y,
          r: 10,
          fill: 'black',
          fillOpacity: 0.6,
          stroke: 'black'
        }
      });
      return shape;
    }
  });

var nodes = [// 节点信息：类别、ID，位置 x,y
    {id: '0',name: '',type: 'start',x: 50,y: 10},
    {id: '1',name: '步骤一',type: 'action',x: 50,y: 20},
    {id: '2',name: '步骤二',type: 'action',x: 50,y: 30},
    {id: '3',name: '条件',type: 'condition',x: 50,y: 40},
    {id: '4.1',name: '分步骤一',type: 'action',x: 40,y: 50},
    {id: '4.2',name: '分步骤二',type: 'action',x: 60,y: 50},
    {id: '5',name: '汇总',type: 'action',x: 50,y: 60},
    {id: '6',name: '',type: 'end',x: 50,y: 70}
  ];
  var edges = [
    {source: '0', target: '1'},
    {source: '1', target: '2'},
    {source: '2', target: '3'},
    {source: '3', target: '4.1'},
    {source: '3', target: '4.2'},
    {source: '4.1', target: '5'},
    {source: '4.2', target: '5'},
    {source: '5', target: '6'}
  ];

// 创建节点视图
  var nodeView = chart.createView();
  nodeView.coord().reflect(); // 从上到下
  nodeView.axis(false);

nodeView.source(nodes, defs);
  nodeView.point().position('x*y').color('steelblue')
    .shape('type', function(val) {
      return val;
    })
    .label('name', {
      offset: 0,
      labelEmit: true
    })
  .tooltip('name');
  chart.render();
</script>
      
    </body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <script>

// 定义流程图的各种图形
  // 起始点、结束点、流程节点、条件节点

function combine(Command, x, y) {
    return Command + ' ' + x + ' ' + y;
  }

// 自定义end 的图形
  G2.Shape.registShape('point', 'end', {
    drawShape: function(cfg, group) {
      var x = cfg.x;
      var y = cfg.y;

group.addShape('circle', {
        attrs: {
          x: x,
          y: y,
          r: 15,
          fill: '#fff',
          stroke: 'black'
        }
      });

// 创建节点视图
  var nodeView = chart.createView();
  nodeView.coord().reflect(); // 从上到下
  nodeView.axis(false);

// 定义流程图的各种图形
  // 起始点、结束点、流程节点、条件节点

function combine(Command, x, y) {
    return Command + ' ' + x + ' ' + y;
  }

// 自定义end 的图形
  G2.Shape.registShape('point', 'end', {
    drawShape: function(cfg, group) {
      var x = cfg.x;
      var y = cfg.y;

group.addShape('circle', {
        attrs: {
          x: x,
          y: y,
          r: 15,
          fill: '#fff',
          stroke: 'black'
        }
      });

// 创建节点视图
  var nodeView = chart.createView();
  nodeView.coord().reflect(); // 从上到下
  nodeView.axis(false);

流程图

流程图，展示一个简单的流程