Skip to content

Commit 9b43ac4

Browse files
authored
docs: 完善 Legend itemFormatter 文档 (#2162)
* docs: 完善 Legend itemFormatter 文档
1 parent 322efba commit 9b43ac4

File tree

1 file changed

+5
-3
lines changed

1 file changed

+5
-3
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ const data = [
114114
| 属性 | 类型 | 默认值 | 说明 |
115115
|------|------|--------|------|
116116
| `items` | `LegendItem[]` | - | 自定义图例项列表 |
117-
| `itemFormatter` | `(value, tickValue) => string` | - | 格式化图例每项的值显示。第一个参数为图例项的值,第二个参数为原始分类值 |
117+
| `itemFormatter` | `(value, tickValue) => string` | - | 格式化图例每项的值显示。第一个参数为图例项的值,第二个参数为原始分类值。注意:`name` 会自动显示,itemFormatter 返回值会作为图例的值(value)进行展示。 |
118118

119119
### 样式配置
120120

@@ -125,7 +125,7 @@ const data = [
125125
| `itemStyle` | `GroupStyleProps` | - | 图例项样式 |
126126
| `nameStyle` | `TextStyleProps` | - | 图例名称样式 |
127127
| `valueStyle` | `TextStyleProps` | - | 图例值样式 |
128-
| `valuePrefix` | `string` | - | value 展示文案的前缀 |
128+
| `valuePrefix` | `string` | `': '` | 用于连接图例名和图例值的字符串。最终渲染格式为 `${name}${valuePrefix}${value}` |
129129

130130
### 交互配置
131131

@@ -233,13 +233,15 @@ const nameToPercentMap = Object.fromEntries(
233233
itemFormatter={(value, tickValue) => {
234234
// value: undefined(自动生成的图例没有值)
235235
// tickValue: 分类名称,如 '股票类'、'债券类'
236-
// 格式化为百分比形式
236+
// 返回值会显示在 name 之后,最终格式:股票类: 83.59%
237237
return nameToPercentMap[tickValue] + '%';
238238
}}
239239
/>
240240
</Chart>
241241
```
242242

243+
> **注意**`name` 会自动显示。`itemFormatter` 的返回值会作为图例项的值,并通过 `valuePrefix` (默认为 `': '`) 连接在 `name` 之后。因此 `itemFormatter` 只需返回格式化后的值部分,无需包含 `name`
244+
243245
### 自定义图例项
244246

245247
```jsx

0 commit comments

Comments
 (0)