- 综合排序
- 最热优先
- 最新优先
- 来自专栏TopFE
「AntV」当我用AI为开发AntV图表插上想象的翅膀后
前言 做前端图表时，最耗时的就是找配置参数，比如你在使用AntV G2时，为了更加美观，拉大数据之间的差距，需要将y轴设置一个最小值，由于每个图表的参数少说十几个，多达二十多个，一个一个找，势必会浪费很多时间 下面看一下我在实际开发中的几个案例 几个案例 第一个案例是，在一个折线图中，为y轴设置最小值，我是这样向AI提问， 在antv g2plot 的折线图表中，如何设置y轴的最小值？ 给出的答案是 : 在 AntV G2Plot 的折线图表中，可以通过修改 Y 轴的 min 属性来设置 Y 轴的最小值。 使用前的预备知识 在使用AI搭配AntV 画图表时，我们必须有一些基本的概念，了解一些名词。 当然这个问题你也可以问AI,你可以这样提问： 请详细介绍一下AntV G2Plot 图表中涉及的组件名词，英文及作用， AI 大致会给出这样的答案: AntV G2Plot是一款基于G2的可视化图表库
1.1K20编辑于 2023-08-24 - 来自专栏TopFE
「AntV」基于AntV G6 实现 数据血缘有序分组dag链路图排版
数据链路图是所有数据开发产品中必备的一项功能，不仅仅是因为它提供了数据开发过程的可视化数据链路，还因为它给数据开发的调试，溯源，提供着不可估量的作用。 近期花一个多月做了一个数据血缘图，由于涉及到一些图算法和盒子模型的知识点，具有一定的学习借鉴价值，同时应各位同事的要求，在此做一下分享。 （PS：这次分享终于不再是GitLab CI/CD主题了😑）
1.7K10编辑于 2024-01-12 - </template> <script setup> import { ref, onMounted } from 'vue' import G6 from '@antv 20px; height: 20px; border: 1px solid #ccc; } .circle { border-radius: 50%; } </style> 代码仓库 ⭐AntV来自专栏前端数据可视化
Antv G6 拖拽生成节点
本文简介 点赞 + 关注 + 收藏 = 学会了 AntV G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。 本文主要讲解使用 AntV G6 实现 拖拽生成节点 的功能，如下图所示。 本文使用 Vue3 做基础框架，配合 G6 实现上图效果。 分析 在动手编码之前需要先对使用场景做一个分析。 ">
antv x6 交互行为配置详解
方法 通过Graph的构造参数interacting可实现限制交互行为 const graph = new Graph({ ... interacting: false }); 可用配
nuxt使用antv-l7踩坑
nuxt.js 下使用 antv-l7 实在是有太多的坑了，官方文档也不是很全，只能不断摸索和尝试，下面我把这些坑记录下来，也许能帮到你。 ” nuxt 下只能通过 plugin 的方式引入 l7 不能直接用 import { Scene } from '@antv/l7' 这样的方法，在任何地方都不行，会出现 window undefined client only 组件一样，通过 plugin 的方式引入 在 plugins 目录下新建 l7.js import Vue from 'vue' const l7 = require('@antv /l7') const l7maps = require('@antv/l7-maps') Vue.prototype. $l7maps 地图不能重复渲染，会卡死 这个坑出现的原因还没有找到，怀疑是 antv-l7 这个库在实现时有问题，也可能是与 nuxt 的某种机制冲突，因为好像单独用的时候是没问题的 问题表现如下：
AntV G6新版本源码浅析
图片前言AntV是蚂蚁金服全新一代数据可视化解决方案，其中G6主要用于解决图可视领域相关的前端可视化问题，其是一个简单、易用、完备的图可视化引擎。 sphere-node': SphereNode, }, edges: { 'line-edge': LineEdge, }, combos: {},};export { stdLib }总结综上所述，AntV 参考G6官网G6源码AntV 图发布会圆满收官，G6 5.0 招募社区大牛，共同拥抱开源！
「AntV」使用 AntV G2Plot 实现一个复杂的带有四象限自定义标注的统计散点图
最常用的是AntV图表库和Echarts。 于是我就用AntV实现了他的需求，由于这个图表比较复杂，借着这次AntV的案例征文来给大家详细分享一下。 基础简单散点图实现 import { Scatter } from '@antv/g2plot'; fetch('https://gw.alipayobjects.com/os/antfincdn/j5ADHaMsZx https://g2plot.antv.antgroup.com/api/components/annotations 在一个图表中你可以添加多个图表标注，而且标注的类型也是多种多样的。 官方配置文档 https://g2plot.antv.antgroup.com/api/plots/scatter 由于图标上还要显示文字，嫌麻烦的话可以直接将文字放到图片上，我这里是拆开的， 相关链接 AntV G2Plot 散点图API AntV G2Plot 散点图四象限示例I
「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例
前言 最近研究了一下antv/g2的组合图例，并尝试做了一个不算太难的组合图，下面介绍一下整个图里的实现过程。 我是基于该案例做的开发，https://g2plot.antv.antgroup.com/zh/examples/plugin/multi-view/#combo-plot。与我要做的案例很类似。 多图层的配置api 文档 https://g2plot.antv.antgroup.com/api/advanced-plots/mix 在配置参数中， plots是一个很重要的配置参数，它是一个数组， 完整代码 将一些代码复制到 案例的编辑器中，即可看到效果 import { Mix } from '@antv/g2plot'; const data = [ { xCategory: '识记', 第三个坑点就 两个图例的tooltip可能会遮挡，如下图 后记 基于最近使用antv g2的体验，稍微谈一下自己的感觉。
2019-08-22 vue项目中使用蚂蚁数据可视化 antv
蚂蚁数据可视化 官网示例 第一步：安装 npm install @antv/f2 --save 第二步：在vue 组件组件中引入 import F2 from '@antv/f2' 第三步： id绑定 myChart" width="400" height="260"></canvas> 第四步： 代码编辑 line() { // const F2 = require('@antv position('genre*sold').color('genre'); // Step 4: 渲染图表 chart.render(); }, antv.png
「AntV」@antvg2plot 特殊 散点图 x轴为category 调整了legend 的marker
下面代码演示了如何使用 antv/g2plot 创建一个散点图，并对其进行基本的样式和布局配置。 style="height: 500px; width: 500px">
Dify Agent + AntV 实战：从 0 到 1 打造数据可视化解决方案
答案藏在 Dify Agent 与 AntV 的组合里；Dify Agent 凭借其低代码、高可配置的特性，能快速构建起数据流转、逻辑处理的智能流程，让开发者无需从零编写复杂的后端逻辑；而 AntV 作为阿里系成熟的可视化解决方案 3 本文写作目的这篇内容将从 0 到 1 打通整个链路：从 Dify Agent 的搭建与逻辑配置，到 AntV 图表的选型、数据对接与交互优化，最终形成一套可落地、可复用的数据可视化解决方案；无论你是需要快速交付项目的开发者 4 Dify新建Agent打开Dify，进入工作室，选择【创建空白应用】：图片选择【新手适用】：图片选择Agent应用，输入名称，创建即可：图片创建完成后，进入到agent主界面：图片5 添加AntV工具在最下边的 “工具”一栏，点击【添加】：图片输入AntV进行安装，并添加AntV所有的工具：图片图片6 设置提示词我设计的简单提示词如下，仅为示例：你是一名资深的数据可视化专家：输出：请根据用户的输入或者用户的提问内容
G6: A Graph Visualization Framework in JavaScript
Installation $ npm install @antv/g6 Usage import G6 from '@antv/g6'; const data = { nodes: [ { /en/docs/manual/tutorial/preface Middle Guides: https://g6.antv.vision/en/docs/manual/middle/graph Advanced Guides：https://g6.antv.vision/en/docs/manual/advanced/keyconcept/shape-and-properties API Reference： https://g6.antv.vision/en/docs/api/Graph 基于 G6 的图分析应用 https://g6.antv.vision/zh/docs/manual/cases/relations 图标决策 https://g6.antv.vision/zh/examples/case/decisionBubbles
Day2 建立第一个AntV/G2图表
npm install @antv/g2 --save 成功安装完成之后，即可使用 import 或 require 进行引用。 import G2 from '@antv/g2'; //const G2=require("@antv/g2"); const chart = new G2.Chart({ container: 'c1', width: 600, height: 300 }); 使用该方式进行加载时可以和Echarts一样按需引入AntV图表和组件。 默认使用 require("@antv/g2") 得到的是已经加载了所有图表和组件的 AntV 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以和Echarts一样只按需引入需要的模块。 /g2/lib/core"); require("@antv/g2/lib/geom/line"); require("@antv/g2/lib/geom/point"); var data = [{
图表这么多，该用哪种展示我的数据呢？
今天推荐一个非常实用的图表用法讲解网站 AntV[1]（文末原文链接直达） 网站首页 AntV是蚂蚁集团研发的一个可视化工具，这个网站也提供了绘制各种图形的方法。 当然还可以进一步看下与其他图表的对比，这样就能举一反三，一下掌握几个图表的用法啦，知识储备库是不是又大了一些呢 图表对比 小编有话说 找到自己心目中的那个理想图形后，就可以开始绘制啦，当然你可以直接在AntV 上寻找图形代码，如果不清楚如何使用 AntV 绘图的话，也可以移步小编上一期的 Echarts 教程，在那里寻找对应代码哟～ 数据才是驱动力，图形只是辅助，不要为了一味追求图形的美观而错用一些“高大上” 参考资料 [1] AntV官网: https://antv-2018.alipay.com/zh-cn/vis/chart/index.html [2] 网站首页: https://antv.vision
三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？【面试+工作】
一、安装 和BizCharts一样，可以通过 npm/yarn 引入 npm install @antv/g2 --saveyarn add @antv/g2 --save 与BizCharts不同，G2 官方文档描述得比较详细，可以参考官网的分类： 源数据的解析，将csv, dsv,geojson 转成标准的JSON，查看Connector https://antv.alipay.com/zh-cn/ g2/3.x/api/connector.html 加工数据，包括 filter,map,fold(补数据) 等操作，查看Transform https://antv.alipay.com/zh-cn 使用G2绘图 G2-chart Api文档 https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html ? ? G2: 事件 api文档 https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_%E4%BA%8B%E4%BB%B6 ?
mqtt实现跨平台跨应用通讯
微信小程序 ,vue 组件: mqtt broker(emqx broker) 基础版免费开源 https://www.emqx.io/ 非常好用,功能也非常强大,网上都能找到很完善的文档 antv /f2 https://f2.antv.vision/en 图表组件,echarts感觉千年不变的样式有点lower,还是阿里产品好,虽然参数都差不多,但是还是有差别,很难一个人都能完全掌握,要做图表我就选 antv了 mqttjs https://github.com/mqttjs js mqtt 客户端 paho-mqtt 安装 命令 conda install -c sci-bots 项目中就没问题 微信小程序中连接mqtt 必须使用 wxs前缀对应的就是wss,但微信小程序就不允许用wss或是ws,所以要测试,你的mqtt broker必须开启ssl 微信小程序中使用antv /f2组件必须安装 npm install @antv/wx-f2 --save https://github.com/antvis/wx-f2 VUE中使用antv/f 初始组件的必须写在
csm移动端h5用什么样的视觉方案？
项目需要求在移动端H5需要展示一些数据统计的图表，虽然第一时间想到的是echarts，常用还有Highcharts，D3等，antv家族的图表UI好看一些，再加上F2是移动端可视化方案于是就选择F2，打开官网果然眼前一亮 F2提供的正能满足需求，F2官网地址：https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html初次使用记录一下掘坑之路：一，快速上手（此处参考官方api文档就可以完成 https://www.yuque.com/antv/f2/getting-started）1.习惯在vue里面使用cnpm安装，执行 cnpm install @antv/f2 --save图片2.安装完成之后就是使用了 涉及到图表交互的需要点击的图表会报js错误（ 'interaction' is not a function），当然也不是没有解决的办法的，看过源码会发现可以修改引用路径解决：const F2 = require('@antv
小程序·云开发实战 - 体重记录小程序
klek3khm3.jpeg] [n6ulty5km9.png] 记录的几个点： 1.全局变量 globalData 2.npm 的使用 3.云函数 4.数据库操作 5.async 的使用 6.分享的配置 7.antV cd miniprogram npm init npm i @antv/f2-canvas --save // 我用到了f2，可以换成其他包 设置微信开发者工具 [ktaztskiui.jpeg] /f2-canvas": "~1.0.5", "@antv/wx-f2": "~1.1.4" }, "devDependencies": {} } 3.云函数 官方解释 云函数即在云端（ 使用 上边第二小节有提到 antV 的安装，就不再赘述，直接说一下再页面中引用。 '@antv/wx-f2'; // 设置实例全局变量（务必） let chart = null; function initChart(canvas, width, height, F2) { //
@antv/g6 自定义节点 调用被复写的方法
版本 @antv/g6": “^4.8.10” 场景 @antv/g6通过继承的方法实现自定义形状时，自定义的函数会复写被继承的形状的对应函数，导致被继承的形状的某些特性丢失，通过以下方法解决此问题 方法 import {registerNode, Shape} from "@antv/g6"; // 获取形状工厂 const shapeFactory = Shape.Node // 获取被继承的形状定义
这套前端可视化框架，让数据栩栩如生！
AntV，蚂蚁出品，前端数据可视化，有这一套就够了！ 随着大数据的发展，人们越来越多地使用数据分析来解决问题。 下面分享一套优秀的前端数据可视化框架，AntV，由蚂蚁集团精心打造，可以让数据栩栩如生。 说是 “框架” 有点小看它了，AntV 其实是一套全新又完整的数据可视化 解决方案！ [AntV 架构图] G2、F2、G6、X6、L7、AVA，这特么都是啥啊！ 快让我们来认识一下每个子项目的作用。 [Graphin] X6 X6 是 AntV 旗下的 图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。 [AVA demo] --- 不得不感叹，蚂蚁金服的前端真的是非常专业了，如果要开发数据可视化应用，一定要试试 AntV 呀！ 项目链接：https://www.code-nav.cn/rd/?
