Skip to content

Commit f088a7b

Browse files
lijinke666lijinke666
authored
docs: 新增获取单元格数据文档 (#1117)
1 parent 65739aa commit f088a7b

File tree

6 files changed

+120
-16
lines changed

6 files changed

+120
-16
lines changed

‎s2-site/docs/manual/advanced/get-cell-data.en.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: Get Cell Data
3+
order: 9
4+
---
5+
6+
`markdown:docs/manual/advanced/get-cell-data.zh.md`

‎s2-site/docs/manual/advanced/get-cell-data.zh.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: 获取单元格数据
3+
order: 9
4+
---
5+
6+
> 请确保已经阅读过 基础教程，数据流处理，布局等章节
7+
8+
在实际的业务场景中，往往会遇到一些需要获取**单元格数据**的场景，常见的比如：
9+
10+
- 点击某一个行头/列头单元格，获取**当前行/列**所有数据
11+
- 监听鼠标 `click` `hover` 事件 获取当前对应单元格数据
12+
- 自定义 `tooltip` 内容，需要根据当前单元格信息来渲染不同的操作项，或者显示不同的提示信息
13+
14+
`S2` 的表格由 `canvas` 绘制，所以只会有一个 `dom` 元素，所有单元格对应的一组数据结构，里面存储了每个单元格的坐标，文本信息，交互状态等 [信息](/zh/docs/api/basic-class/base-cell)
15+
16+
`S2` 提供了一系列获取数据的 [API](/zh/docs/api/basic-class/spreadsheet), 下面介绍一些常用的场景
17+
18+
### 监听点击事件获取对应单元格
19+
20+
以点击行头单元格为例
21+
22+
```ts
23+
s2.on(S2Event.ROW_CELL_CLICK, (event) => {
24+
// 根据 event.target 拿到表格内部当前坐标对应的单元格
25+
const cell = s2.getCell(event.target)
26+
// 获取当前单元格对应的信息
27+
const meta = cell.getMeta()
28+
})
29+
```
30+
31+
<img src="https://gw.alipayobjects.com/zos/antfincdn/%24a%24HyJBIV/79abf381-a58a-460d-ad75-096c5484c780.png" width="600" alt="preview"/>
32+
33+
当然，任何能拿到 `event` 的地方你都可以通过这种方式拿到数据
34+
35+
### 获取选中的单元格
36+
37+
在单选，多选，刷选等场景，在选中后会透出 `S2Event.GLOBAL_SELECTED` 事件，可以获取到选中的单元格
38+
39+
```ts
40+
s2.on(S2Event.GLOBAL_SELECTED, (cells) => {
41+
console.log('选中的单元格', cells)
42+
})
43+
```
44+
45+
<img src="https://gw.alipayobjects.com/zos/antfincdn/GO7xii%26LQ/13b44f81-271c-4771-b7b3-45789761eab2.png" width="600" alt="preview"/>
46+
47+
也可以调用 [交互方法](/zh/docs/manual/advanced/interaction/basic#%E8%B0%83%E7%94%A8%E4%BA%A4%E4%BA%92%E6%96%B9%E6%B3%95), 手动的获取
48+
49+
```ts
50+
s2.interaction.getAllCells() // 获取所有单元格
51+
s2.interaction.getActiveCells() // 获取所有激活的单元格
52+
s2.interaction.isSelectedState() // 是否是选中状态
53+
```
54+
55+
### 获取行/列数据
56+
57+
表格初始化时，会将用户声明的数据配置 (s2DataConfig) 转换成内部所需要的数据集 (dataSet), 具体请查看 [数据流处理](/zh/docs/manual/advanced/data-process/pivot)
58+
59+
数据集的 [实例](/zh/docs/api/basic-class/base-data-set) 挂载在 `s2.dataSet` 命名空间下，可访问它获取你需要的：
60+
61+
- 原生数据
62+
- 汇总数据
63+
- 多维索引数据
64+
- 格式化后的字段名，字段描述
65+
- 获取维值
66+
- 单个单元格数据
67+
- 多个单元格数据
68+
69+
还是以点击行头单元格为例：
70+
71+
```ts
72+
s2.on(S2Event.ROW_CELL_CLICK, (event) => {
73+
// 首先拿到单元格当前信息
74+
const cell = s2.getCell(event.target)
75+
const meta = cell.getMeta()
76+
77+
// 获取当前行数据
78+
const rowData = s2.dataSet.getMultiData(meta.query)
79+
// 获取当前行头单元格数据：
80+
const rowCellData = s2.dataSet.getCellData({ query: meta.query })
81+
// 获取当前行头维值
82+
const dimensionValues = s2.dataSet.getDimensionValues(meta.field)
83+
84+
console.log('当前行数据：', rowData)
85+
console.log('当前行头单元格数据：', rowCellData)
86+
console.log('当前行头维值：', dimensionValues)
87+
})
88+
89+
```
90+
91+
<img src="https://gw.alipayobjects.com/zos/antfincdn/5KTuqpLdy/cf26a185-2a1d-41f3-9caf-aa9343529cd5.png" width="600" alt="preview"/>

‎s2-site/docs/manual/advanced/performance.zh.md‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ order: 6
99

1010
`S2` 可以用于实现明细表，也可以实现透视表，还可以实现趋势分析表等。
1111

12-
为了更好的理解本文，在阅读本文前，希望你能熟悉 `S2` 的使用，对[基本概念](/zh/docs/manual/basic/base-concept)有初步认知。
12+
为了更好的理解本文，在阅读本文前，希望你能熟悉 `S2` 的使用，对 [基本概念](/zh/docs/manual/basic/base-concept) 有初步认知。
1313

1414
## 性能解读
1515

@@ -34,23 +34,23 @@ order: 6
3434
```ts
3535
// Meta
3636
const rowsMeta: PivotMeta = {
37-
东北: {
37+
东北：{
3838
id: 0,
3939
children: {
40-
黑龙江: {
40+
黑龙江：{
4141
id: 0,
4242
children: {},
4343
},
44-
辽宁: {
44+
辽宁：{
4545
id: 1,
4646
children: {},
4747
},
4848
},
4949
},
50-
华北: {
50+
华北：{
5151
id: 1,
5252
children: {
53-
山西: {
53+
山西：{
5454
id: 0,
5555
children: {},
5656
},
@@ -61,11 +61,11 @@ const rowsMeta: PivotMeta = {
6161

6262
通过这样的数据结构，我们就实现了表格行列树结构的前端表达。「形」有了后，我们就需要「魂」，也就是数据。
6363

64-
在 `S2` 中，`Pivot` 作为数据训练和查询的底层透视存在i，目的是将原始数据（一维）转为多维数组。这个多维数组是将行维度、列维度的 `path` 来组装的（底层是通过 `loadash.set` 实现)，举个例子：
64+
在 `S2` 中，`Pivot` 作为数据训练和查询的底层透视存在 i，目的是将原始数据（一维）转为多维数组。这个多维数组是将行维度、列维度的 `path` 来组装的（底层是通过 `loadash.set` 实现），举个例子：
6565

6666
<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*_fRFSYS-Vi8AAAAAAAAAAAAAARQnAQ" width="700" alt="preview" />
6767

68-
上图中，单元格的行坐标为：浙江省[0] - 宁波市[0]，列坐标为：家具[0]-沙发[1]。因此单元格在多维数组中坐标为 [0, 0, 0, 1]，查询数据时从行列的 `Hierarchy` 层级结构中获取对应的查询路径，即可拿到对应的数据。因此在 `S2` 中查询数据不是循环遍历底层数据，而是生成查询数组路径与层级结构对比，从而获取数据。
68+
上图中，单元格的行坐标为：浙江省 [0] - 宁波市 [0]，列坐标为：家具 [0]-沙发 [1]。因此单元格在多维数组中坐标为 [0, 0, 0, 1]，查询数据时从行列的 `Hierarchy` 层级结构中获取对应的查询路径，即可拿到对应的数据。因此在 `S2` 中查询数据不是循环遍历底层数据，而是生成查询数组路径与层级结构对比，从而获取数据。
6969

7070
```ts
7171
// 原始数据通过转换
@@ -82,12 +82,12 @@ const data = [
8282
[ // 华北
8383
[ // 山西
8484
[undefined, undefined, { order_amt: 651.45, type: '办公用品', sub_type: '容器，箱子' }],
85-
],
86-
],
85+
],
86+
],
8787
];
8888
```
8989

90-
这样，通过遍历一次原始数据，生成 `Meta` 和转换后的数组数据，查询数据时间复杂度是 O(n)。此方案的优点是性能优异，理论上最快方案，时间复杂度 O(n*m)是线性的根据明细数据的行数*列数决定。
90+
这样，通过遍历一次原始数据，生成 `Meta` 和转换后的数组数据，查询数据时间复杂度是 O(n)。此方案的优点是性能优异，理论上最快方案，时间复杂度 O(n*m) 是线性的根据明细数据的行数*列数决定。
9191

9292
### 按需渲染
9393

@@ -137,6 +137,11 @@ public getFieldMeta = memoize((field: string, meta?: Meta[]): Meta => {
137137

138138
### 表框架渲染时间对比
139139

140+
查看 `100w` 条数据实际性能表现：
141+
142+
- [透视表](/zh/examples/case/performance-compare#pivot)
143+
- [明细表](/zh/examples/case/performance-compare#table)
144+
140145
<img src="https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*NWRaS6ifrJYAAAAAAAAAAAAAARQnAQ" width="900" alt="preview" />
141146

142147
> 备注：

‎s2-site/docs/manual/basic/analysis/export.zh.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ const s2options = {
2828
`@antv/s2-react` 组件层提供了导出功能
2929

3030
```ts
31+
import { SheetComponent } from '@antv/s2-react'
32+
3133
<SheetComponent
3234
dataCfg={dataCfg}
3335
options={options}

‎s2-site/docs/manual/basic/theme.zh.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const s2 = new PivotSheet(container, s2DataConfig, s2Options);
6868

6969
const customTheme = {
7070
background: {
71-
color: HEADER_BACK_COLOR,
71+
color: '#353c59',
7272
}
7373
};
7474

‎s2-site/examples/case/performance-compare/demo/meta.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,16 @@
1515
{
1616
"filename": "pivot.tsx",
1717
"title": {
18-
"zh": "100w数据性能表现-透视表",
19-
"en": "Performance-Pivot"
18+
"zh": "100w条数据性能表现-透视表",
19+
"en": "Performance Pivot Sheet"
2020
},
2121
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/aQQMy0LpzT/scroll-pivot.gif"
2222
},
2323
{
2424
"filename": "table.tsx",
2525
"title": {
26-
"zh": "100w数据性能表现-明细表",
27-
"en": "Performance-Table"
26+
"zh": "100w条数据性能表现-明细表",
27+
"en": "Performance Table Sheet"
2828
},
2929
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vkrof17e%24O/scroll-table.gif"
3030
}

0 commit comments

Comments
 (0)