蚂蚁金服AntV G6-AntV G6 源码 2.0-七达手机站

关系数据可视化框架 AntV - G6

蚂蚁金服 AntV 数据可视化引擎 G6 2.0 发布，G6 是蚂蚁金服-AntV 旗下的针对关系数据的可视化引擎。从 2016 年 12 月，G6 立项至今，已经过去了 1 年半的时间。在过去的时光里，G6 直接或间接的支持了阿里经济体近一百个业务系统。

AntV - G6 详细介绍

G6 是一个由纯 JavaScript 编写的关系图基础技术框架，是解决流程图和关系分析的图表库，集成了大量的交互，可以轻松的进行动态流程图和关系网络的开发。

特性

易用的图形、交互拓展订制
完备的数据 -> 图形映射语法
精致的、简单的、易用的、丰富的关系图
内含高效、丰富的布局算法
内含基础的关系图编辑行为

支持环境

现代浏览器和 IE9 及以上。

安装

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源；

<!-- 引入在线资源 -->

<script src="https://gw.alipayobjects.com/os/antv/assets/g6/2.0.0/g6.js"></script>

<!-- 引入本地脚本 -->

<script src="./g6.js"></script>

通过 npm 安装

我们提供了 G6 npm 包，通过下面的命令即可完成安装

npm install @antv/g6 --save

成功安装完成之后，即可使用 import 或 require 进行引用。

import G6 from '@antv/g6';

const graph = new G6.Graph({
  container: 'mountNode',
  width: 600,
  height: 300
});

开始使用

在 G6 引入页面后，我们就已经做好了创建第一个图的准备了。

下面是以一个简单关系图为例开始我们的第一个图创建。

浏览器引入方式

1. 创建 div 图表容器

在页面的 body 部分创建一个 div，并制定必须的属性 id：

<div id="mountNode"></div>

2. 编写图绘制代码

这部分代码用 <script></script>，可以放在页面代码的任意位置（最好的做法是放在 </body> 之前）。

const data = {
  nodes: [{
    id: 'node1',
    x: 100,
    y: 200
  },{
    id: 'node2',
    x: 300,
    y: 200
  }],
  edges: [{
    id: 'edge1',
    target: 'node2',
    source: 'node1'
  }]
};
const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500
});
graph.read(data);

完成上述两步之后，保存文件并用浏览器打开，一张简单关系图就绘制成功了：

完整的代码如下：


  
    
    柱状图
    
    
  
  
    
    
    
      const data = {
        nodes: [{
          id: 'node1',
          x: 100,
          y: 200
       },{
          id: 'node2',
          x: 300,
          y: 200
       }],
        edges: [{
          id: 'edge1',
          target: 'node2',
          source: 'node1'
       }]
      };
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 500,
        height: 500
      });
      graph.read(data);

∨ 展开

蚂蚁金服AntV G6 2.0

AntV - G6 详细介绍

特性

支持环境

安装

通过 npm 安装

开始使用

同类推荐

猜你喜欢

热门推荐