Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >「AntV」当我用AI为开发AntV图表插上想象的翅膀后

「AntV」当我用AI为开发AntV图表插上想象的翅膀后

作者头像
拿我格子衫来
发布于 2023-08-24 02:51:16
发布于 2023-08-24 02:51:16
62600
代码可运行
举报
文章被收录于专栏:TopFETopFE
运行总次数:0
代码可运行

前言

做前端图表时,最耗时的就是找配置参数,比如你在使用AntV G2时,为了更加美观,拉大数据之间的差距,需要将y轴设置一个最小值,由于每个图表的参数少说十几个,多达二十多个,一个一个找,势必会浪费很多时间,更何况有时你找的参数并不在某一具体的图表模块,而是在公共的图表组件配置模块中。这个时候我就思考,这些寻找配置参数,毫无技术性的,耗时的工作能不能交个AI来做?所以在日常的开发图表的过程中,遇到问题,我刻意地去利用AI去完成。下面看一下我在实际开发中的几个案例

几个案例

第一个案例是,在一个折线图中,为y轴设置最小值,我是这样向AI提问, 在antv g2plot 的折线图表中,如何设置y轴的最小值? 给出的答案是 :

在 AntV G2Plot 的折线图表中,可以通过修改 Y 轴的 min 属性来设置 Y 轴的最小值。具体操作如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Line } from '@antv/g2plot';

const data = [
  { year: '1991', value: 15468 },
  { year: '1992', value: 16100 },
  { year: '1993', value: 15900 },
  { year: '1994', value: 17409 },
  { year: '1995', value: 17000 },
  { year: '1996', value: 31056 },
  { year: '1997', value: 31982 },
  { year: '1998', value: 32040 },
  { year: '1999', value: 33233 },
];

const linePlot = new Line('container', {
  data,
  xField: 'year',
  yField: 'value',
  yAxis: {
    min: 14000, // 设置 Y 轴的最小值为 14000
  },
});

linePlot.render();

以上代码中,我们通过在 yAxis 属性中设置 min 值为 14000 来将 Y 轴的最小值设置为 14000,你也可以根据需要自行更改。

这个答案确实是正确的,只需要将AI提供的代码复制到官方案例的编辑器中,就能显示效果。

后来我又遇到一个问题,就是在一个折线图中,只有一条折线,无法显示图例Legend。于是我询问了AI,给出的答复是需要使用seriesField: 'category', 每一条数据需要配置 category属性,用于区分线段类型。category的值的数量决定这个图表中有多少条折线。这样设计没问题,但就是当只有一条线段时,也必须设置一个category,并且是相同的值。所以在特殊场景下,这个api的设计是有点不那么优雅。

还有一个例子,当我在使用G6画一个图排版时,有一个需求是拖拽一个节点到另一节点上,当这样操作时,使两者联一条线。这是一个很好理解的场景。但如果对于G6不太熟悉的人,可能好扒好一会文档。但如果你问AI的话,有可能会得出这样一个答案

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 创建 G6 实例
const graph = new G6.Graph({
  container: 'graph-container',
  width: 800,
  height: 600,
  modes: {
    // 支持节点拖拽和边连接的交互模式
    default: ['drag-node', 'drag-canvas', 'click-select'],
  },
  defaultEdge: {
    type: 'line',
  },
});

// 注册自定义节点类型
G6.registerNode('circle', {
  draw(cfg, group) {
    const shape = group.addShape('circle', {
      attrs: {
        x: 0,
        y: 0,
        r: 20,
        stroke: '#666',
        fill: 'white',
        lineWidth: 2,
      }
    });
    group.addShape('text', {
      attrs: {
        x: 0,
        y: 0,
        textAlign: 'center',
        textBaseline: 'middle',
        text: cfg.label,
        fontSize: 14,
        fill: '#333',
      },
    });
    return shape;
  },
});

