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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例
最近研究了一下antv/g2的组合图例,并尝试做了一个不算太难的组合图,下面介绍一下整个图里的实现过程。
拿我格子衫来
2023/08/24
1.8K0
「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例
Antv G6 拖拽生成节点
AntV G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。
德育处主任
2022/09/23
1.6K0
Antv G6 拖拽生成节点
12个最常用的matplotlib图例 !!
折线图(Line Plot):用于显示数据随时间或其他连续变量的变化趋势。在实际项目中,可以用于可视化模型性能随着训练迭代次数的变化。
JOYCE_Leo16
2024/03/19
8250
12个最常用的matplotlib图例 !!
图可视化探索与实践
随着公司业务扩大,数据日益复杂,当下非常需要一种对用户理解更简便、交互更友好的数据关系的可视化产品,围绕这个场景,本文带你深入浅出前端如何开发图可视化(不含树图)。
政采云前端团队
2023/09/01
4890
图可视化探索与实践
【3】超级详细matplotlib使用教程,手把手教你画图!(多个图、刻度、标签、图例等)
matplotlib的图像都位于Figure对象中,你可以用plt.figure创建一个新的Figure.在subplot上进行绘制
汀丶人工智能
2022/12/21
1.8K0
【3】超级详细matplotlib使用教程,手把手教你画图!(多个图、刻度、标签、图例等)
「AntV」使用 AntV G2Plot 实现一个复杂的带有四象限自定义标注的统计散点图
作为一名CSDN的前端领域优质创作者,时常有一些读者向我咨询前端问题。最近就有一个读者看了一些我之前写的数据可视化文章,向我请教如何制作一个比较复杂的散点图,由于目前做的是大数据项目,在数据可视化也做过一些成绩,尤其是数据分析,数据血缘链路。最常用的是AntV图表库和Echarts。 于是我就用AntV实现了他的需求,由于这个图表比较复杂,借着这次AntV的案例征文来给大家详细分享一下。
拿我格子衫来
2023/08/24
2K0
「AntV」使用 AntV G2Plot 实现一个复杂的带有四象限自定义标注的统计散点图
AI数据分析:用Kimi根据Excel表格数据绘制多条折线图
工作任务:将Excel文件中的学生姓名和他们的语文、数学、英语成绩绘制成三条折线图,以便于比较不同科目的成绩分布情况。
AIGC部落
2024/06/24
6730
AI数据分析:用Kimi根据Excel表格数据绘制多条折线图
封装antv/g2折线图所遇到的问题及解决办法
最近在项目中做了一个监控模块的功能,大致流程就是后端调用普罗米修斯的接口,获得k8s pod, container,node, workload, cluster的一些监控指标,如cpu使用率,内存使用率,网络出入,磁盘使用,API Server 延迟与请求次数. 图表如下图。
拿我格子衫来
2022/01/24
1.8K0
封装antv/g2折线图所遇到的问题及解决办法
掌握进阶:高级功能、图表定制与地理数据绘制
Matplotlib是一个功能强大的数据可视化库,为数据科学家提供了丰富的工具和功能,可以以直观的方式呈现数据。
一键难忘
2023/12/19
1K0
又再肝3天,整理了65个Matplotlib案例,这能不收藏?
Matplotlib 作为 Python 家族当中最为著名的画图工具,基本的操作还是要掌握的,今天就来分享一波
周萝卜
2021/11/08
2.6K0
使用Matplotlib对数据进行高级可视化(基本图,3D图和小部件)
可视化在当今世界许多领域的结果传播中发挥着重要作用。如果没有适当的可视化,很难揭示结果,理解变量之间的复杂关系并描述数据的趋势。
代码医生工作室
2019/06/21
4K0
使用Matplotlib对数据进行高级可视化(基本图,3D图和小部件)
看这个就够了——用程序实现各类优美的图形大全
大数据时代,数据分析与报告中少不了做图表。matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地行制图。而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中。Matplotlib则比较强:Matlab的语法、python语言、latex的画图质量(还可以使用内嵌的latex引擎绘制的数学公式)。
机器思维研究院
2019/10/22
1.1K0
看这个就够了——用程序实现各类优美的图形大全
G2 基本使用 折线图 柱状图 饼图 基本配置
  1.浏览器引入 <!-- 引入在线资源 --> <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
用户1197315
2019/05/25
5K0
吊打Pyecharts,这个新Python绘图库竟然这么漂亮!
不过研究PyG2Plot还得先从G2开始讲,它是蚂蚁金服开源一个基于图形语法,面向数据分析的统计图表引擎。后来又在其基础上,封装出业务上常用的统计图表库——G2Plot。
小F
2021/03/18
9050
吊打Pyecharts,这个新Python绘图库竟然这么漂亮!
C++ Qt开发:Charts绘制各类图表详解
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍TreeWidget与QCharts的常用方法及灵活运用。
王 瑞
2023/12/25
4K0
AntV G6新版本源码浅析
AntV是蚂蚁金服全新一代数据可视化解决方案,其中G6主要用于解决图可视领域相关的前端可视化问题,其是一个简单、易用、完备的图可视化引擎。本文旨在通过简要分析G6 5.x版本源码来对图可视领域的一些底层引擎进行一个大致了解,同时也为G6引擎的社区共建共享提供一些力量,可以更好的提供插件化功能的编写。
维李设论
2023/06/26
6490
AntV G6新版本源码浅析
精品教学案例 | 利用Matplotlib和Seaborn对苹果股票价格进行可视化分析
本案例适合作为大数据专业数据可视化课程的配套教学案例。通过本案例,能够达到以下教学效果:
数据酷客
2020/05/09
3.4K0
精品教学案例 | 利用Matplotlib和Seaborn对苹果股票价格进行可视化分析
「AntV」@antv/g2plot 特殊 散点图 x轴为category 调整了legend 的marker
下面代码演示了如何使用 antv/g2plot 创建一个散点图,并对其进行基本的样式和布局配置。
拿我格子衫来
2023/08/24
5170
「AntV」@antv/g2plot 特殊 散点图 x轴为category 调整了legend 的marker
笔记:使用python绘制常用的图表
参考链接: Python | 使用openpyxl模块在Excel工作表中绘制图表 1
用户7886150
2020/12/23
1.3K0
你知道怎么用Pandas绘制带交互的可视化图表吗?
之前咱们介绍过Pandas可视化图表的绘制《『数据可视化』一文掌握Pandas可视化图表》,不过它是依托于matplotlib,因此无法进行交互。但其实,在Pandas的0.25.0版本之后,提供了一些其他绘图后端,其中就有我们今天要演示的主角基于Bokeh!
可以叫我才哥
2021/09/24
4.1K0
推荐阅读
相关推荐
「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档