做前端图表时,最耗时的就是找配置参数,比如你在使用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中涉及到的主要组件及其英文和作用:
以上这些组件都是AntV G2Plot中常用的组件,在使用G2Plot进行可视化图表开发时,这些组件都是需要用到的。
在我们了解这些名词时,需要和图表具体看到UI对应起来。下面是AntV G2Plot 的一些图表组件的UI描述
图例(legend)是图表的辅助元素,使用颜色、大小、形状区分不同的数据类型,用于图表中数据的筛选。
坐标轴指二维空间中统计图表中的轴,它用来定义坐标系中数据在方向和值的映射关系的图表组件
提示信息 Tooltip,指当鼠标悬停在图表上或者手指点按移动设备的某个数据点时,以交互提示信息的形式展示该点的数据,比如该点的值,数据单位等。
图形标注,Annotation,作为图表的辅助元素,主要用于在图表上标识额外的标记注解。
在AI的时代,做任何事都不妨都借助一下AI这个工具,提高效率,早点下班回家玩游戏。 当你用AI为开发AntV图表插上想象的翅膀后,你会发现,一天做十几个复杂的图表根本不是问题。
或许有一天让AI 来写图表库,并撰写更新文档,并写出案例,最后在由AI提供给使用者。完成闭环。哈哈哈。。。