// 注册自定义边类型
G6.registerEdge('smooth', {
  getPath(points) {
    const startPoint = points[0];
    const endPoint = points[points.length - 1];
    const hgap = Math.abs(endPoint.x - startPoint.x);
    if (endPoint.x > startPoint.x) {
      return [
        ['M', startPoint.x, startPoint.y],
        ['C', startPoint.x + hgap / 4, startPoint.y, endPoint.x - hgap / 4, endPoint.y, endPoint.x, endPoint.y],
      ];
    }
    return [
      ['M', startPoint.x, startPoint.y],
      ['C', startPoint.x - hgap / 4, startPoint.y, endPoint.x + hgap / 4, endPoint.y, endPoint.x, endPoint.y],
    ];
  },
});

// 监听节点间的拖拽事件
graph.on('node:dragstart', (e) => {
  const { item } = e;
  graph.getEdges().forEach((edge) => {
    if (edge.getSource() === item || edge.getTarget() === item) {
      graph.setItemState(edge, 'selected', true);
    }
  });
});

// 创建新的边
graph.on('node:drag', (e) => {
  const { item } = e;
  graph.getEdges().forEach((edge) => {
    if (edge.getSource() === item) {
      const model = edge.getModel();
      model.startPoint = {
        x: item.getModel().x,
        y: item.getModel().y,
      };
      graph.updateItem(edge, model);
    }
    if (edge.getTarget() === item) {
      const model = edge.getModel();
      model.endPoint = {
        x: item.getModel().x,
        y: item.getModel().y,
      };
      graph.updateItem(edge, model);
    }
  });
});

// 配置 G6 实例
graph.data({
  nodes: [
    { id: 'node1', label: 'Node 1', x: 100, y: 100, type: 'circle' },
    { id: 'node2', label: 'Node 2', x: 400, y: 100, type: 'circle' },
    { id: 'node3', label: 'Node 3', x: 250, y: 300, type: 'circle' },
  ],
  edges: [
    { source: 'node1', target: 'node2', type: 'smooth' },
    { source: 'node1', target: 'node3', type: 'smooth' },
    { source: 'node2', target: 'node3', type: 'smooth' },
  ],
});
graph.render();

并且在该案例中,还使用自定义节点,而不是简单使用内置的节点。拿到代码后就拷贝到项目里试一下,然后在简单的调试,有时AI会自己瞎编一些官方不支持的API,这个时候谁调试的好,谁就更优秀。

在AI的加持下,我们不必再记忆那么多API,也不用翻找那么多的文档,只需要做的是狠狠地优化自己的问题。 如何使用工具,提高效率一直是人类社会永恒不变的话题。你用半天写的代码,别人用AI加调试,2小时就搞定的。

再讲一个例子,有一次我们测试人员觉得散点图中的图例mark太小了,于是我找了一下图例的配置文档,并询问了AI,都没有得到正确答案。读者们也可以试一试,这个问题别人也有遇到,2019年 在这个帖子里 https://ask.csdn.net/questions/771964/54235171?spm=1001.2014.3001.5501 这是因为g2 的marker 使用的是一个很通用的配置参数,其中的是 marker 的样式配置数据类型 为 ShapeAttrs 。你在文档经常遇到这个参数,用于规定图形的一些样式。这个配置参数里有 有关绘图属性 可以查看官方文档 https://g2plot.antv.antgroup.com/api/graphic-style

最后我不得一个一个属性去尝试,并不是跟着文档去调试,而且是跟着TS类型的定义。 最后,找到了我想要的 要想改变 图例中marker的大小,可以使用 legend.marker.style.r 如下配置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 legend: {
  layout: 'horizontal',
  position: 'top',
  marker: {
    style: {
      r: 7,
    },
  },
},

因为我的marker是 图形,三角形,菱形,正方形,都能正常扩大或缩小,但在线性marker上,线只会延长,并不会加粗。 所以要注意一下。在绘制图形的属性介绍中,没有关于r参数的介绍, 其实这也是 g2plot 文档留下的坑。每个属性并没有解释到很具体。

