antv

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/g2图表自定义tooltip展示

默认图效果图需要自定义tooltip标题以及根据是字段显示名称和数值chart.interval().transform({type:'stackY'}).data(dataList).encode('y','value').encode('color','name').tooltip({title:(d)=>'办理状态',//标题设置}).tooltip((d,//每一个数据项index,//索
跳跳的小古风·2023-11-07 03:49

vue 中使用 @antv/g2图表库

1.安装npminstall@antv/g2--save2.使用2.1引入文件和基础配置import{Chart}from'@antv/g2';2.2创建div图表容器2.3编写图表绘制代码2.3.1newChart
一个没有灵魂的女程序媛·2023-11-07 03:19

antV/g2的使用

antV-g2特点:以数据驱动、安装:npminstal@antv/g2使用:准备一个容器执行代码//1.引入import*
哪儿凉快待哪儿·2023-11-07 03:18

antv/G6自定义边

边的通用属性有的时候内置边满足不了我们的需求，我们可以根据G6提供的自定义边的机制，开发更加定制化的边，包括含有复杂图形的边、复杂交互的边、带有动画的边等。通过G6.registerEdge(typeName:string,edgeDefinition:object,extendedTypeName?:string)注册一个新的边类型，其中：typeName：该新边类型名称；extendedTyp
麻辣_水煮鱼·2023-11-07 03:18

【避坑指“难”】自定义AntV G2 Chart柱状图悬浮框信息

实现效果如下：官方配置如下：import{Chart}from'@antv/g2';constdata=[{time:'16Q1',type:'移动游戏',value:0},{time:'16Q1',type
椰卤工程师·2023-11-07 03:18

【Antv G2】AntV G2自定义tooltip，想给tooltip加个单位？代码亲测有效

AntVG2自定义tooltip业务场景实现思路Demo业务场景使用AntVG2做开发的时候，可能会遇到要自定义tooltip的情况。经过查阅文档和调试代码后，最终能实现下面的效果：tooltip可以为单项数据加单位，纵坐标统一显示单位。实现思路参考官网Tooltip配置-内容配置部分，对于tooltip显示内容的定制，我们需要使用geometry.tooltip()接口，同时还可以同chart.
yulamz·2023-11-07 03:46

AntV G2 Tooltip

importReact,{useEffect}from'react'import{observer}from'mobx-react-lite'import{Chart}from'@antv/g2'importbigDecimalfrom'js-big-decimal'exportdefaultobserver
__畫戟__·2023-11-07 03:45

antv/g2图表tooltip自定义并展示坐标之外的数据

首先使用itemTpl自定义tooltip效果是这样的tooltip展示坐标之外的数据感觉Antv文档很不详细，写这块时找了好久才找到方法，现在记一下，方便今后的观看和其他遇到此问题的同学解决办法。
Zan^Z·2023-11-07 03:44

@antv/g2踩坑记录

自定义tooltip//需要先在绘图时配置自定义tooltip的需要的字段chart.point().position('value*1').shape("pointer").tooltip('name*value*date',(name,value,date)=>{retrun{name,value,date}})//配置自定义tooltipchart.tooltip({showContent:
透明的前端·2023-11-07 03:14

Antv/G2 图表坐标轴文字过长时添加省略号

//格式化文字，超过长度添加省略号chart.axis('city',{label:{formatter:(text)=>{//字符太长添加省略号returntext.length>5?`${text.slice(0,5)}...`:text;}}})完整demo：G2constdata=[{city:'Paris',count:275},{city:'London',count:115},{ci
＊且听风吟·2023-11-07 03:13

Antv/G2 分组柱状图

自定义图例legend#chartcontainer{margin:50pxauto;text-align:center;}//G2对数据源格式的要求：JSON数组，数组的每个元素是一个标准JSON对象。constdata=[{month:'Jan',city:'Tokyo',temperature:7},{month:'Jan',city:'London',temperature:3.9},{m
＊且听风吟·2023-11-07 03:13

Antv/G2 饼图

vue2antv/g2基础饼图#app{margin:50pxauto;text-align:center;}{{msg}}varapp=newVue({el:'#app',data:{msg:'',chart
＊且听风吟·2023-11-07 03:13

antV-G2自定义tooltip的结构

Chart.tooltip(true,{//提示信息配置containerTpl:''+'开盘时间'+''+'',//tooltip的外层模板itemTpl:''+'开盘时间{time}'+'',offset:0,'g2-tooltip':{position:'absolute',width:'80px',height:'40px',backgroundColor:'rgba(13,21,42,1
BrocYu·2023-11-07 03:13

antV-g2的tooltip的显示隐藏事件

chart.on('tooltip:show',ev=>{})chart.on('tooltip:hide',ev=>{})
BrocYu·2023-11-07 03:13

antV-G2自定义lable和自定义toolTip的内容

view1.point().position('name*ratio').color('#33BBFF').style({stroke:'#33BBFF',fill:'#33BBFF'}).label('name*ratio',function(){return{useHtml:true,htmlTemplate:functionhtmlTemplate(text,item){vard=item.
BrocYu·2023-11-07 03:12

Antv/G2 自定义tooltip鼠标悬浮提示信息

Antv/G2提示-Tooltip教程Tooltip提示信息文档chart.line().position('label*value').color('type').tooltip('type*value
＊且听风吟·2023-11-07 03:42

使用@antv/g2plot实现文字权重分布划分图

最后效果展示安装@antv/g2plotnpmi@antv/g2plot使用，示例是使用vue3+vite+unocssimport{WordCloud}from'@antv/g2plot';import
UzumakiHan·2023-11-06 15:20

AntV G6 的坑之——从卡掉渣到满帧需要几步

任何问题可在GitHubIssue中提问，求GitHubStar⭐️https://github.com/antvis/g6原文链接：https://g6.antv.antgroup.com/manual
Kopilukwayy·2023-11-05 15:24

AntV G6自定义树状图TreeGraph

AntVG6自定义树状图TreeGraph只是为了记录下自己写的G6组件成果G6去除生成图的动画效果animateconstgraph=newG6.TreeGraph({animate:false,//切换布局时是否使用动画过度}）G6拓扑图刷新页面按钮事件（刷新按钮根据页面变化展示不同的图片）//设置复原按钮图片默认值exportdefault{data(){return{resetViewUr
靠着蓝色背景幻想·2023-11-05 15:51

antv/G6使用记录，自定义简单的节点，实现流程图

antv/G6使用记录，自定义简单的节点，实现流程图效果展示实现代码说明效果展示作为一个简单的记录，包括自定义节点，边等实现代码完整代码如下：G6使用的版本为3.5.0importG6from'@antv
lookingForw_4585·2023-11-05 15:48
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他