docs: structure improve (#2160)

* fix: 单词拼写错误

* docs: geometry 组件参数表格化

* docs: tooltip 文档优化

* docs: 补充 tooltip markerBackgroundStyle 参数说明

为 markerBackgroundStyle 参数添加了使用场景说明，明确指出其主要用于柱状图，尤其是分组柱状图。


* docs: 修正 geometry 组件文档问题

- Line: 添加 endView 属性，修正 size callback 类型签名为 (value, record) => string
- Interval: 添加 sizeZoom/showLabel/labelCfg 属性，修正 size callback 类型，补充 labelCfg 适用范围说明（仅 pyramid/funnel）
- Point: 修正 size callback 类型，修正 shape 属性为实际支持的 3 种形状（circle/hollowCircle/rect）
- Area: 修正 size callback 类型
- Candlestick: 修正 color 属性为仅支持对象形式，删除不支持的数组形式说明


* Update site/docs/api/chart/candlestick.zh.md


* docs: 补充 Interval selection 参数说明

- 新增 selectedStyle/unSelectedStyle 详细格式说明
- 补充 record 参数结构文档
- 新增函数形式示例
- 添加常用样式属性表格


* docs: 优化 Axis 组件文档

- 新增 TypeScript 类型定义（AxisProps、StyleProps、Tick、TickLineProps、MarkerStyleProps）
- 添加 JSDoc 格式注释
- Props 表格化，按功能分组，补充默认值
- 新增用法示例（格式化、回调函数、symbol 配置、旋转标签等）
- 修正 LabelCallback/GirdCallback 参数签名（与源码一致）
- 补充默认样式值章节及源码链接
- 精简 Tick 接口为开发者实际使用的属性


* docs(text-guide): 优化 TextGuide 组件文档结构和术语准确性

主要变更：
- 修复 TypeScript 类型定义：style 函数签名从 (record?) 改为 (points: Point[], chart: Chart)
- 新增 TypeScript 类型定义章节，提供准确的类型签名
- 新增 records 特殊值说明（min/max/median/百分比）
- 优化 textAlign 和 textBaseline 描述，使用标准术语"文本对齐"和"文本基线对齐"
- 修正默认值标注：textAlign 默认为 'start'，textBaseline 默认为 'middle'
- 新增典型组合示例和多个实用场景示例
- 新增折线图数据点标注、使用偏移量等场景示例
- 恢复完整动画配置示例


* docs(line-guide): 完善 LineGuide 组件文档

- 新增 TypeScript 类型定义
- Props 表格化，补充默认值
- 新增 records 特殊值说明（min/max/median/%）
- 新增 style 属性说明（对象/函数形式）
- 新增数组偏移特性说明
- 新增 7 个用法示例
- 完善动画属性说明


* docs(tag-guide): 完善 TagGuide 组件文档

- 新增 TypeScript 类型定义和 Props 表格
- 新增 precise、visible、onClick 属性说明
- 新增 background 属性独立章节
- 新增分组柱状图精确定位示例（支持负数动态方向）
- 新增点击事件、条件控制显示示例
- 移除代码内联注释，符合主流文档规范


* docs(image-guide): 完善 ImageGuide 组件文档

- 新增 TypeScript 类型定义
- 完善 Props 表格，补充默认值和类型
- 新增 attrs vs style 说明
- 新增 records 特殊值说明
- 新增 style 属性说明（对象/函数形式）
- 新增 6 个用法示例（基础用法、偏移量、特殊值、style 函数、onClick、多图片组合、动画）


* docs(point-guide): 完善文档内容

主要改进：
- 新增 onClick、visible、precise 属性文档
- 补充 TypeScript 类型定义（Point、RecordItem）
- 新增默认样式值说明
- style 函数参数说明更详细
- 优化用法示例结构


* docs(rect-guide): 完善文档内容

主要改进：
- 新增 onClick、visible、precise 属性文档
- 补充 TypeScript 类型定义（Point 接口）
- 新增 records 特殊值说明和示例
- style 属性章节补充函数签名详细说明
- 新增多个用法示例（点击事件、条件显示、chart 实例）


* docs(chart): 完善 Chart 组件文档

- 新增 TypeScript 类型定义和泛型说明
- 新增 scale 属性详细说明（通用属性、linear/cat/timeCat 度量）
- 新增 coord 属性详细说明（rect/polar 坐标系）
- 新增 style 和 theme 属性说明
- 修正文档链接格式为相对 docs 目录
- 精简代码示例，移除冗余注释
- 补充默认值和已弃用属性说明

* docs: 优化文档内容

- API 文档优化 (Canvas, Legend, Magnifier, PieLabel, ScrollBar, Tooltip 等)
- 教程文档优化 (getting-started, grammar, understanding, coordinate, data, scale 等)
- 组件文档优化
- 框架集成教程优化


* docs(interval): 优化动画配置注释说明

- 将动画配置注释中的 y0 改为 baseline，更清晰表达其含义
- 添加说明：baseline 为 y 轴基线位置，柱子从底部向上展开


* docs(tutorial): 更新数据文档和 CDN 引入路径

- 修正 Candlestick 组件数组格式说明
- 将 changeData API 更新为 update 方法
- 修正 CDN 路径为 index.min.js

---------

Co-authored-by: ian.lxl <[email protected]>

Author: huaxiabuluo

site/docs/api/canvas.zh.md

@@ -5,41 +5,211 @@ redirect_from:
   - /zh/docs/api
 ---
 
-F2 提供的顶层组件，可以理解成画布对象
+Canvas 是 F2 的顶层组件，负责创建画布上下文和管理图表渲染。它是所有 F2 图表的根容器。
+
+## 何时使用
+
+- 需要创建任何 F2 图表
+- 需要控制画布的尺寸、像素比和动画
+- 需要在画布上渲染多个图表或组件
+
+## TypeScript 类型定义
+
+```typescript
+interface CanvasProps {
+  /** 画布上下文 */
+  context: CanvasRenderingContext2D;
+  /** 像素比，默认为 window.devicePixelRatio */
+  pixelRatio?: number;
+  /** 画布宽度 */
+  width?: number;
+  /** 画布高度 */
+  height?: number;
+  /** 是否执行动画，默认为 true */
+  animate?: boolean;
+  /** 插槽内容 */
+  children?: React.ReactNode;
+}
+```
 
 ## Usage
 
 ```jsx
-import { Canvas, Component } from '@antv/f2';
+import { Canvas, Chart, Interval } from '@antv/f2';
+
+const data = [
+  { genre: 'Sports', sold: 5 },
+  { genre: 'Strategy', sold: 10 },
+  { genre: 'Action', sold: 20 },
+  { genre: 'Shooter', sold: 20 },
+  { genre: 'Other', sold: 40 },
+];
+
+<Canvas context={context} pixelRatio={1} width={300} height={300}>
+  <Chart data={data}>
+    <Interval x="genre" y="sold" color="genre" />
+  </Chart>
+</Canvas>
+```
+
+## Props
+
+### 基础配置
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `context` | `CanvasRenderingContext2D` | - | 画布的上下文，必须为标准的 CanvasRenderingContext2D 对象 |
+
+### 尺寸配置
 
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `width` | `number` | - | 画布宽度（像素） |
+| `height` | `number` | - | 画布高度（像素） |
+
+### 渲染配置
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `pixelRatio` | `number` | `window.devicePixelRatio` | 像素比，用于高清屏适配 |
+| `animate` | `boolean` | `true` | 是否执行动画 |
+
+## 用法示例
+
+### 基础用法
+
+```jsx
 <Canvas context={context}>
-  <Component />
-  ...
-</Canvas>;
+  <Chart data={data}>
+    <Interval x="genre" y="sold" color="genre" />
+  </Chart>
+</Canvas>
 ```
 
-## Props
+### 设置像素比
 
-### context: CanvasRenderingContext2D
+```jsx
+<Canvas context={context} pixelRatio={1}>
+  <Chart data={data}>
+    <Interval x="genre" y="sold" color="genre" />
+  </Chart>
+</Canvas>
+```
 
-画布的上下文，需要为 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 对象，F2 使用的是标准的 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 对象接口，只要符合这个接口定义的对象都可以
+### 设置画布尺寸
 
-### pixelRatio: number
+```jsx
+<Canvas context={context} width={300} height={300}>
+  <Chart data={data}>
+    <Interval x="genre" y="sold" color="genre" />
+  </Chart>
+</Canvas>
+```
 
-_可选_
+### 禁用动画
 
-默认为 `window.devicePixelRatio`
+```jsx
+<Canvas context={context} animate={false}>
+  <Chart data={data}>
+    <Interval x="genre" y="sold" color="genre" />
+  </Chart>
+</Canvas>
+```
 
-### width: number
+### 完整配置
 
-_可选_
+```jsx
+<Canvas
+  context={context}
+  pixelRatio={1}
+  width={300}
+  height={300}
+  animate={false}
+>
+  <Chart data={data}>
+    <Interval x="genre" y="sold" color="genre" />
+  </Chart>
+</Canvas>
+```
+
+## 方法
+
+### render()
 
-画布宽度
+渲染画布内容。
 
-### height: number
+```javascript
+const canvas = new Canvas(props)
+await canvas.render()
+```
+
+### resize(width, height)
 
-_可选_
+调整画布尺寸。
 
-### animate: boolean
+```javascript
+await canvas.resize(200, 200)
+```
 
-是否执行动画，默认为 `true`
+## context 属性说明
+
+`context` 属性必须是一个标准的 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D) 对象。以下是获取 context 的常见方式：
+
+### 浏览器环境
+
+```javascript
+const canvas = document.getElementById('container')
+const context = canvas.getContext('2d')
+```
+
+### 小程序环境
+
+```javascript
+const query = wx.createSelectorQuery()
+query.select('#myChart')
+  .fields({ node: true, size: true })
+  .exec((res) => {
+    const canvas = res[0].node
+    const context = canvas.getContext('2d')
+  })
+```
+
+### Node.js 环境
+
+```javascript
+const { createCanvas } = require('canvas')
+const canvas = createCanvas(300, 300)
+const context = canvas.getContext('2d')
+```
+
+## 常见问题
+
+### 画布模糊
+
+在高清屏上，画布可能会显示模糊。解决方案是设置 `pixelRatio`：
+
+```jsx
+<Canvas context={context} pixelRatio={window.devicePixelRatio}>
+  {/* ... */}
+</Canvas>
+```
+
+### 动画卡顿
+
+如果设备性能较差，可以禁用动画：
+
+```jsx
+<Canvas context={context} animate={false}>
+  {/* ... */}
+</Canvas>
+```
+
+### 尺寸不正确
+
+确保设置正确的 `width` 和 `height`：
+
+```jsx
+<Canvas context={context} width={300} height={300}>
+  {/* ... */}
+</Canvas>
+```