在AI 时代,如果官方资料库没有做好的话,那么就AI就很难为其赋能,提供有效准确的解决方案。

使用前的预备知识

在使用AI搭配AntV 画图表时,我们必须有一些基本的概念,了解一些名词。如果你不知道那种

使用颜色、大小、形状区分不同的数据类型的图表的辅助元素,用于图表中数据的筛选的东西叫做图例Legend,那么你就无法提图例相关的问题。所有在使用AI工具画图表前,全面了解一下图表的名词是很有必要的。

当然这个问题你也可以问AI,你可以这样提问: 请详细介绍一下AntV G2Plot 图表中涉及的组件名词,英文及作用,

AI 大致会给出这样的答案: AntV G2Plot是一款基于G2的可视化图表库,包含了丰富的组件。以下是AntV G2Plot中涉及到的主要组件及其英文和作用:

  1. Chart:抽象出来的画布类,提供画布初始化、销毁、重绘等方法。
  2. Geometry:几何体,负责数据处理和绘制。如:line(折线)、area(面积)、interval(柱状)、point(散点)等。
  3. Axis:坐标轴组件,分为数值轴、分类轴、时间轴等。
  4. Tooltip:鼠标悬浮提示框,展示数据详细信息。
  5. Legend:图例组件,可以展示不同系列的名称和颜色。
  6. Label:标签组件,可以在图表上标注文字或者数据等信息。
  7. Guide:辅助线组件,可以在图表上添加辅助线、文本等元素。
  8. Annotation:注释组件,可以在图表上添加注释信息,如标题、副标题等。
  9. Interaction:交互组件,包括缩放、平移、选中、高亮等交互方式。
  10. Theme:主题组件,可以更改图表的整体样式,如背景色、字体大小等。

以上这些组件都是AntV G2Plot中常用的组件,在使用G2Plot进行可视化图表开发时,这些组件都是需要用到的。

在我们了解这些名词时,需要和图表具体看到UI对应起来。下面是AntV G2Plot 的一些图表组件的UI描述

图例(legend)

图例(legend)是图表的辅助元素,使用颜色、大小、形状区分不同的数据类型,用于图表中数据的筛选。

坐标轴 - Axis

坐标轴指二维空间中统计图表中的轴,它用来定义坐标系中数据在方向和值的映射关系的图表组件

缩略轴 - Slider

悬浮提示 - Tooltip

提示信息 Tooltip,指当鼠标悬停在图表上或者手指点按移动设备的某个数据点时,以交互提示信息的形式展示该点的数据,比如该点的值,数据单位等。

图表标注 - Annotations

图形标注,Annotation,作为图表的辅助元素,主要用于在图表上标识额外的标记注解。

点击此处可以访问 图标组件

后记

在AI的时代,做任何事都不妨都借助一下AI这个工具,提高效率,早点下班回家玩游戏。 当你用AI为开发AntV图表插上想象的翅膀后,你会发现,一天做十几个复杂的图表根本不是问题。

