antV

antv点击节点设置选中状态不生效、选中某节点时取消选中其他节点

正常触发选中节点来说是：//节点点击this.graph.on('node:click',e=>{const{item}=ethis.graph.setItemState(item,'click',true)//设置选中状态})有些时候会不生效，或者想在点击某节点的时候，其他节点取消选中，遍历取消可能会有问题先遍历并取消所有节点的选择状态，然后再设置当前项为选中状态，但由于graph.setIte

今天不要写bug·2025-06-29 03:51

基于Vue+antd，使用antv/x6，实现流程图绘制

节点支持拖动改变宽高3节点支持修改属性4节点支持根据label自动适应宽度或换行5支持保存为json，或者json数据转图...开始节点1节点2结束保存import{Graph,Shape}from"@antv

半糖1122·2025-06-26 17:36

基于antvis/mcp-server-chart实现AntV私有化部署的技术方案

基于antvis/mcp-server-chart实现AntV私有化部署的技术方案mcp-server-chartAModelContextProtocolserverforgeneratingvisualchartsusing

劳葵峥Flower·2025-06-23 06:35

AntV MCP Server Chart 服务部署与 Dify 集成问题解析

mcp-server-chartAModelContextProtocolserverforgeneratingvisualchartsusing@antvis.项目地址:https://gitcode.com/gh_mirrors/mc/mcp-server-chart背景介绍AntVMCPServerChart是AntV

盛义唯Yvonne·2025-06-23 06:34

AntV F2入门教程

以下教程将系统地介绍AntV F2（移动端可视化引擎）的核心组件API，包含安装与引入、画布与图表、数据映射、几何标记、坐标轴、图例、提示、标注和滚动条等，每个API都附带完整示例代码，帮助你快速掌握F2

德育处主任Pro·2025-06-23 02:37

Antv AVA入门教程

一、安装#安装AVA核心包，包含ckb模块npminstall@antv/ava--save#如需单独使用CKBJSON，也可安装独立包npminstall@antv/ckb--save二、模块引入2.1

德育处主任Pro·2025-06-22 15:29

Ant Design Charts 深度解析与实战教程

AntDesignCharts，作为蚂蚁集团AntV团队专为React技术栈打造的图表库，凭借其强大的功能和与AntDesign生态的无缝衔接，成为了众多开发者的首选。

木牛流马2077·2025-06-22 15:58

数据可视化图表

