antV 第2页

antv/x6 动态添加更新连接桩(port)

@antv/x6动态添加更新连接桩(port)首先通过自定义html节点，生成一个可以迭代多个子节点的模块cell，然后再定义一个进线连接桩（左），定义一系列出线连接桩（erPortPosition），

.伊泽瑞尔·2023-12-04 20:51

2021-06-21

安装：npminstall@antv/g2--save1.引入需要使用的页面引入import{Chart}from'@antv/g2'2.渲染的数据constdata=[{year:'1951年',sales

懒懒猫·2023-12-03 08:48

vue 使用 AntV X6 绘制流程图

npminstall@antv/x6--save在使用的页面用import进行引用。

皮卡穆·2023-12-02 06:14

AntV - F6 小程序移动端图表组件（微信版）

AntV蚂蚁新出的可视化组件，分为很多部分官网F6文档链接安装npminstall--save@antv/f6-wx微信开发工具-工具-构建npm组件使用分为图配置/树图配置4.图配置wxmljson{

止语之语·2023-11-28 11:49

react antv/X6可视化工具超详细入门

描述之前我想先吐槽一下这个X6的官网，可能原生html、JS还行，但是要灵活运用到框架上，官网上的react实例是真看不懂，我个人而言，真的很难灵活运用到真实项目中，幸好后面有带佬的代码供参考，不得不说质量雀食高开整！首先我们的目的是画一个这样的图表看到这个树状图，我们想要搞清楚，我们需要哪几样来完成-不是显示单独一个数据，所以必然要自定义节点-第一先确定数据格式，从后台传过来的数据里面不单是数据

前端该溜子·2023-11-26 21:28

关于antV G6中的on事件、util.each事件及update方法等的使用总结

前言antVG6相对而言是一个目前还处于较于不成熟的关系数据可视化引擎。因此在实习实现关系图的过程中遇到很大的坑。比如说高亮箭头及关联属性、关系图的缩放、以及由于G6是基于canvas原理所以无法对其绘制的节点局部添加事件。因此在此记录下自己在使用G6实现数据库关系图时使用到的一些及技术点。一、关于G6中的on事件on事件监听参数eventName｛String｝事件名callback｛funct

春上·2023-11-26 02:37

g6-思维链路图

前言需求：集团公司风险链路图首次接触@antv/g6，进行记录总结点击框显示公司数据实现步骤安装"@antv/g6":"4.5.0","insert-css":"^2.0.0",安装npminstall

Best_卡卡·2023-11-26 02:05

前端数据可视化之AntV的G2Plot、G6、L7入门

AntV是蚂蚁金服全新一代数据可视化解决方案，AntV不是一个解决方案，他是一套解决方案，AntV包括以下解决方案G2：可视化引擎G2Plot：图表库G6:图可视化引擎Graphin：基于G6的图分析组件

Ashley的成长之路·2023-11-26 02:34

antV G6中以html为节点的自动分层布局数据可视化详解

经过一段时间的技术调研，最终选择蚂蚁金服的数据可视化规范antv家族中的G6。在引入项目之前，还是先从官网的示例开始，示例还挺多的、基本都是针对单个点进行讲解。

weixin_34310127·2023-11-26 02:03

流程图自定义函数_家人们基于AntV G6画流程图了解一下

前言：双节假期已进尾声，今天和大家分享一下，近期，重点实操的蚂蚁开源的图可视化引擎——AntVG6(https://g6.antv.vision/zh)。G6能干嘛呢？画关系图！

weixin_39795284·2023-11-26 02:03

AntV X6源码简析

前言AntV是蚂蚁金服全新一代数据可视化解决方案，其中X6主要用于解决图编辑领域相关的解决方案，其是一款图编辑引擎，内置了一下编辑器所需的功能及组件等，本文旨在通过简要分析x6源码来对图编辑领域的一些底层引擎进行一个大致了解

维李设论·2023-11-26 02:03

Antv G6

前言一、使用步骤1.引入库Step1:使用命令行在项目目录下执行以下命令：npminstall--save@antv/g6Step2:在需要用的vue文件中G6的JS文件中导入：importG6from

qq_51486722·2023-11-26 02:32

Antv踩坑—导入画布数据监听画布渲染完成事件

Antv踩坑记录之监听画布渲染完成事件前言一、导入后台返回的json数据1.页面判断新增/详情页2.后台json数据二、监听1.核心监听2.console总结Antv踩坑记录之监听画布渲染完成事件事件监听目前来说

木村柘哉·2023-11-26 02:01

antv-x6使用及总结 | 京东物流技术团队

1简介AntV是一个数据可视化（https://so.csdn.net/so/search?

京东云开发者·2023-11-26 02:00

echarts与antV学习与实践笔记

目前最流行的两个画图工具，一个是echarts,一个是antV。

溜溜的阿溜·2023-11-26 02:29

antv/g6的学习总结

新建一个简单实例1、使用命令行在项目目录下执行以下命令cnpminstall--save@antv/g62、创建容器3、在需要用的G6的JS文件中导入importG6from'@antv/g6';4、数据准备引入

Seven_Ting·2023-11-26 02:55

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

参考：官网：@antv/g6官网：React中使用@antv/g6官网：使用dom自定义节点⚠️注意:G6的节点/边事件不支持DOM类型的图形。如果需要为DOM节点绑定事件，请使用原生DOM事件。

小小开发者_·2023-11-25 06:09

在Vue中使用Echarts

端评价最高的Javascript可视化工具库(入手难)ECharts.js百度出品的一个开源Javascript数据可视化库Highcharts.js国外的前端数据可视化库，非商用免费，被许多国外大公司所使用AntV

〔晴【天】º〕·2023-11-25 03:22

Antv/G2 柱状图添加自定义点击事件

柱状图点击事件constdata=[{month:'Jan',city:'Tokyo',temperature:7},{month:'Jan',city:'London',temperature:3.9},{month:'Feb',city:'Tokyo',temperature:6.9},{month:'Feb',city:'London',temperature:4.2},{month:'Ma

＊且听风吟·2023-11-21 18:43

Antv/G2 分组柱状图+折线图双轴图表

分组柱状图+折线图双轴图表::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}#chartcontainer{margin:50pxauto;text-align:center;}/*Fixingiframewindow.innerHeight0issueinSafari*/docume

＊且听风吟·2023-11-21 18:43

Antv/G2 自定义折线图线条样式及tootip提示信息样式

自定义折线图线条样式及tootip提示信息样式#chartcontainer{margin:50pxauto;text-align:center;}/*Fixingiframewindow.innerHeight0issueinSafari*/document.body.clientHeightconstdata=[{city:'London',month:'Jan',trate:18.9},{c

＊且听风吟·2023-11-21 18:42

antd G6 画图表，渲染时连接线报 e.edge is not a function 的解决方法

最近项目中新引入antv的g6来话一些流程图，遇到一个问题，render渲染传进来的数值总会报e.edgeisnotafunction的错，但是我本地自己写个假数据却没有任何问题，排查了一下午，终于找到病症所在

七月pro·2023-11-21 16:37

npm install @antv/xflow无法下载该依赖

一、前言最近在学习使用基于antV-X6框架搭建的Xflow组件，在开始下载依赖时就遇到了问题，下面详细说明@antv/xflow无法下载的情况。

大头程序员不头大·2023-11-21 12:47

g6 -TreeGraph案例：任务和任务流关系树图

并且可以已任务的维度进行检索，均展示名称：image.png三、选择工具选择很重要，花了两天时间对比了echarts、antv里的G2、G6。

cq_春风呼呼的吹·2023-11-20 10:34

前端大屏项目思路-如何缩放

想必近几年前端的数据可视化越来越重要了，很多甲方爸爸都喜欢那种炫酷的大屏幕设计，类似如下这种：遇到的这样的项目，二话不说，echarts或者antv，再搭配各种mvvm框架（react，vue），找二次封装过的组件

visionke·2023-11-16 18:10

antv/x6 使用Stencil实现拖拽生成节点

antv/x6使用Stencil实现拖拽生产节点安装stencil插件引用Stencil初始化拖拽生成节点安装stencil插件npminstall@antv/[email protected]

.伊泽瑞尔·2023-11-16 15:19

antv/x6 键盘快捷键事件

antv/x6键盘快捷键事件引用插件取消/重做放大/缩小复制/剪切/粘贴引用插件安装npminstall@antv/x6-plugin-selection--savenpminstall@antv/x6

.伊泽瑞尔·2023-11-16 15:11

在Vue中使用Antv G2

1.安装依赖可以通过npm添加依赖npmi@antv/[email protected]@antv/[email protected].引入依赖在main.js中写入以下内容：importVuefrom'vue'import'vue-g2

测试狗一枚·2023-11-16 10:54

在vue中使用antV-G2展示柱状图之组件参数设置详解

在在vue中使用antV-G2展示柱状图中介绍了如何在vue中使用antV-G2展示柱状图，但是相关的图表参数和chart对象的方法，没有做深度深度介绍。

情天可视化·2023-11-16 10:51

Vue3.x中使用AntV G6绘制力导图实现自适应

Vue3.x中使用AntVG6绘制力导图实现自适应一、需求需求1：Vue3.x项目下使用AntVG6绘制力导图谱需求2：图谱节点为两个IP地址，节点间存在多条连线情况需求3：鼠标悬浮到节点上方时，高亮当前节点并出现tooltip气泡提示，展示相关信息需求4：点击图谱连线后需要高亮关联节点和当前连线需求5：图谱大小需要保证自适应（这里可以是根据窗口自适应，也可以是可调整大小的弹窗DOM内的自适应，后

BreenCL·2023-11-16 10:20

Antv/G2 折线图 DataSet 数据展开成指定格式

DataSet文档G23.2DataSet文档Demo：双折线图/*Fixingiframewindow.innerHeight0issueinSafari*/document.body.clientHeight//在一行中保存多个城市的数据，需要将数据转换成//{month:'Jan',city:'Tokyo',temperature:3.9}vardata=[{month:'Jan',Toky

＊且听风吟·2023-11-16 10:50

vue3 tsx 项目中使用 Antv/G2 实现多线折线图

Antv/G2文档Antv/G2双折线图安装依赖项目中安装antv/g2依赖库：npminstall@antv/g2--save安装成功：项目使用新建文件IndicatorTrend.tsx：import

＊且听风吟·2023-11-16 09:48

可视化图表Highcharts、Echarts、AntV对比

一.HighchartsHighsoft是挪威的一家公司，旗下主要三大产品包括Highcharts,Highmaps和Highstock。其中Highcharts在图表领域处于领先水平，是由纯JavaScript编写的开源图表库。自2009年推出以来，Highcharts一直是竞争激烈的市场中首要且增长最快的图表工具。目前，中文官网是由简数科技提供的Highcharts综合性服务网站，最早是在20

. . . . .·2023-11-14 11:56

bizcharts图表封装之基础折线图（带Slider）

from"bizcharts";//@ts-ignoreimportSliderfrom'bizcharts-plugin-slider';//@ts-ignoreimportDataSetfrom'@antv

懒得懒·2023-11-14 04:03

antv g2的理解总结

G2G2本身是一门图形语法，G2和传统的图表系统（HighCharts，ACharts等）不同，G2是一个基于统计分析的语义化数据可视化系统。它真正做到了让数据驱动图形，让你在使用它时候不用关心绘图细节，只需要知道你想通过它怎么展示你关心的数据。echarts更多的是配置options来显示图片，出发点不同。（g2也同样支持配置项声明）G2构成一个可视化框架需要四部分：数据处理模块，对数据进行加工

weixin_34245749·2023-11-14 04:02

antvg2 环图轮播_antv G2 图标，怎么控制Y轴的0轴，又怎么将负数显示在X轴下方？...

问题描述AntVG23.X版本折线图，无法控制Y轴的0轴位置，也无法让负值显示在X轴下方问题出现的环境背景及自己尝试过哪些方法1.修改chart.scale(option)配置里的Y轴min,max，range属性等都无法处理2.创建新的view(option)，并尝试修改view中配置的min,max也无法处理相关代码importReact,{useEffect}from'react';impo

ST-柚子君·2023-11-14 04:02

antv g2字体阴影_antv g2的明白总结

G2G2自身是一门图形语法，G2和传统的图表体系(HighCharts，ACharts等)差别，G2是一个基于统计剖析的语义化数据可视化体系。它真正做到了让数据驱动图形，让你在运用它时刻不必体贴画图细节，只须要知道你想经由历程它怎样展现你体贴的数据。echarts更多的是设置options来显现图片，起点差别。(g2也一样支撑设置项声明)G2构成一个可视化框架须要四部份：数据处理模块，对数据举行加

weixin_39928017·2023-11-14 04:32

antV G2在vue中的使用

以双折线图为例记录，最终效果图安装npminstall@antv/g2--save在需要的vue文件中引入importG2from'@antv/g2';//引入G2import{Chart}from"@

kleinBlue.·2023-11-14 04:31

antv G2 实战入门教程-折线图-引入JS（Ajax获取数据动态展示）

公司之前用echarts做图表，后来产品大哥让改用G2，没办法上吧。两种方式使用G21，引入JS，版本不要太低，因为有的版本低一些东西没有，容易报错（比如：chart.dataisnotafunction）。我就踩了这个坑，后来用的版本是4.0.15我用的第一种直接引入JS代码示例：注意：下面有一个data的数据，这个数据你可以用Ajax调接口拿到页面上，这个就是你要展示的数据。这个数据是接口处理

七月吃橘子·2023-11-14 04:30

基于AntV G2实现一个通用可视化Vue插件

前言AntVG2坚持自然、确定性、意义感、生长性的设计价值观。与其他可视化插件不同的是，G2是以数据驱动的高交互可视化图形语法，具有高度的易用性和可扩展性。随着业务可视化不断发展，数据复杂度越来越高。实现一个通用的可视化插件越来越迫切。本文基于G2实现了一个可视化Vue插件——p-charts。提示：p-charts是基于AnVG2v3.x最新版本，因为v3.x版本文档比较成熟。后续会紧跟v4.x

liupan6889·2023-11-14 04:30

vue：antV G2在vue中的使用（阿里图表，类似echarts）

效果比echarts好看官方文档：https://g2.antv.vision/zh/docs/manual/getting-started转载来源：https://www.jianshu.com/p/

手把手入门·2023-11-14 04:30

Antv/G2 图表背景实线改为虚线

坐标轴-Axis文档绘图属性-ShapeAttrs文档图表背景实线改为虚线代码示例：chart.axis("value",{grid:{//背景网格刻度线样式line:{style:{lineWidth:0.5,lineDash:[5,2],//虚线},},},});未设置前页面效果：添加代码配置：设置后页面效果：

＊且听风吟·2023-11-14 04:00

Antv/G2 折线图使用 DataSet 进行数据排序

文档安装浏览器引入可以通过标签引入在线资源或者本地脚本：这样，在后续脚本中就可以得到全局变量DataSet：constdv=newDataSet.DataView();命令行安装npminstall@antv

＊且听风吟·2023-11-14 04:59

antv/g2中的柱状图一些配置

g2图表有些api的属性不全，文档看着有些费劲，所以整理了一些项目中用到的柱状图的简单配置项图标初始化constchart=newChart({container:this.rootRef.current,//图标容器使用react的createRef()指定autoFit:true,//图标的宽度自适应height:isYesNoLabel?500:chartH,});chart.data(da

袁敢·2023-11-09 11:34

antv/l7+高德地图+天气弹窗

1、引入mapimport{GaodeMap}from'@antv/l7-maps';//默认引入高德1.ximport{Scene,Marker,MarkerLayer,Popup}from'@antv

办公室的忍者·2023-11-09 11:03

antv/g2在react中画柱状图，条形图与饼图

效果图cnpminstall@antv/g2--save复制代码：importReact,{Component}from'react'import{Chart}from'@antv/g2';classHelloextendsComponent

段友吊缠腰·2023-11-09 10:56

antv G2Plot折线图+多个堆叠柱状图

1.首先是组件的一个安装：npminstall@antv/g2plot--save2.dom的准备 .one{ width:500px; height:200px; border:1pxsolidred

沙子迷了蜗牛眼·2023-11-09 10:24

Antv/G2 多折线图双坐标轴

多折线图双坐标轴#chartcontainer{margin:50pxauto;text-align:center;}/*Fixingiframewindow.innerHeight0issueinSafari*/document.body.clientHeightvardata=[{date:'2023/8/1',type:'london',value:4623,rate:0.33},{date

＊且听风吟·2023-11-09 10:48

AntV/G2 柱状图+折线图双轴图表

柱状图+折线图双轴图表::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}/*Fixingiframewindow.innerHeight0issueinSafari*/document.body.clientHeight;vardata=[{date:'10:10',type:4,va

＊且听风吟·2023-11-09 10:13

antv/x6 自定义html节点并且支持动态更新节点内容

antv/x6自定义html节点效果图定义一个连接桩公共方法注册图形节点创建html节点动态更新节点内容效果图定义一个连接桩公共方法constports={groups:{top:{position:'

.伊泽瑞尔·2023-11-07 07:27

推荐频道

antV