或许有一天让AI 来写图表库,并撰写更新文档,并写出案例,最后在由AI提供给使用者。完成闭环。哈哈哈。。。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-06-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
虚拟主机如何绑定域名 虚拟主机多少钱一个
说到虚拟主机,网站行业中的站长们应该十分了解这个是什么,就类似于一个空间,专门用来放网站的东西,保存网站的内容。也就是做一个网站,除了要有域名,虚拟主机也是必不可少的,除了之外,还需要有网站的源码,这样才能建立好一个网站。那么虚拟主机如何绑定域名?
用户8715145
2021/08/20
9.1K0
网站建设教程:虚拟主机如何安装PageAdmin建站系统
想要做一个网站,可以选择的建站程序有很多种,如PageAdmin、Discuz、zblog等等。每个建站程序都有它独特的优势,如discuz适合一般的论坛社区,zblog则适用于博客类网站,而PageAdmin就是通用性网站系统。
用户4831957
2019/07/02
6.1K0
怎么绑定域名最正规?绑定域名有哪些注意事项?
费了很大的力气之后,人们终于找到了一款适合自己的域名,关于域名的获得方法确实是非常多的,有些人直接购买了成品,当然对于一些需求较高的人来说,也可以量身定做,这样一来可以拥有更高的辨识度,虽然域名被自己购买了,可是人们却不知道怎么绑定域名最正规。怎么绑定域名最正规呢?
用户8739990
2021/07/30
17K0
怎么绑定域名最正规?绑定域名有哪些注意事项?
动手搭建真正的网站(一):购买服务器、绑定域名
经过前面这么多篇科普文的铺垫,我想此时可以继续跟我哥讨论“如何搭建一个自己的网站”这个话题了,注意,这回我用的词是搭建,因为确实不需要写代码。
Jack.
2022/02/17
26.7K1
动手搭建真正的网站(一):购买服务器、绑定域名
域名怎么绑定服务器?为什么需要绑定服务器?
域名的价格整体并不高,而且随处可见,只要来到了专业的平台上,那么可以进行域名的挑选,虽然域名已经购买而来了,但是似乎并不能够为自己所用,这是因为域名不能够凭空为大家服务,需要绑定在服务器上才行,域名怎么绑定服务器呢?
用户8739990
2021/07/30
25.9K3
域名怎么绑定服务器?为什么需要绑定服务器?
lnmp 环境如何添加域名和虚拟主机
当你在centOS 系统中安装设置 lnmp 环境之后,接下来要做的就是添加域名和虚拟主机了。 提示:如果输入有错误需要删除时,可以按住 Ctrl 再按退格键进行删除。 首先还是打开 Xshell
魏艾斯博客www.vpsss.net
2018/06/01
5.7K0
带你深入了解“云世界”,云服务器如何绑定域名
随着科技的发展,互联网的普及早已经深入人心离不开生活,在互联网的基础上衍生出了一个在网络进行提供服务的服务平台——云服务器。云服务器在日常生活中的使用也是越来越多,大部分的人还是不太清楚云服务器的构造与存在,关于云服务器如何绑定域名?如何重启?如何挣钱?都还只是懂得一星半点。了解一样东西就要像探索一座古堡,唯有坚持深入才能弄清楚他的运用和存在,那么今天就来了解一下云服务器的常见问题吧。
用户8715145
2021/09/03
7.9K0
实战|记一次虚拟主机应急
由于传播、利用本公众号亿人安全所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,公众号亿人安全及作者不为此承担任何责任,一旦造成后果请自行承担!如有侵权烦请告知,我们会立即删除并致歉。谢谢!
亿人安全
2023/12/11
2230
实战|记一次虚拟主机应急
虚拟主机会影响到SEO吗?
对于一个新手站长而言,在做SEO的过程中,相关的SEO培训机构,都是让对方建立一个自己的独立博客,通过优化一个博客,开始SEO之路。
蝙蝠侠IT
2021/04/13
1.4K0
虚拟主机会影响到SEO吗?
国外虚拟主机绑定中文域名方法
首先要去 http://www.cnnic.net.cn/html/Dir/2003/10/29/1112.htm 转换中文域名的转码,把你的中文域(如:赵健.com)名输入之后 转换方式选择 转成punycode,得到:
zhaoJian.Net
2023/02/24
9.3K0
windows2003 apache配置虚拟主机和绑定域名服务
  本篇文章的方法大概在网上都可以找到解决方法,只是不是很明确,在这为了减少网友像我这么粗心的少走些弯路,我自己写了下一个简单明了的设置过程。
