当我用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();

以上代码中,我们通过在 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();

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

因为我的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)是图表的辅助元素,使用颜色、大小、形状区分不同的数据类型,用于图表中数据的筛选。
当我用AI为开发AntV图表插上想象的翅膀后_第1张图片

坐标轴 - Axis

坐标轴指二维空间中统计图表中的轴,它用来定义坐标系中数据在方向和值的映射关系的图表组件
当我用AI为开发AntV图表插上想象的翅膀后_第2张图片

缩略轴 - Slider

当我用AI为开发AntV图表插上想象的翅膀后_第3张图片

悬浮提示 - Tooltip

提示信息 Tooltip,指当鼠标悬停在图表上或者手指点按移动设备的某个数据点时,以交互提示信息的形式展示该点的数据,比如该点的值,数据单位等。
当我用AI为开发AntV图表插上想象的翅膀后_第4张图片

图表标注 - Annotations

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

当我用AI为开发AntV图表插上想象的翅膀后_第5张图片

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

后记

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

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

你可能感兴趣的:(前端技术,前端开发,人工智能,python,数学建模)