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

前言

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

几个案例

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

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

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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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

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

还有一个例子，当我在使用G6画一个图排版时，有一个需求是拖拽一个节点到另一节点上，当这样操作时，使两者联一条线。这是一个很好理解的场景。但如果对于G6不太熟悉的人，可能好扒好一会文档。但如果你问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();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

并且在该案例中，还使用自定义节点，而不是简单使用内置的节点。拿到代码后就拷贝到项目里试一下，然后在简单的调试，有时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
如下配置

 legend: {
  layout: 'horizontal',
  position: 'top',
  marker: {
    style: {
      r: 7,
    },
  },
},
1
2
3
4
5
6
7
8
9

因为我的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提供给使用者。完成闭环。哈哈哈。。。