会长君
2023/04/26
2.8K0
如何注册虚拟主机
这篇文章教你怎么快速注册虚拟主机,你可以用这个虚拟主机来搭建各种服务,比如参考《WordPress搭建个人博客》搭建WordPress。虚拟主机最大的优势在于它是按小时收费的,操作界面简单。有关虚拟主机的介绍和虚拟主机服务器推荐可以参考我这个《最受欢迎的云主机推荐》博文。
无代码Dev
2024/03/30
6210
如何注册虚拟主机
建站的灵魂拷问:我的网站做好了,为啥无法搜索到?
随着互联网技术的不断发展,越来越多传统企业开始重视品牌的数字化升级,寻求关于网站搭建的方法与技巧。但是在建站的实践过程中总是会遇到不少难题,例如“我的网站做好了,为啥无法搜索到”?腾讯云就此通过大数据分析,筛选出企业客户最关注的3个问题,为您一探究竟。 1、网站制作好了,为什么无法访问? 当制作好网站后,所有人都关心我的网站什么时候能访问? 小技巧来啦!网站制作好之后,需要完成如下4个步骤,缺一不可。 ①绑定域名,将注册的域名同网站绑定上; ②网站备案,可在控制台---网站建设申请[备案授权码]通过授
腾讯云DNSPod团队
2021/09/18
1.4K0
搭建Hexo博客-第4章-绑定自定义域名
在这一篇文章中,我将会介绍如何给博客绑定你自己的域名。其实绑定域名本应该很简单的,但我当初在这上走了不少弯路,所以我觉得有必要用一篇文章专门写这个,以供大家借鉴。
CrystalGabrielle
2023/02/25
1.7K0
云服务器和虚拟主机有什么区别?
有一些朋友刚开始建站可能不知道什么是云服务器和云虚拟主机,其实他们两个不一样但是有一部分确实相同的。
用户7162790
2022/03/23
11.4K0
Apache服务器及虚拟主机配置域名访问本地项目路径
一般的一键生成网站的工具,比如 UPUPW,宝塔之类的,只需要进行第一步操作就可以了。
德顺
2019/11/13
4.8K0
Nginx总结(二)如何配置基于ip的虚拟主机
前面讲了如何安装配置Nginx,大家可以去这里看看nginx系列文章:https://www.cnblogs.com/zhangweizhong/category/1529997.html
章为忠学架构
2020/01/17
2.1K0
Nginx总结(二)如何配置基于ip的虚拟主机
新购GoDaddy虚拟主机设置FTP账户、绑定主域名、及更换IP地址方法
我们在新购Godaddy虚拟主机之后初始阶段是不可以直接使用的,在登录虚拟主机账户的时候需要新设置FTP账户以及主域名。在这篇文章中,老蒋分享作为新接触和新购Godaddy主机的用户,如何设置虚拟主机账户。
老蒋
2021/12/24
4.7K0
新购GoDaddy虚拟主机设置FTP账户、绑定主域名、及更换IP地址方法
新网云虚拟主机绑定 CNAME 不当网站打不开的解决办法
现在各大服务器商家为了争夺客户市场,也推出了一些“看上去挺美的”附赠服务,如果你是 VPS 服务器新手可能用了这些服务后,导致网站经常打不开还不知道,今天魏艾斯博客来说一下一个网友遇到的新网云虚拟主机
魏艾斯博客www.vpsss.net
2018/06/01
3.7K0
如何创建属于自己的网站-网站创建手把手
创建自己的网站对于企业而言,网站是开展电子商务、拓展市场、提升品牌知名度的关键工具。通过网站,企业可以提供在线购物、预约服务、咨询解答等功能,从而增加销售机会和客户满意度。网站是分享知识、经验、观点或新闻的有效渠道。无论是个人博客、新闻网站还是教育平台,都能通过网站将信息传递给广泛的受众。拥有自己的网站可以展示你的专业性和可靠性。
搜嗖工具箱
2024/11/14
7560
如何创建属于自己的网站-网站创建手把手
推荐阅读
相关推荐
虚拟主机如何绑定域名 虚拟主机多少钱一个
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验