在angular里引入G6--以创建结构图为例

最新推荐文章于 2024-05-16 09:49:40 发布
最新推荐文章于 2024-05-16 09:49:40 发布
阅读量1.6k 收藏 1
点赞数 3
分类专栏： G6 文章标签： angular2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45158253/article/details/119411371
版权

官网地址： https://antv-g6.gitee.io/zh/docs/manual/introduction
此时的官网版本： 4.2.0
我的angular版本： 11

引入

在项目中引入 G6 有以下两种方式：NPM 引入；CDN 引入。

1、在项目中使用 NPM 包引入

Step 1: 使用命令行在项目目录下执行以下命令：

npm install --save @antv/g6

提示：使用案例时，若拷贝官方代码，就要
npm install insert-css --save
npm i --save-dev @types/insert-css
自己写样式也行的

Step 2: 在需要用的 G6 的 JS 文件中导入：

import G6 from '@antv/g6';
// 或
import * as G6 from '@antv/g6';

2、 在 HTML 中使用 CDN 引入

// version <= 3.2

<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>

// version >= 3.3

<script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js"></script>

⚠️ 注意:
在 {$version} 中填写版本号，例如 3.7.1；
最新版可以在 NPM 查看最新版本及版本号；
详情参考 Github 分支：https://github.com/antvis/g6/tree/master。

我用的第一种方式

快速试用

创建一个 G6 的关系图仅需要下面几个步骤：

创建关系图的 HTML 容器；
数据准备；
创建关系图；
配置数据源，渲染。

Step 1 创建容器

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。

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

Step 2 数据准备

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：

const data = {
  // 点集
  nodes: [
    {
      id: 'node1', // String，该节点存在则必须，节点的唯一标识
      x: 100, // Number，可选，节点位置的 x 值
      y: 200, // Number，可选，节点位置的 y 值
    },
    {
      id: 'node2', // String，该节点存在则必须，节点的唯一标识
      x: 300, // Number，可选，节点位置的 x 值
      y: 200, // Number，可选，节点位置的 y 值
    },
  ],
  // 边集
  edges: [
    {
      source: 'node1', // String，必须，起始点 id
      target: 'node2', // String，必须，目标点 id
    },
  ],
};

注意

1、nodes 数组中包含节点对象。每个节点对象中唯一的、必要的 id 以标识不同的节点，x、 y 指定该节点的位置；
2、edges 数组中包含边对象。source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与 目标点 id。
2、点和边的其他属性参见链接：内置节点 和 内置边。

Step 3 创建关系图

创建关系图（实例化）时，至少需要为图设置容器、宽和高。

const graph = new G6.Graph({
  container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
  width: 800, // Number，必须，图的宽度
  height: 500, // Number，必须，图的高度
});

Step 4 配置数据源，渲染

graph.data(data); // 读取 Step 2 中的数据源到图上
graph.render(); // 渲染图

最终结果

img

完整代码

    /* 图的画布容器 */
    <div #mountNode></div>

import { Component, OnInit, ViewChild } from '@angular/core';
import G6 from '@antv/g6';

// 获取容器
@ViewChild('mountNode', { static: false }) mountNode!: any;

// 用定时器， 留出100ms的时间，等待html渲染完，再加载图
  ngAfterViewInit(): void {
    setTimeout(() => { this.render(); }, 100);
  }



   // tslint:disable-next-line:typedef
  render() {
    console.log(123);
    const data = {
      // 点集
      nodes: [
        {
          id: 'node1',
          x: 100,
          y: 200,
        },
        {
          id: 'node2',
          x: 300,
          y: 200,
        },
      ],
      // 边集
      edges: [
        // 表示一条从 node1 节点连接到 node2 节点的边
        {
          source: 'node1',
          target: 'node2',
        },
      ],
    };
    // 测试 是否拿到了 容器
    console.log(this.mountNode.nativeElement);
    // 创建 G6 图实例
    const graph = new G6.Graph({
      container: this.mountNode.nativeElement, // 指定图画布的容器 id
      // 画布宽高
      width: 800,
      height: 500,
    });
    // 读取数据
    graph.data(data);
    // 渲染图
    graph.render();
  }

问题来了

报错了，气人
在这里插入图片描述

解决办法：

