Skip to content

Commit 1e8cf11

Browse files
authored
docs: update data.transform.sort (#6728)
1 parent 84316ec commit 1e8cf11

File tree

1 file changed

+23
-12
lines changed

1 file changed

+23
-12
lines changed

site/docs/manual/core/data/sort.zh.md

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,34 @@ title: sort
33
order: 2
44
---
55

6-
对数据按照指定的 callback 进行排序。类似于 [Array.prototypo.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
6+
## 概述
77

8-
## 开始使用
8+
对数据按照指定的 callback 进行排序。类似于 [Array.prototypo.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort),G2 实现 `sort` 的时候有两个改动点:
9+
10+
1. JavaScript 中的 sort 函数是会修改原始数组的,在 G2 中改成了 immutable 的写法,防止修改原数组。
11+
2. 如果传入的数据不是数组,那么不会对数据进行任何处理,比如在绘制一些关系图的时候,`data` 一般是 `object` 类型,这个时候,sort 功能失效,返回原数据。
12+
13+
## 使用方式
14+
15+
`sort` 用于对数据排序,例如在饼图、排行榜条形图中,需要按照数据从大到小排列,便于更好的看清楚 TOP N 的数据项。
916

1017
```ts
1118
const data = [
1219
{ a: 1, b: 2, c: 3 },
1320
{ a: 4, b: 5, c: 6 },
1421
];
1522

16-
chart.data({
17-
type: 'inline',
18-
value: data,
19-
transform: [
20-
{
21-
type: 'sort',
22-
callback: (a, b) => b.a - a.a,
23-
},
24-
],
23+
chart.options({
24+
data: {
25+
type: 'inline',
26+
value: data,
27+
transform: [
28+
{
29+
type: 'sort',
30+
callback: (a, b) => b.a - a.a,
31+
},
32+
],
33+
}
2534
});
2635
```
2736

@@ -34,7 +43,9 @@ chart.data({
3443
];
3544
```
3645

37-
## 选项
46+
注意:`sort` 数据变换是在 `data.transform` 中的,在 data 配置简写的情况下是无法配置 transform 的。
47+
48+
## 配置项
3849

3950
| 属性 | 描述 | 类型 | 默认值 |
4051
| -------- | -------------------------------------------------- | ---------------------------- | ------------- |

0 commit comments

Comments
 (0)