Skip to content

Commit 322efba

Browse files
huaxiabuluoian.lxl
andauthored
docs: 修正 Legend itemFormatter 文档 (#2161)
- 修正 itemFormatter 回调参数描述:从 (value, name) 改为 (value, tickValue) - 更新 API 表格中的参数说明 - 新增使用 itemFormatter 格式化自动生成图例的示例 Co-authored-by: ian.lxl <ian.lxl@antgroup.com>
1 parent ebbad36 commit 322efba

File tree

1 file changed

+40
-3
lines changed

1 file changed

+40
-3
lines changed

site/docs/api/chart/legend.zh.md

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ interface LegendProps {
3737
height?: number | string;
3838
/** legend 和图表内容的间距 */
3939
margin?: number | string;
40-
/** 格式化图例每项的文本显示 */
41-
itemFormatter?: (value: any, name: string) => string;
40+
/** 格式化图例每项的值显示 */
41+
itemFormatter?: (value: any, tickValue: any) => string;
4242
/** 图例项列表 */
4343
items?: LegendItem[];
4444
/** 图例样式 */
@@ -114,7 +114,7 @@ const data = [
114114
| 属性 | 类型 | 默认值 | 说明 |
115115
|------|------|--------|------|
116116
| `items` | `LegendItem[]` | - | 自定义图例项列表 |
117-
| `itemFormatter` | `(value, name) => string` | - | 格式化图例每项的文本显示 |
117+
| `itemFormatter` | `(value, tickValue) => string` | - | 格式化图例每项的值显示。第一个参数为图例项的值,第二个参数为原始分类值 |
118118

119119
### 样式配置
120120

@@ -203,6 +203,43 @@ const data = [
203203
/>
204204
```
205205

206+
### 使用 itemFormatter 格式化自动生成的图例
207+
208+
当不传 `items` 属性时,F2 会自动从图表的图形属性映射生成图例。此时可以使用 `itemFormatter` 对图例值进行格式化:
209+
210+
```jsx
211+
// 数据(环形图示例)
212+
const data = [
213+
{ name: '股票类', percent: 83.59, a: '1' },
214+
{ name: '债券类', percent: 2.17, a: '1' },
215+
{ name: '现金类', percent: 14.24, a: '1' },
216+
];
217+
218+
// 创建分类名到百分比的查找表
219+
const nameToPercentMap = Object.fromEntries(
220+
data.map(({ name, percent }) => [name, percent])
221+
);
222+
223+
<Chart
224+
data={data}
225+
coord={{
226+
type: 'polar',
227+
transposed: true,
228+
}}
229+
>
230+
<Interval x="a" y="percent" adjust="stack" color="name" />
231+
<Legend
232+
position="bottom"
233+
itemFormatter={(value, tickValue) => {
234+
// value: undefined(自动生成的图例没有值)
235+
// tickValue: 分类名称,如 '股票类'、'债券类'
236+
// 格式化为百分比形式
237+
return nameToPercentMap[tickValue] + '%';
238+
}}
239+
/>
240+
</Chart>
241+
```
242+
206243
### 自定义图例项
207244

208245
```jsx

0 commit comments

Comments
 (0)