antV

小程序使用AntV F2三柱状图，横向左右滑动

效果如图：注意：数据格式的number不可有双引号。constapp=getApp()letchart=null;functioninitChart(canvas,width,height,){//使用F2绘制图表constdata=[{index:0,name:"客单价",lx:"迎风店",number:34.64},{index:0,name:"客流量",lx:"迎风店",number:14}
Zan^Z·2020-09-23 15:20

小程序使用AntV f2写双Y轴折线图及遇到的问题

1.根据官方文档仅有的部分内容，可知，不管是折线图，柱状图还是饼图，数据都要使用它规定的数据格式才可以。下面开始写我所用到的图表1.双Y轴双折线图的写法效果：//注意部分：数据带有双引号，Y轴上不会从小到大排列constapp=getApp()letchart=null;functioninitChart(canvas,width,height,){//使用F2绘制图表constdata=[{ti
Zan^Z·2020-09-22 16:17

阿里巴巴26个前端开源项目

阿里巴巴26个前端开源项目目录1.数据驱动的高交互可视化图形语法AntV-G22.企业级中后台UI解决方案FusionDesign3.设计语言&前端框架AntDesign4.基于G2封装的React图表库
BUBsky·2020-09-17 14:28

antv，图表和地图

前言echarts是比较流行的图标和地图框架，文档清晰，灵活，满足各种自定义。众多的api接口，让使用者犹如大海捞针，每一个细节都需要通过api慢慢调整，耗费开发者大量的时间精力。在这里补充一种新的图表地图框架，虽然做得不如echarts强大，适合快速开发节奏，让前端程序员在除了echarts以外还可以多一种选择。antvantv是蚂蚁金服团队打造的图表和地图框架（用过antd的同学应该知道这个团
glorydx·2020-09-16 05:53

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

from"bizcharts";//@ts-ignoreimportSliderfrom'bizcharts-plugin-slider';//@ts-ignoreimportDataSetfrom'@antv
懒得懒·2020-09-15 12:05

移动端柱形图左右滑动 antv F2

https://antv.alipay.com/zh-cn/f2/3.x/demo/interaction/pan-for-bar-chart.html也可以直接复制下面代码改一改F2图表组件库-AntV
肾虚少年·2020-09-15 12:04

在react中使用antv g2绘制带有sider滑块的chart图表

在slider中会遇到的问题1.slider两边要求展示的为文字，但过滤的时候过滤条件为下标，实现思路如下：过滤的时候判断条件是数值类型即下标，但为了在滑块两端展示文字，需要将’start’,'end’那边改成对应的起始终止文字，但又会出现新的问题，就是在onChange里面打印的startText和endText也为相应的文字而不是下标，考虑着在变化的时候需要将变化的下标赋值给ds里面的from
小五Ivy·2020-09-15 12:33

antvg2中的Slider 滑块插件的简介

引入脚本importG2from'@antv/g2';importSliderfrom'@antv/g2-plugin-slider';cons
小五Ivy·2020-09-15 12:33

antv g2绘制雷达图，点击横坐标的label变色

需求介绍：绘制雷达图点击label改变样式有时候也会要求点击某一个label,对应的内容在某一区域内动态的展示出来，实现数据的联动就可以了。出现的问题:后期发现，当打开关闭控台窗口的时候，再点击label便不会出现颜色的变化，猜想,窗口变化的时候,chart没有重新绘制,但位置发生了变化,点不到对应的label解决办法在window.οnresize=function(){}方法中绘制chart或
小五Ivy·2020-09-15 12:33

antv g2 绘制chart图表在纵轴坐标顶部加上单位

绘制chart图表的时候，一些情况下会要求在纵轴顶部加上单位，使用chart图表的辅助文本便可实现。辅助文本-position属性基本用法position属性取值：{object}|{function}|{array}array:数组来配置位置[x,y]，根据数组中的值的存在以下几种形式：a.对应数据源中的原始数据;b.关键字：‘min’,‘max’,‘median’,‘start’,‘end’，
小五Ivy·2020-09-15 12:01

vue antV G2-3.X组件化

从网上看到阿里系的图表antv觉得非常不错，就想整合到vue中使用。
weixin_34290390·2020-09-15 12:17

移动端使用可视化图表（柱状图、饼状图、折线图）& antv f2在vue中使用方法源码

官网：https://antv.alipay.com/z
初心-杨瑞超个人博客·2020-09-15 11:02

在vue项目中使用Antv-f2的小案例

目录一.两种引入方式1.浏览器引入2.通过npm安装二.两种使用方式1.在配置了webpack或使用vue-cli构建的vue项目使用2.另一种使用方式是在html中直接使用三.vue循环渲染图表,动态绑定Id最近在研究数据可视化，了解到会有移动端的数据可视化需求，所以看到了阿里出的AntvF2.官网有如下简介：F2，一个专注于移动，开箱即用的可视化解决方案，完美支持H5环境同时兼容多种环境（no
大鱼吃小鱼7·2020-09-15 11:21

日常随笔：React+G2 使用changeData实时更新数据

componentDidMount中初始化图表，然后将chart实例进行保存即可在componentWillUpdate的时候完成对于图标的更新代码例子importReactfrom'react';importG2from'@antv
月半叫做胖·2020-09-15 11:09

使用antV中的f2制作含百分比文字的环形图

是在原有例子上添加了两行代码，测试过的F2图表组件库-AntV@font-face{font-family:'charts-icon';/*projectid750097*/}/*Fixingiframewindow.innerHeight0issueinSafari
吃饺子的小土豆·2020-09-15 11:22

小程序开发-mpvue中使用图表库

图表库在开发中使用图表库，推荐百度的Echarts，和阿里出品的AntV家族，其中移动端为AntV-F2Echarts：EchartsAntV-F2：AntV-F2这里antV-F2有现成的原生小程序使用教程
2B_LIS·2020-09-15 10:38

AntV/F2 3.2 因你而动

F23.2,因你而动F2，一个专注于移动，开箱即用的可视化解决方案，完美支持H5环境同时兼容多种环境（node,小程序，weex）。完备的图形语法理论，满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。F23.2做出的努力丰富交互，让手指与图表更亲密2007年iphone的面市，开启了移动设备的触摸感知时代，也主导了移动端的设计向更多得向更易用、符合人体工程学的方向发展，在可
DoriMifas·2020-09-15 10:17

vue + Antv F2

F2npm安装:npminstall@antv/f2--save成功安装完成之后，即可使用import或require进行引用importF2from"@antv/f2/lib/index-all"constF2
FXZ_小智·2020-09-15 10:25

AntV - 我认为这是一个不严谨的错误

今天我在看百度地图和Echarts图表，突然想起来上次在一个前段群里有人给我推荐的AntV图表，今天我特意打开看了下，感觉还会可以的，但是界面上还有些粗糙，感觉不像一个成型的产品。
chengzhan9657·2020-09-15 10:18

AntV F2 数据可视化填坑，图表横向滚动

柱状图横向滚动思路通过Interaction实现平移，通过ScrollBar显示滚动条1.InteractionF2提供一套交互机制，以达到通用交互行为的封装和复用。基于此机制，我们提供了以下五种通用的交互行为：饼图选中柱状图选中图表平移pan图表缩放图表swipe快扫2.ScrollBarScrollbar是一个静态插件，主要用于辅助pan和pinch交互。滚动条只是为pan服务的。数据结构数据
顽石2019·2020-09-15 09:57

vu+antvF2双折线图平移

chart文件（runChart.js）import*asF2from'@antv/f2/lib'require('@antv/f2/lib/interaction/')/****@param{*}id
搬砖的小白·2020-09-15 09:55

vue中 使用antv g2 柱状图与折线图混合使用

爷爷没有输给战火，父亲没有输给贫穷，我却输给了和平年代的生活和爱情，以及太过自由前端QQ群:981668406在此附上我的QQ:2489757828有问题的话可以一同探讨我的github:李大玄我的私人博客:李大玄我的简书:李大玄我的CSDN:李大玄这是数据data:[{time:'9:00-10:00',value:30,type:'曝光量',rate:100},{time:'10:00-11:
李大玄·2020-09-15 09:55

react antv f2分组柱状图实现平移

本周在开发柱状图平移的时候遇到一些问题，普通柱状图可以实现平移的效果，分组柱状图会出现平移的时候会把剩下的数据全部展示出来，通过查看antvf2文档，发现实现平移效果的重点是设置横坐标的values属性，如图所示，histogramList是数据源，originDates是需要展示在当前视口的部分数据。踩坑的原因是分组柱状图是一个横坐标下需要展示多组数据，服务端返回的数据格式跟f2柱状图需要的格式
赵又又i·2020-09-15 09:49

vue+阿里的G2图表-antv+折线图

echarts+highcharts两个常用图表的，现在的话因为项目需要和别的原因也接触使用了阿里的g2图表，感觉效果还是挺好的，在这里分享下官网入口实现效果：实现步骤：第一：安装插件npminstall@antv
浩星·2020-09-15 09:35

Vue-H5移动端项目中使用 Antv F2数据分析可视化图表

项目需要求在移动端H5需要展示一些数据统计的图表，虽然第一时间想到的是echarts，常用还有Highcharts，D3等，antv家族的图表UI好看一些，再加上F2是移动端可视化方案于是就选择F2，打开官网果然眼前一亮
你好！YOYO·2020-09-15 09:58

AntV G2 分组柱状图和折线图混合画法

/***Createdbylqton2017/11/17.*/importReactfrom'react';importcreateG2from'g2-react';import{Stat,Frame}from'g2';classBarGraphextendsReact.Component{render(){constdata=[{"date":"2017-6","value":22.75,"ty
chengshan1664·2020-09-15 09:18

使用antv g2遇到的问题总结-点击柱状图阴影区域

使用antvg2中的柱状图，当数据很少的时候，点击区域很小，如何处理这个问题呢？一：问题如何解决：this.chart.on('plotclick',ev=>{constrecords=this.chart.getSnapRecords({x:ev.x,y:ev.y});console.log(records);constdata=records[0]._origin;if(data){//dos
bunny2016·2020-09-15 09:18

Antv-g2 绘制折线图

0x00AntvG2的绘图流程1.引入js库2.准备渲染容器DOM3.准备渲染数据constdata=[{year:'1991',value:3},{year:'1992',value:4},{year:'1993',value:7},{year:'1994',value:5},{year:'1995',value:6}];4.获取渲染DOM对象constchartDom=document.get
无在无不在·2020-09-15 09:24

AntV曲线图实例代码（vue组件）

文章目录引言效果需求使用代码数据格式组件代码引言有在移动端实现光滑曲线图的需求，选择了AntV的库，但官方文档不太行网上案例更少，找起来很麻烦。
qq_33712668·2020-09-15 09:08

mpvue中使用antv F2制作可滑动折线图（遇到的坑）

mpvue中使用antvF2制作可滑动折线图（遇到的坑），mpvuef2-canvastooltip设置无效最近在开发小程序，需要用到折线图，在echarts和antvF2中选择了后者，不管是echarts，还是F2网上很少关于小程序的相关资料，所以我决定把踩过的坑记录下来。一、首先下载ff-canvas放在static文件夹中f2-canvas二、引入f2-canvas"ff-canvas":"
pan²⁰²⁰·2020-09-15 09:08

antv G2 折线图遇到的坑

1.数据很多时，图例显示不全：=》设置padding:'auto'(自动计算边框，目前仅考虑axis和legend占用的边框)2.图表绘制出来后，外部调用chart.filter()方法无效：=》再调用一次重绘图表chart.repaint();
扮老虎的猪·2020-09-15 09:07

Antv F2双柱状图和折线图的混合写法

importF2from'@antv/wx-f2';letchart=null;//数值显示在柱状图上方得自定义图形，具体参加官方apivarShape=F2.Shape;varUtil=F2.Util
xuwen@ven·2020-09-15 09:03

antv绘制曲线图折线图，把圆点置于曲线后方，点曲线样式自定义！

最近用antv在小程序绘制图表，出现一个问题，看下图，曲线显示在了小圆点上方，很不美观，需要效果入下下图，小圆点置于最上层，不要被挡住，好了问题说明白了，就来看代码：图一代码如下：chart.point
路飞爱上前端·2020-09-15 09:27

React中使用Antv G6报错invalid container解决方法

在react项目中使用antvG6的时候出现了invalidcontainer的错误，各种找解决方案以及在GitHub上找G6的项目，花费了一些时间但是没有找到解决方法，不得不吐槽一下antv官网给出的例子
qq_36560180·2020-09-15 08:07

一次activity弹出dialog 的按键事件记

ANTV平台。
muximuxi525·2020-09-14 19:16

G2折线图

angular7使用G2折线图安装依赖单折线多折线图动态数据结语安装依赖antvG2(官方资料)提供了多种安装方式,这里使用npm添加依赖npminstall@antv/g2--save当前版本3.5.2
蓝色雨点·2020-09-13 11:49

TypeScript项目的问题-第三方包报类型兼容错误

在nuxt项目中，引用了AntV包，1.0.3版本时报了这样子的错误ERRORERRORin/Users/***/Desktop/***/****/****/node_modules/@antv/g2plot
Ugine_H·2020-09-13 08:17

antV之初始G6

npminstall@antv/g6--save然后使用import或require进行引用importG6from'@antv/g6';constgraph=newG6.Gra
春上·2020-09-13 00:10

antv/G6使用记录，vue组件实现节点、边的动态增减、右键事件等功能

 antv/G6是蚂蚁金服数据可视化团队出品的一个功能完备的图可视化引擎。 
lookingForw_4585·2020-09-12 23:36

Antv G6构建流程图(修正)

AntvG6构建流程图(修正)1.在项目中进行引入G61.1使用CDN引入1.2在项目中使用npm包引入Step1:使用命令行在项目目录下执行以下命令：npminstall--save@antv/g6Step2
缘月叙文·2020-09-12 23:31

AntV-G6：画自动连线流程图

效果图安装&引用js安装和引用教程：https://g6.antv.vision/zh/docs/manual/getting-started/#%E5%AE%89%E8%A3%85--%E5%BC%95%
火山烤猪·2020-09-12 23:06

antV G6流程图在Vue中的使用

最近我司项目中需要加入流程图制作功能，于是乎百度各种找可视化绘制拓扑图的轮子，大部分都是国外的，看文档太吃力，不过好在最终让我发现了AntVG6流程图图表库，最新版为2.0，不过编辑器在2.0版本还没有进行开源，所以只能退而求其次，使用了1.2.8版本。希望2.0版本的编辑器尽早开源，在交互方面1.2.8版本还是差了一些。该组件并非开箱即食，需要根据自己的业务进行修改，右侧属性表单部分如果有时间考
weixin_34174105·2020-09-12 23:06

Vuex和antv/g6实现在线绘制分析流程图功能

流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本文章仅抽取最基础的部分简单介绍流程图创建、节点链接、节点删除、菜单操作、重新渲染、本地存储的交互。仅供有类似需求的小伙伴参考，效果图如下：具体实现的业务效果有如下几点：节点拖拽功能，节点任意链接；默认节点锚点（入点、出点）动态设置；节点、边线
良月零五·2020-09-12 23:50

AntV G6绘制简单流程图

初学AntVG6,先简单绘制个图形varUtil=G6.Util;//设置数据vardata={"source":{"nodes":[{"shape":"https://zos.alipayobjects.com/rmsportal/jcCDppNuKpWeNCDvZTbA.png","label":"文本","size":[89,76],"x":720,"y":190,"id":"6ea8aa2
纯粹无忧·2020-09-12 22:40

AntV G6流程图节点控制显示和隐藏

1、点击隐藏，控制隐藏节点4以及相关的边2、点击显示，显示节点4以及相关的边3、点击添加颜色，给指定节点4添加颜色demo如下：节点方法$('body').prepend('隐藏节点和边显示节点和边节点添加颜色')varUtil=G6.Util;//第三步：设置数据vardata={"source":{"nodes":[{"shape":"rect","label":"节点","id":"keyN
纯粹无忧·2020-09-12 22:40

antv/g6-editor的使用详解

在angular中使用@antv/g6-editor你好！这是一篇讲解怎么使用g6-editor实现一个流程调度功能的文章。
jc8189533·2020-09-12 22:42

antv/G6使用记录，实现简单vue组件的demo

 antv/G6是蚂蚁金服数据可视化团队出品的一个功能完备的图可视化引擎。 
lookingForw_4585·2020-09-12 21:20

antV G6流程图在Vue中的使用

antVG6流程图在Vue中的使用最近我司项目中需要加入流程图制作功能，于是乎百度各种找可视化绘制拓扑图的轮子，大部分都是国外的，看文档太吃力，不过好在最终让我发现了AntVG6流程图图表库，最新版为2.0，不过编辑器在2.0版本还没有进行开源，所以只能退而求其次，使用了1.2.8版本。希望2.0版本的编辑器尽早开源，在交互方面1.2.8版本还是差了一些。该组件并非开箱即食，需要根据自己的业务进行
w1366352655·2020-09-12 21:34

VUE和Antv G6实现在线拓扑图编辑

1.首先在Antv官网上找到蚂蚁AntvG6插件，引入插件。也可以npm方式引入。
qq_36659961·2020-09-12 21:06

基于antv G6 和vue 的可视化流程图编辑器

流程图包含开始，结束，工具，分支节点。详见https://www.jianshu.com/p/d4a2419df162
凯凯是坏男银·2020-09-12 21:58
上一页 6 7 8 9 10 11 12 13 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他