docs: 修正 Legend itemFormatter 文档 #2161
Conversation
- 修正 itemFormatter 回调参数描述：从 (value, name) 改为 (value, tickValue) - 更新 API 表格中的参数说明 - 新增使用 itemFormatter 格式化自动生成图例的示例
Summary of ChangesHello @huaxiabuluo, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在提升 F2 图例 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| // 数据（环形图示例） | ||
| const data = [ | ||
| { name: '股票类', percent: 83.59, a: '1' }, | ||
| { name: '债券类', percent: 2.17, a: '1' }, | ||
| { name: '现金类', percent: 14.24, a: '1' }, | ||
| ]; | ||
|
|
||
| // 创建分类名到百分比的查找表 | ||
| const nameToPercentMap = Object.fromEntries( | ||
| data.map(({ name, percent }) => [name, percent]) | ||
| ); | ||
|
|
||
| <Chart | ||
| data={data} | ||
| coord={{ | ||
| type: 'polar', | ||
| transposed: true, | ||
| }} | ||
| > | ||
| <Interval x="a" y="percent" adjust="stack" color="name" /> | ||
| <Legend | ||
| position="bottom" | ||
| itemFormatter={(value, tickValue) => { | ||
| // value: undefined（自动生成的图例没有值） | ||
| // tickValue: 分类名称，如 '股票类'、'债券类' | ||
| // 格式化为百分比形式 | ||
| return nameToPercentMap[tickValue] + '%'; | ||
| }} | ||
| /> | ||
| </Chart> |
There was a problem hiding this comment.
为了让示例代码更简洁，可以省略创建 nameToPercentMap 的步骤，直接在 itemFormatter 函数内部通过 data.find() 来查找对应项。对于示例中的少量数据，这种方式性能上没有问题，而且能让读者更专注于 itemFormatter 本身的使用。这样也使得整个示例的结构更简单。
// 数据（环形图示例）
const data = [
{ name: '股票类', percent: 83.59, a: '1' },
{ name: '债券类', percent: 2.17, a: '1' },
{ name: '现金类', percent: 14.24, a: '1' },
];
<Chart
data={data}
coord={{
type: 'polar',
transposed: true,
}}
>
<Interval x="a" y="percent" adjust="stack" color="name" />
<Legend
position="bottom"
itemFormatter={(value, tickValue) => {
// value: undefined（自动生成的图例没有值）
// tickValue: 分类名称，如 '股票类'、'债券类'
// 格式化为百分比形式
const item = data.find(d => d.name === tickValue);
return item ? `${item.percent}%` : '';
}}
/>
</Chart>There was a problem hiding this comment.
为了让示例代码更简洁，可以省略创建
nameToPercentMap的步骤，直接在itemFormatter函数内部通过data.find()来查找对应项。对于示例中的少量数据，这种方式性能上没有问题，而且能让读者更专注于itemFormatter本身的使用。这样也使得整个示例的结构更简单。// 数据（环形图示例） const data = [ { name: '股票类', percent: 83.59, a: '1' }, { name: '债券类', percent: 2.17, a: '1' }, { name: '现金类', percent: 14.24, a: '1' }, ]; <Chart data={data} coord={{ type: 'polar', transposed: true, }} > <Interval x="a" y="percent" adjust="stack" color="name" /> <Legend position="bottom" itemFormatter={(value, tickValue) => { // value: undefined（自动生成的图例没有值） // tickValue: 分类名称，如 '股票类'、'债券类' // 格式化为百分比形式 const item = data.find(d => d.name === tickValue); return item ? `${item.percent}%` : ''; }} /> </Chart>
nameToPercentMap 是否更加语义化？并且时间复杂度上会有略微提升
Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: |
Checklist
npm testpassesDescription of change