From dc96a6647834bfcc04fcbae3d337001feb3a8b12 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Mon, 30 Sep 2024 17:43:36 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=E9=93=BE=E6=8E=A5?= =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A0=87=E8=AE=B0?= =?UTF-8?q?=E6=96=87=E6=A1=A3=20close=20#2914?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../advanced/interaction/link-jump.zh.md | 20 ++++++++++++++----- .../advanced/demo/custom-link-jump.ts | 6 +++--- .../advanced/demo/table-link-jump.ts | 4 ++++ 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/s2-site/docs/manual/advanced/interaction/link-jump.zh.md b/s2-site/docs/manual/advanced/interaction/link-jump.zh.md index 0eb4eb1713..17a7727db4 100644 --- a/s2-site/docs/manual/advanced/interaction/link-jump.zh.md +++ b/s2-site/docs/manual/advanced/interaction/link-jump.zh.md @@ -41,7 +41,7 @@ s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => { ## 透视表 -支持将行头 `rows`, 列头 `columns`, 数值 `values` 标记为链接样式。 +支持将行头 `rows`, 列头 `columns`, 数值 `values` 标记为链接样式。[查看示例](/examples/interaction/advanced/#pivot-link-jump) ```ts | pure import { S2Event } from '@antv/s2' @@ -93,7 +93,7 @@ const s2Options = { ## 明细表 -支持将列头 `columns` 和对应的数值标记为链接样式。 +支持将列头 `columns` 和对应的数值标记为链接样式。[查看示例](/examples/interaction/advanced/#table-link-jump) :::warning{title="注意"} 由于明细表单列头的特殊性，为和透视表保持一致，同时兼容多列头的场景，明细表的标记会对列头和数值**同时生效**. @@ -134,20 +134,30 @@ await s2.render(); ## 自定义标记 -除了配置行头/列头/数值字段外，支持根据单元格信息自定义标记，满足更多使用场景。 +除了配置 `行头/列头/数值` 字段外，支持根据单元格信息自定义标记，满足更多使用场景。[查看示例](/examples/interaction/advanced/#custom-link-jump) + +:::warning{title="注意"} +数值和表头的单元格数据结构不同，请注意区分，`meta` 对应关系如下： + +1. 数值单元格对应 [ViewMeta](/api/general/s2-options#viewmeta) +2. 表头单元格对应 [Node](/api/basic-class/node) + +::: ```ts +import { Node } from '@antv/s2' + const s2Options = { width: 600, height: 600, interaction: { linkFields: (meta) => { // 不标记列头 - if (meta?.belongsCell?.cellType === 'colCell') { + if (meta instanceof Node) { return false; } - // 根据指标值动态标记 + // 根据数值动态标记 return meta?.fieldValue === '浙江' || meta?.fieldValue >= 10; } } diff --git a/s2-site/examples/interaction/advanced/demo/custom-link-jump.ts b/s2-site/examples/interaction/advanced/demo/custom-link-jump.ts index f24fc326b3..0b3f1cf516 100644 --- a/s2-site/examples/interaction/advanced/demo/custom-link-jump.ts +++ b/s2-site/examples/interaction/advanced/demo/custom-link-jump.ts @@ -1,4 +1,4 @@ -import { S2DataConfig, S2Event, S2Options, TableSheet } from '@antv/s2'; +import { Node, S2DataConfig, S2Event, S2Options, TableSheet } from '@antv/s2'; fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json') .then((res) => res.json()) @@ -39,11 +39,11 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json') interaction: { linkFields: (meta) => { // 不标记列头 - if (meta?.belongsCell?.cellType === 'colCell') { + if (meta instanceof Node) { return false; } - // 根据指标值动态标记 + // 根据数值动态标记 return meta?.fieldValue === '浙江' || meta?.fieldValue >= 10; }, }, diff --git a/s2-site/examples/interaction/advanced/demo/table-link-jump.ts b/s2-site/examples/interaction/advanced/demo/table-link-jump.ts index 9886a1015b..57dcc6d81c 100644 --- a/s2-site/examples/interaction/advanced/demo/table-link-jump.ts +++ b/s2-site/examples/interaction/advanced/demo/table-link-jump.ts @@ -37,6 +37,10 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json') width: 600, height: 480, interaction: { + /** + * 由于明细表单列头的特殊性，为和透视表保持一致，同时兼容多列头的场景，明细表的标记会对列头和数值**同时生效**. + * 如希望标记只对数值生效，可以参考自定义标记示例: https://s2.antv.antgroup.com/examples/interaction/advanced/#custom-link-jump + */ linkFields: ['type', 'province', 'price'], }, };