又去看了官网：
地址： https://antv-g6.gitee.io/zh/docs/manual/FAQ/angular-support
在这里插入图片描述
可问题报错的描述不太一样，看了他推荐的GitHub问题讨论，有了一个解决方法：
在配置文件里，添加："skipLibCheck": true
添加之后，可以推断类型，项目编译不再报错（别人解释的，我也不懂什么意思）

在这里插入图片描述
gitHub里说，他配置了这个之后，才出现了官网的这种报错
接下来按官网的解决办法就好
在这里插入图片描述
.browserslistrc文件我没动，他自己生成的
在这里插入图片描述
需要ie支持的话，就npm，我没有npm

结果

这一系列走完后的结果：
在这里插入图片描述
感觉可真是太不容易了！！！！

扩展

可以在codeSandBox里测试完图在放到自己的项目里，
在这里插入图片描述
在这里插入图片描述
这里放个流程图的示例：
在这里插入图片描述

把这段代码直接替换codeSandBox 里index.js的全部，就可以得到这个图

import G6 from '@antv/g6';
import insertCss from 'insert-css';

// 我们用 insert-css 演示引入自定义样式
// 推荐将样式添加到自己的样式文件中
// 若拷贝官方代码，别忘了 npm install insert-css
insertCss(`
  .g6-tooltip {
    border-radius: 6px;
    font-size: 12px;
    color: #fff;
    background-color: #000;
    padding: 2px 8px;
    text-align: center;
  }
`);

