docs: 修正文档 #2149
docs: 修正文档 #2149
Conversation
Summary of ChangesHello @tangying1027, 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! 此拉取请求主要聚焦于优化 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}
There was a problem hiding this comment.
Code Review
本次 PR 主要对 PieLabel 组件的文档进行了大幅重构，使其与测试用例保持一致，并更新了示例代码。同时，也调整了饼图示例的组织方式。
整体来看，文档更新使内容更加精简和聚焦，这是很好的改进。我主要针对文档的可读性和示例代码的一致性提出了一些建议：
- 在
pieLabel.zh.md中，建议将属性列表和常见问题中的标题项加粗，以提升可读性。 - 在
pie/index.zh.md中，一个示例的描述存在误导性，并且两个图表示例都遗漏了radius属性，导致与旧版和详细示例文件不一致。
这些调整将有助于提升文档的质量和准确性。请查看具体的评论。
| - type: 'default' | 'spider' | ||
| 标签布局类型，默认为 'default'。default 使用曲线连接线并在左右分布；spider 为蜘蛛网式放射布局。 | ||
|
|
||
| ```jsx | ||
| records={[ | ||
| { name: '餐饮', value: 20 }, | ||
| { name: '交通', value: 15 } | ||
| ]} | ||
| ``` | ||
| - anchorOffset: string | number | ||
| 标签线锚点偏移，默认 '10px'。 | ||
|
|
||
| ### triggerOn: 'click' | 'press' | ||
| - inflectionOffset: string | number | ||
| 标签线拐点偏移，默认 '30px'。 | ||
|
|
||
| 触发的事件类型，默认为 `'click'` | ||
| - sidePadding: string | number | ||
| 文本距离画布边缘的最小距离，默认 '15px'。 | ||
|
|
||
| ### onClick: function | ||
| - label1: function | ||
| 第一行标签配置，接收数据项，返回文本及样式配置。例如：label1={(d) => ({ text: d.memo })} | ||
|
|
||
| 标签点击事件回调函数，接收事件对象作为参数 | ||
| - label2: function | ||
| 第二行标签配置，接收数据项，返回文本及样式配置。例如：label2={(d) => ({ text: '$' + d.amount.toFixed(2) })} | ||
|
|
||
| ```jsx | ||
| onClick={(data) => { | ||
| console.log('点击了标签:', data); | ||
| }} | ||
| ``` | ||
| - records: any[] | ||
| 指定只显示的记录数组，可用于筛选需要显示标签的数据项。 | ||
|
|
||
| - triggerOn: 'click' | 'press' | ||
| 触发事件类型，默认 'click'。 | ||
|
|
||
| ### adjustRatio: number | ||
| - onClick: function | ||
| 标签点击回调，回调参数包含 origin 字段（原始数据项）。 | ||
|
|
||
| 调整高度的阈值比例，默认为 `1` | ||
| - adjustRatio: number | ||
| 调整布局高度的阈值比例，默认 1。 |
There was a problem hiding this comment.
为了提高属性列表的可读性和可扫描性，建议将每个属性的名称加粗。这样用户可以更快地找到他们感兴趣的属性。
- **type**: 'default' | 'spider'
标签布局类型，默认为 'default'。default 使用曲线连接线并在左右分布；spider 为蜘蛛网式放射布局。
- **anchorOffset**: string | number
标签线锚点偏移，默认 '10px'。
- **inflectionOffset**: string | number
标签线拐点偏移，默认 '30px'。
- **sidePadding**: string | number
文本距离画布边缘的最小距离，默认 '15px'。
- **label1**: function
第一行标签配置，接收数据项，返回文本及样式配置。例如：label1={(d) => ({ text: d.memo })}
- **label2**: function
第二行标签配置，接收数据项，返回文本及样式配置。例如：label2={(d) => ({ text: '$' + d.amount.toFixed(2) })}
- **records**: any[]
指定只显示的记录数组，可用于筛选需要显示标签的数据项。
- **triggerOn**: 'click' | 'press'
触发事件类型，默认 'click'。
- **onClick**: function
标签点击回调，回调参数包含 origin 字段（原始数据项）。
- **adjustRatio**: number
调整布局高度的阈值比例，默认 1。| - 标签显示不全或重叠： | ||
| 调整 sidePadding、anchorOffset、inflectionOffset，或使用 type="spider"；也可通过 records 筛选显示的标签。 | ||
|
|
||
| ### 3. 点击事件不响应 | ||
| - 标签位置不理想： | ||
| 检查 coord（极坐标）及 radius/innerRadius 是否给足空间，调整偏移量或布局类型。 | ||
|
|
||
| - 确认 `triggerOn` 属性设置正确（'click' 或 'press'） | ||
| - 检查是否有其他元素遮挡了标签 | ||
| - 验证 `onClick` 回调函数是否正确绑定 | ||
| - 点击事件不响应： | ||
| 检查 triggerOn 是否设置正确，确认没有遮挡元素，并确保回调绑定正确（回调接收事件对象，原始数据在 event.origin 中）。 |
There was a problem hiding this comment.
为了使常见问题部分更易于阅读，建议将问题部分加粗，以将其与答案区分开来。
| - 标签显示不全或重叠： | |
| 调整 sidePadding、anchorOffset、inflectionOffset，或使用 type="spider"；也可通过 records 筛选显示的标签。 | |
| ### 3. 点击事件不响应 | |
| - 标签位置不理想： | |
| 检查 coord（极坐标）及 radius/innerRadius 是否给足空间，调整偏移量或布局类型。 | |
| - 确认 `triggerOn` 属性设置正确（'click' 或 'press'） | |
| - 检查是否有其他元素遮挡了标签 | |
| - 验证 `onClick` 回调函数是否正确绑定 | |
| - 点击事件不响应： | |
| 检查 triggerOn 是否设置正确，确认没有遮挡元素，并确保回调绑定正确（回调接收事件对象，原始数据在 event.origin 中）。 | |
| - **标签显示不全或重叠**： | |
| 调整 sidePadding、anchorOffset、inflectionOffset，或使用 type="spider"；也可通过 records 筛选显示的标签。 | |
| - **标签位置不理想**： | |
| 检查 coord（极坐标）及 radius/innerRadius 是否给足空间，调整偏移量或布局类型。 | |
| - **点击事件不响应**： | |
| 检查 triggerOn 是否设置正确，确认没有遮挡元素，并确保回调绑定正确（回调接收事件对象，原始数据在 event.origin 中）。 |
| <Chart | ||
| data={data} | ||
| coord={{ | ||
| transposed: true, | ||
| type: 'polar', | ||
| }} | ||
| > |
There was a problem hiding this comment.
在将 <Coord> 组件转换为 coord 属性的重构中，radius={0.85} 属性被遗漏了。为了与之前的版本保持视觉一致性，并提供一个更明确的示例，建议将其添加回 coord 对象中。
| <Chart | |
| data={data} | |
| coord={{ | |
| transposed: true, | |
| type: 'polar', | |
| }} | |
| > | |
| <Chart | |
| data={data} | |
| coord={{ | |
| transposed: true, | |
| type: 'polar', | |
| radius: 0.85, | |
| }} | |
| > |
| ); | ||
| ``` | ||
|
|
||
| - [可选中饼图](./demo/selection.jsx)：支持点击选中扇形的交互功能。下面示例展示如何在饼图中实现点击选中效果，并配合 PieLabel 调整选中项样式（示例采用 React 风格的状态管理）： |
There was a problem hiding this comment.
描述中提到的“（示例采用 React 风格的状态管理）”具有误导性。所提供的代码示例并未使用任何 React 状态管理（如 useState），而是使用了 F2 内置的 selection 功能。建议删除这部分描述，以避免混淆。
| - [可选中饼图](./demo/selection.jsx)：支持点击选中扇形的交互功能。下面示例展示如何在饼图中实现点击选中效果，并配合 PieLabel 调整选中项样式（示例采用 React 风格的状态管理）： | |
| - [可选中饼图](./demo/selection.jsx)：支持点击选中扇形的交互功能。下面示例展示如何在饼图中实现点击选中效果，并配合 PieLabel 调整选中项样式： |
| ]; | ||
| const { props } = ( | ||
| <Canvas context={context}> | ||
| <Chart data={data} coord={{ transposed: true, type: 'polar' }}> |
There was a problem hiding this comment.
此处的示例代码缺少 radius 属性，而链接到的示例文件 ./demo/selection.jsx 中设置了 radius: 0.6。为了保持文档与示例代码的一致性，建议在 coord 对象中添加 radius: 0.6。
| <Chart data={data} coord={{ transposed: true, type: 'polar' }}> | |
| <Chart data={data} coord={{ transposed: true, type: 'polar', radius: 0.6 }}> |
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