主流可视化库大比拼数据可视化王国ECharts(百变战士)D3.js(无所不能侠)Chart.js(轻盈精灵)Highcharts(商业大亨)AntV系列(全能

前端熊猫·2025-06-21 11:31

@antv/x6、@antv/x6-react-components X6 图编辑引擎在 react typescript 项目中实践

X6图编辑引擎X6是AntV旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建DAG图、ER图、流程图等应用。

伍哥的传说·2025-06-15 10:29

解决 AntV G6 使用 SVG 渲染脑图时节点文字过多导致拖动卡顿的问题

当使用AntVG6的SVG渲染模式处理包含大量文字的脑图节点时，长按拖动出现卡顿是常见性能问题。以下是几种有效的解决方案：1.优化节点渲染方式使用Canvas渲染替代SVGconstgraph=newG6.Graph({container:'container',renderer:'canvas',//使用canvas渲染器替代svg//其他配置...});混合渲染策略对于复杂图形使用Canvas

啃火龙果的兔子·2025-06-02 04:10

Web端ER可视化

下面是重构前后对比：重构前重构后功能方面只有逻辑模型层面的ER图包括概念模型、逻辑模型、物理模型3个层面的ER图实现方式单页面、antv/g6微前端、ReactFlow、Elkjs至于为什么前后采用的技术变化这么大

wl_·2025-05-30 12:28

SpringBoot+AntV实现一次前后端交互渲染多个饼状图

场景效果SpringBoot+AntV实现饼状图中的花瓣图：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92810169在上面已经实现一个饼状图的基础上实现一次前后端交互实现四个饼状图

霸道流氓气质·2025-05-26 03:47

基于@antv/x6的流程图

基于@antv/x6的流程图1.引言基于antv/x6实现自定义流程图。

每日一问终成大佬·2025-05-23 05:16

vue2 + antvx6 实现流程图功能

导入关键包npminstall@antv/x6--savenpminstall@antv/x6-vue-shape保存插件(可选)npminstall--save@antv/x6-plugin-clipboard

布Coder·2025-05-23 04:12

vue+G6 完成拓扑图，高亮显示，新增节点，重新渲染，销毁画布

使用G6（“antv/g6”:“^4.1.4”,）完成拓扑图，高亮显示，新增节点，重新渲染，销毁画布新增importG6from"@antv/g6";lettextColor="#59FDFC";exportdefault

前端菜鸡日常·2025-05-23 01:57

vue 常见ui库对比（element、ant、antV等）

ElementUI1.简介ElementUI是一个基于Vue2和Vue3的企业级UI组件库，提供了丰富的组件和主题定制功能。官方网站：ElementUI2.主要特点丰富的组件：包括表单、表格、布局、导航、弹窗等多种组件。主题定制：支持主题定制，可以自定义组件的样式。国际化支持：支持多种语言，方便国际化开发。文档齐全：详细的文档和示例代码，易于上手。社区活跃：拥有活跃的社区和丰富的插件支持。3.优缺

香蕉可乐荷包蛋·2025-05-08 07:32

无尘-基于Kettle引擎开发的在线ETL数据清洗项目

华为TinyVue+AntV/X6双剑合璧基于TinyVue构建低代码拖拽式操作界面，

·2025-04-16 19:02

x6.js 流程图绘制笔记，常用函数

官方参考网站如下：https://antv-x6.gitee.io/zh/docs/tutorial/about目录安装x6创建绘制区域插入数据并渲染添加新节点删除节点连接节点连接桩设置快捷键Graph

web前端神器·2025-04-01 06:58

antv/g6 重新渲染画布

初始定义一个graph：null；在initGraph方法内初始graph前加判断，if（graph）｛graph.destroy｝，之后this.graph=newG6.graph({})

AlphaFree_·2025-03-30 11:01

XFlow 开源项目教程

XFlowReactcomponentforbuildinginteractivediagrams.项目地址:https://gitcode.com/gh_mirrors/xf/XFlow1.项目介绍XFlow是由AntV

余靖年Veronica·2025-03-19 01:59

AntV X6结合Vue组件渲染节点，并与节点组件进行双向的数据交互

attrs的方式的话，比较麻烦，且难以结合使用Element-ui的交互组件，因此换成结合Vue组件渲染方式注册自定义节点（官方文档相对简单了点，老报错，搞了老半天，嘤嘤嘤）安装依赖npminstall@antv

南七小僧·2025-03-08 23:55

antv x6自定义节点(使用vue渲染节点）

1、安装@antv/x6-vue-shape#npmnpminstall@antv/x6-vue-shape#yarnyarnadd@antv/x6-vue-shape#在vue2下还需要安装@vue/

m0_55070913·2025-03-08 23:52

Antv G6动态更新自定义节点数据

背景由于公司项目需求，最近研究了一下使用蚂蚁的antvG6来构建拓扑图。成果实例由于很多个性需求，所以图中的各种edge和node都是使用G6.registerNode和G6.registerEdge两个方法来自定义的。下面贴一下我自定义节点和边的代码片段。G6.registerNode(item.iconName,{draw(cfg,group){if(item.iconName==='warn

恁说叫啥就叫啥·2025-03-08 01:30

antv/x6 实现框组功能

前言：今天看到有小伙伴看到antv/x6多层嵌套下自动拓展父节点这篇文章后在底下留言怎么实现框组的功能，现在就单一摘出来讲解一下。

bigHead-·2025-03-08 00:29

AntV | 蚂蚁数据可视化 G2Plot 通用 API

AntV|G2PlotAPIAntV|G2Plot教程1、通用APIG2Plot的核心技术架构非常简单，所有的Plot图表都继承于一个基类，基类为所有的图表提供的了通用的API方法，而每个具体的可视化图表仅仅处理自己不同的配置项

一个平凡de人·2025-03-06 13:24

审批流AntV框架蚂蚁数据可视化X6饼图（注释详尽）

大家好，这次使用的是AntV的蚂蚁数据可视化X6框架，类似于审批流的场景等，代码如下：X6框架参考网址：https://x6.antv.vision/zh/examples/showcase/practices

shalDream·2025-03-06 11:14

AntV G6自定义流程图Graph

AntVG6自定义流程图GraphAntVG6自定义流程图Graph一、先看下我的效果图二、参考官方图表示例地址三、代码已整合成vue组件四、这里提供了直接改官方示例数据，简单的参考AntVG6自定义流程图Graph前言：自定义流程图节点样式、节点可拖动，节点文字过长省略，文字过长的节点悬浮展示tooltip插件悬浮框，修改tooltip悬浮框样式。一、先看下我的效果图二、参考官方图表示例地址Da

靠着蓝色背景幻想·2025-02-24 04:38

react19设计AntVX6 人工智能建模 DAG 图

/store/state'import{Graph,Path}from'@antv/x6'import{History}from'@antv/x6-plugin-history'importAlgoNodefrom

I like Code?·2025-02-22 02:06

VUE+antvx6实现拖拽自定义流程图

最近公司需要做一个流程图，看了看antv/X6感觉挺合适，就研究了半个月。网上也没什么资料，又怕自己忘，就自己记录一下用到得一些事件方法，方便以后再用到可以查阅。

ekskef_sef·2025-02-07 17:33

常见的图形库对比 Echarts Highcharts AntV

图形库图形库特点图表类型适用场景依赖项官网/文档ECharts功能丰富，支持大规模数据，交互性强折线图、柱状图、饼图、地图、雷达图、散点图、热力图等复杂数据可视化无https://echarts.apache.org/Chart.js简单易用，轻量级，支持响应式设计折线图、柱状图、饼图、雷达图、散点图等简单图表，快速开发无https://www.chartjs.org/D3.js功能强大，灵活性高

·2025-01-19 19:59

Antv G6 拖拽生成节点

本文简介点赞+关注+收藏=学会了AntVG6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。本文主要讲解使用AntVG6实现拖拽生成节点的功能，如下图所示。file本文使用Vue3做基础框架，配合G6实现上图效果。分析在动手编码之前需要先对使用场景做一个分析。需要考虑的情景1、画布可能不是全屏的在真实项目中，使用G6做的拓扑图，画布有可能不是全屏的，很大可能有左侧

德育处主任·2024-09-12 08:33

@antv/x6 填充一个背景图片，并让其显示出来。

1、填充背景色的时候，开始不显示背景图片，只显示背景颜色。2、开始是放在assets/images目录下：constgraph=newGraph({container:document.getElementById("container")asHTMLElement,width:widthPx,height:heightPx,background:{color:"#F2F7FA",position

花花鱼·2024-09-11 17:57

antV x6官网地址

antVx6官网1：https://x6.antv.vision/zh/docs/tutorial/basic/graphantVx6官网2:https://x6.antv.antgroup.com/tutorial

果子切克now·2024-09-04 13:00

微信小程序--使用antv F2绘制折线图

微信小程序–使用antvF2绘制折线图官网地址：https://f2.antv.antgroup.com/tutorial/getting-started1、引入antvF2npmi@antv/f2-canvas2

cccc☜·2024-08-25 10:22

[微信小程序] 使用AntV F2 绘制双Y轴

F2的官方给了一个示例https://github.com/antvis/wx-f2，但是不够清晰和简洁，所以我自己简单改造了一下，供大家参考代码运行环境是在微信小程序里执行的，按照官方文档的写法，放在了“data”对象里wxml代码：js代码Page({data:{//动态改变chart数据getCurrentPages()[0].data.chartDatachartData:[],//小程序

夏日米米茶·2024-08-25 03:34

微信小程序（wepy + Echarts）绘制图表

操作相对较多的有百度（Echarts）AntV（F2），当前是基于wepy框架使用npm安装引用的。【准备】1、下载ECharts插件保存本地（自定义组建commponents）。

刘小二Start·2024-08-25 03:34

计算机毕业设计之springboot+mpvue招聘网站招聘信息分享平台招聘信息分享小程序

介绍小程序端，使用美团小程序框架mpvue+有赞UI组件库Vant+蚂蚁金服数据可视化方案AntV等。后端基于SpringBoot+MyBatis+Redis+Mysql。

计算机毕业设计大全·2024-08-23 21:13

antv/x6 边添加鼠标悬浮高亮和删除功能

antv/x6边添加鼠标悬浮高亮和删除功能效果添加悬浮效果和删除工具取消悬浮效果边删除后的回调函数效果添加悬浮效果和删除工具this.graph.on('edge:mouseenter',({cell}

.伊泽瑞尔·2024-02-04 23:56

antv/x6节点添加鼠标悬浮高亮和删除功能

antv/x6节点添加鼠标悬浮高亮和删除功能效果鼠标悬浮高亮鼠标移出恢复原状态效果鼠标悬浮高亮this.graph.on('node:mouseenter',({node})=>{node.addTools

.伊泽瑞尔·2024-02-04 22:55

使用蚂蚁金服移动端F2生成曲线表图

github地址：https://github.com/antvis/f2/api文档：https://www.yuque.com/antv/f2/

_oop·2024-02-03 09:16

React使用@antv/g6绘制树形图

在react中通过@antv/g6实现树形图，包括自定义连接线、弹窗、展开/收起、配置项说明1、自定义连接线constflowLine={ draw(cfg:any,group:any){ conststartPoint

凉城┓.〆·2024-01-31 14:11

利用X6 制作一个简单的流程图工具

地址：https://github.com/duKD/antv-x6-org运用antv/X6：https://x6.antv.antgroup.com/来实现一个简单的流程图工具项目预览：功能支持框选

cheerfulCoder·2024-01-31 12:04

antv x6 实现拖拽

单独封装了一个js文件，方便调用import'@antv/x6-vue-shape'import{Addon,Graph}from'@antv/x6'//拖拽生成四边形exportconststartDragToGraph

我就是你的语法糖️·2024-01-31 11:05

vue使用antv-x6 绘制流程图DAG图（二）

代码：import{Graph,Node,Path,Cell,Addon}from"@antv/x6";import{register}from"@antv/x6-vue-shape";import{Dnd

小贵子的博客·2024-01-31 11:02

Axure9知识点复盘

原型文件示例.rp将反复被调用都模板作成母版鼠标和键盘的交互形状交互登录页面的实现动态面版滚动条的使用如何在Axure中动态加载图表（AxhubCharts）1.AxhubCharts是基于Echarts和Antv

爱吃java的羊儿·2024-01-29 19:13

vue+antv L7实现高德地图自定义样式和自定义marker

实现思路1.在index.html中引入antvL7和高德地图window._AMapSecurityConfig={securityJsCode:"",//高德地图密匙};2.绘制地图容器3.绘制地图data(){return{scene:null,data:[{id:1,name:'',lng:'',lat:'',}}...methods:{initMap(){constthat=this;c

jinxi1112·2024-01-28 10:44

antv/g6绘制数据流向图

antv/g6绘制数据流向图前言接口模拟数据htmlts页面效果前言在业务开发中需要绘制数据流向图，由于echarts关系图的限制以及需求的特殊要求，转而使用antv/g6实现，本文以代码的方式实现数据流向需求以及节点分组

千寻物语·2024-01-24 08:26

antv x6填坑指南：部分节点拖拽和操作撤销重做不生效问题、使用Stencil过滤时过滤后分组的显示高度无法根据过滤节点自适应问题

问题1.部分分组中节点拖拽添加或操作后撤销重做操作不生效。前提：使用Stencil插件，创建画布侧边栏的UI组件，同时使用其分组、折叠能力。分组包含固定分组、后台接口获取的动态分组和组件。//固定分组初始化initStencil(graph,stencil){//defaultGroup是固定分组和其节点信息，自行添加defaultGroup.forEach((gp,index)=>{constg

小玲子小玲子·2024-01-23 14:41

2019-08-22 v（手把手教学）vue3.0 项目中安装使用jquery

第一步：安装npminstall--savejquery第二步：查看package.json文件"dependencies":{"jquery":"^3.4.1",///一定要有这个没有的话，手动添加"@antv

冬天的_太阳·2024-01-17 23:04

vue3 使用antv地图：地球飞线、地图打点

constinitEarth=()=>{earthScene=newScene({id:"earth",map:newEarth({center:[154.113164,25.570667],zoom:3,//pitch:50}),});//地球模式下背景色默认为#000通过setBgColor方法我们可以设置可视化层的背景色earthScene.setBgColor("");constearth

irisMoon06·2024-01-16 05:31

推荐频道