const data = {
  nodes: [
    {
      id: '1',
      dataType: 'alps',
      name: '董事长',
      conf: [
        {
          label: '姓名',
          value: '刘烨',
        },
        {
          label: '性别',
          value: '男',
        },
        {
          label: '职责',
          value: '统筹一切',
        },
      ],
    },
    {
      id: '2',
      dataType: 'alps',
      name: '总经理',
      conf: [
        {
          label: '姓名',
          value: '张一凡',
        },
        {
          label: '性别',
          value: '女',
        },
        {
          label: '职责',
          value: '计划策略的制定',
        },
      ],
    },
    {
      id: '3',
      dataType: 'sql',
      name: '设计部',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '4',
      dataType: 'sql',
      name: '工程技术',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '5',
      dataType: 'sql',
      name: '财务部',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
   
    
    {
      id: '6',
      dataType: 'sql',
      name: '经营部',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },

    {
      id: '7',
      dataType: 'sql',
      name: '项目部1',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '8',
      dataType: 'sql',
      name: '项目部2',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '9',
      dataType: 'sql',
      name: '材料员',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '10',
      dataType: 'sql',
      name: '技术员',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '11',
      dataType: 'sql',
      name: '工长',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '12',
      dataType: 'sql',
      name: '安全员',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '13',
      dataType: 'sql',
      name: '施工员',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '14',
      dataType: 'sql',
      name: '质检员',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '15',
      dataType: 'sql',
      name: '资料员',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
  ],
  // 这里是node数据关系之间的连线关系
  edges: [
    {
      source: '1',
      target: '2',
    },
    {
      source: '2',
      target: '3',
    },
    {
      source: '2',
      target: '4',
    },
    {
      source: '2',
      target: '5',
    },
    {
      source: '2',
      target: '6',
    },
    {
      source: '3',
      target: '7',
    },
    {
      source: '6',
      target: '8',
    },
    {
      source: '7',
      target: '9',
    },
    {
      source: '7',
      target: '10',
    },
    {
      source: '7',
      target: '11',
    },
    {
      source: '8',
      target: '12',
    },
    {
      source: '8',
      target: '13',
    }, {
      source: '8',
      target: '14',
    }, {
      source: '8',
      target: '15',
    },
  ],
};

G6.registerNode(
  'sql',
  {
    drawShape(cfg, group) {
      const rect = group.addShape('rect', {
        // 对图中 矩形 进行样式设定
        attrs: {
          // 这个x、y是干嘛的
          x: -75,
          y: -25,
          // 框的宽、高、圆角
          width: 150,
          height: 50,
          radius: 10,
          // 框的颜色
          stroke: '#5B8FF9',
          // 框的填充色
          fill: '#C6E5FF',
          // 框的粗细
          lineWidth: 3,
        },
        name: 'rect-shape',
      });
      if (cfg.name) {
        group.addShape('text', {
          attrs: {
            text: cfg.name,
            // 这个x、y不太明白干嘛的
            x: 0,
            y: 0,
            // 字体颜色
            fill: '#00287E',
            // 字体大小
            fontSize: 23,
            // 对齐方式
            textAlign: 'center',
            // 垂直居中
            textBaseline: 'middle',
            // 字体加粗
            fontWeight: 'bold',
          },
          name: 'text-shape',
        });
      }
      return rect;
    },
  },
  'single-node',
);

const container = document.getElementById('container');
const width = 800;
const height = 800;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  layout: {
    type: 'dagre',
    // 线的高度
    ranksep: 60,
    controlPoints: true,
  },
  defaultNode: {
    type: 'sql',
  },
  defaultEdge: {
    type: 'polyline',
    style: {
      // 线的弧度
      radius: 20,
      offset: 45,
      // 箭头
      endArrow: true,
      lineWidth: 2,
      stroke: '#000',
    },
  },
  nodeStateStyles: {
    selected: {
      stroke: '#d9d9d9',
      fill: '#5394ef',
    },
  },
  modes: {
    // 加上这个可以用鼠标来移动
    default: [
      'drag-canvas',
      'zoom-canvas',
      'click-select',
      {
        type: 'tooltip',
        formatText(model) {
          const cfg = model.conf;
          const text = [];
          cfg.forEach((row) => {
            text.push(row.label + ':' + row.value + '<br>');
          });
          return text.join('\n');
        },
        offset: 30,
      },
    ],
  },
  fitView: true,
});
graph.data(data);
graph.render();

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };
蒲公英
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
以G6为例，介绍angular项目引入第三方原生js库的办法——angular G6
alex_zjt的博客
12-22 5350
angular是目前国内并不火的一个框架，由于公司高层选型，笔者不得不使用之。用惯了之后觉得也挺好，也能做出很棒的效果。但笔者经常会遇到一个问题，由于angular全面采用typescript写法和独特的项目组织方式，有时需要引入某些第三方原生js库，这些库并没有angular版本，用法也是像传统JavaScript一样，和angular风格迥异。 刚开始时，笔者经常会选用一些有angular版...
(Angular+ TS) Echarts Graph 关系图节点拖拽不反弹+自定义按钮实现缩放
夏天要吃西瓜瓜瓜的博客
03-06 2602
前提： 1. 需要在module中引入NgxEchartsModule 2. ts文件中引入所需文件： import { Component, OnInit, NgZone } from '@angular/core'; import { of } from 'rxjs'; import * as echarts from 'echarts'; const echart = ec...
angular-graph：角图实现
02-20
角度图 该项目是使用版本8.3.22生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test通过执行单元测试。 运行端到端测试 运行ng e2e以通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用ng help或查看 。
探秘Angular图形可视化神器：ngx-graph
最新发布
gitblog_00067的博客
05-16 468
探秘Angular图形可视化神器：ngx-graph 项目地址:https://gitcode.com/swimlane/ngx-graph ngx-graph是一个强大的图形可视化库，专为Angular应用程序设计。它提供了灵活的接口和丰富的定制选项，让你轻松地展示复杂的数据关系图表。 项目介绍 ngx-graph的核心目标是帮助开发者创建美观且易于理解的图表，以直观呈现网络、流程图或任何依赖关...
AngularJS图「AngularJS Graph」-crx插件
03-09
AngularJS依赖关系图。 这增加了新的浏览器检查器选项卡，“AngularJS图”来浏览你的AngularJS图。 http://angularjs-graph.org/ 特征： - 组件和模块视图 - 重新加载更新图表 - 忽略和过滤模块 - 粘性节点 - 缩放和平移 - 按组件类型过滤 支持语言:English
angular-mxgraph
05-02
AngularMxgraph 该项目是使用版本6.0.8生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test以通过执行单元测试。 运行端到端测试 运行ng e2e通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用ng help或查看 。
关于angular引入ng-zorro的问题浅析
10-14
Ng-Zorro是基于Angular的UI组件库，提供了一系列美观、易用且高度可定制的Ant Design组件，为开发人员提供了一套完整的前端解决方案。 引入Ng-Zorro到Angular项目中主要有两种方式：第一种是通过官方提供的预构建...
angular-cron-gen:用户使用Angular以图形方式构建cron表达式的基本方法
05-17
module ( 'myApp' , [ 'angular-cron-gen' ] ) 包括提供的JS和CSS文件（或创建自己CSS以覆盖默认值）。 < link rel =' stylesheet ' href =' build/cron-gen.min.css ' type =' text/css ' media =' all ' />...
angular-svg-round-progressbar：使用SVG创建圆形进度条的角度模块
01-31
角SVG圆形进度条使用SVG创建圆形进度条的Angular模块安装首先，您必须通过npm安装模块： npm install angular-svg-round-progressbar --save 之后，您需要在模块中导入RoundProgressModule ： import { NgModule } ...
Angular angular-file-upload文件上传的示例代码
01-19
问题描述 附件上传 检定结果以附件形式上传。 这里先不考虑api。...插件很简单，就是一个指令，我们在它提供给我们的指令中声明一个uploader对象，这个对象表示在不同的时间下要执行什么操作，另一种观察者模式
Angular 6 安装到使用
zyjlovehjl的博客
12-03 675
Angular 6 安装到使用 1，下载nodejs，并安装到本地，配置好环境变量 访问nodejs的官方网站的downdolad，网址：https://nodejs.org/en/download/ npm -v 查看是否安装成功，不同的angular版本依赖的nodejs不一样， 此处使用的angular 6, 故可安装nodejs 8-10的版本都可以。 2， 安装angular脚手架 npm install -g angular-cli@6.1.2 ng -v 查看是否安装成功。 @后面可以指定版本
angular图表使用&Vue的图表使用
远来客的博客
12-17 235
图表官网： https://www.echartsjs.com/examples/zh/index.html 注意事项 每次option(图表数据)更新以后必须要重新绘制图标，否则图表数据不会刷新 刷新代码： this.myChart.setOption(this.option); 使用步骤 安装依赖 项目中引入echarts(angular不需要) HTML中定义容器(div)，存放...
Echart4 关系图 Graph 节点点击折叠展开 （Angular6）
Sun~Neo
07-21 2726
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, ElementRef } from '@angular/core'; import { TableServiceService } from './table-service/table-service.service' import *...
【Antv-G6成长之路一】初识antv G6之什么是G6，G6能做哪些事情？（附实例图文）
赏樱看雪撸代码
02-26 2923
Antv G6概念与理解，利用antv G6进行画图，如何绘制拓扑图，前端有何画出一个高质量的拓扑图，页面如何实现树状拓扑结构，G6使用指南之初识G6。
angular 模块构建_使用Express，Angular和GraphQL构建一个简单的Web应用程序
01-15 694
angular 模块构建 本文最初发布在Okta开发人员博客上 。 感谢您支持使SitePoint成为可能的合作伙伴。 在过去的10年左右的时间里，用于Web服务的REST API的概念已成为大多数Web开发人员的头等大事。 最近出现了一个新概念GraphQL。 GraphQL是一种由Facebook发明并于2015年向公众发布的查询语言。在过去三年中，它引起了极大的轰动。 有人将其视为创建W...
g6右键菜单
bfoursix的博客
06-19 4375
import G6 from ‘@antv/g6’; import insertCss from ‘insert-css’; // define the CSS with the id of your menu // 我们用 insert-css 演示引入自定义样式 // 推荐将样式添加到自己的样式文件中 // 若拷贝官方代码，别忘了 npm install insert-css insertCss(#contextMenu { position: absolute; list-style-type: no
使用antV-G6在angualr中画树形关系图
蜗牛~~
04-30 6234
使用antV-G6在angualr中画树形关系图（流量追踪图） 公司有个需求就是既要呈现出每个节点之间的关系（图里面需要带箭头，为了表现出流向关系），又要排版呈现出树状结构，也就是说是具备层次关系的，这种图呢就相当于既不完全是树图，形状呢又不是关系图，我算是苦思冥想了。而且又是在angualr中，angualr中支持的第三方插件特别少，本来想采用echarts的树状图，但是发现，树图的每个节点...
AntV G6自定义流程图Graph
weixin_45594156的博客
07-14 2835
前言：自定义流程图节点样式、节点可拖动，节点文字过长省略，文字过长的节点悬浮展示tooltip插件悬浮框，修改tooltip悬浮框样式。 Dagre 流程图调用组件传值给mapData，这里只是自己演示设置了假数据a 四、这里提供了直接改官方示例数据，简单的参考 在官方图表示例找到Dagre 流程图
在angular里修改el-menu-item样式
03-11
可以通过在组件中使用 ::ng-deep 伪类来修改 el-menu-item 的样式，例如： ::ng-deep .el-menu-item { background-color: red; color: white; } 但是需要注意的是，::ng-deep 伪类是一个被废弃的特性，建议使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值