G2Plot 最初诞生于阿里经济体 BI 产品真实场景的业务诉求,基于 G2 图形语法,一图一做扩展常见的业务图表。
在 G2Plot 2.3.14 版本,水波图提供了 shape 的配置,允许用户自定义水波图形状,并且内置了多种图形形状,如下,
圆形 | 菱形(钻石) | 矩形 | 水滴型 |
虽然内置了若干形状,但使用者的需求是变幻无穷的。因此我们也开放了自定义 shape 的方式:只需要传入一个构建 Path 的回调函数即可,方便开发者可以按照自己的诉求来定制水波图形状,下面是一些自定义形状的水波图。
本篇文章会先简单介绍下这个自定义 shape 的 API 使用,然后再从较为简单的五角星 ☆ 出发,介绍下如何基于 G2Plot 水波图定制星星水波图。
更多详细内容可以查看 ☞ :1、水波图 图表指引,2、水波图 API 文档
shape API 简单介绍
- shape 属性接受一个回调函数,返回执行类型的 Path 绘图指令(同 SVG path 相近,详细可以查看 G | Path)
- 回调参数为中心点的 x、y,容器宽度 width 以及容器高度 height。如图 1 所示:
图 1
下面是文档中的一个示例代码,我们根据注释稍微解释一下:
function shape(x: number, y: number, width: number, height: number) {
const h = height / 2;
const w = width / 2;
return [
// 移动到画布左上角 (x - w, y - h)
['M', x - w, y - h],
// 连接至画布右上角 (x + w, y - h)
['L', x + w, y - h],
// 连接画布右下角 (x + w, y + h)
['L', x + w, y + h],
// 连接画布左下角 (x - w, y + h)
['L', x - w, y + h],
// 使用“闭合路径命令” Z 进行闭合
['Z'],
];
}
预览效果如图 2: 图 2
绘制 Star 水波图
默认大家有一定的数学基础
首先,我们需要获取各个顶点的坐标,然后使用 moveTo (M 命令)和 lineTo(L 命令)把五角星的路径计算出来。 图 3
看图 3 分析可知:O 点对应的是 (x, y) , A 点坐标 (Math.cos(18 * Math.PI / 180) * w + x, -Math.sin(18 * Math.PI / 180) * w + y)
,再以此计算出各个顶点的坐标即可。完整代码如下:
shape: (x, y, width, height) => {
const path = [];
const w = Math.min(width, height) / 2;
for (let i = 0; i < 5; i++) {
path.push([
i === 0 ? 'M' : 'L',
(Math.cos(((18 + i * 72) * Math.PI) / 180) * w) + x,
(-Math.sin(((18 + i * 72) * Math.PI) / 180) * w) + y,
]);
path.push([
'L',
(Math.cos(((54 + i * 72) * Math.PI) / 180) * w) / 2 + x,
(-Math.sin(((54 + i * 72) * Math.PI) / 180) * w) / 2 + y,
]);
}
path.push(['Z']);
return path;
}
好了,今天的介绍就到这里了。整体不复杂 (╹▽╹)。 期待大家发挥自己的想象力,制造更多有趣的水波图 ❤ ❤ ❤
更多
文章中的一些链接汇总