Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: 图表组件文档 #2268

Merged
merged 5 commits into from
Jan 26, 2021
Merged

docs: 图表组件文档 #2268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8eb6c69
docs(demo): demo 默认不指定容器大小
visiky Jan 25, 2021
773d76b
docs(components): 补充图表组件文档
visiky Jan 25, 2021
1c3e40c
docs(components): 调整滚动条 & 缩略轴文档顺序
visiky Jan 25, 2021
7e451b8
docs: 英文标题
visiky Jan 25, 2021
3deae60
fix: 修复 lint 问题
visiky Jan 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion __tests__/unit/core/index-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,9 @@ describe('core', () => {
class CustomPlot extends Plot<CustomPlotOptions> {
type: 'custom';
getSchemaAdaptor() {
return () => {};
return () => {
// do somethings
};
}
}
const plot = new CustomPlot(createDiv(), {});
Expand Down
44 changes: 43 additions & 1 deletion docs/api/components/annotations.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,48 @@
---
title: Annotations
title: Annotation
order: 4
---

`markdown:docs/styles/component.md`

Annotation，as an auxiliary element of the chart, it is mainly used to identify additional mark notes on the plot.

![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*B0q9R7s1v3sAAAAAAAAAAABkARQnAQ)

Go to [AntV 设计 | 标注 Annotation](https://www.yuque.com/mo-college/vis-design/ybatti) of 墨者学院 to learn more about **Design guide**

#### Usage

`annotations` is an array type, and multiple annotations can be set.

```ts
annotations: [
{
type: 'text',
position: ['median', 'median'],
content: 'Content',
style: {
fill: 'red',
},
},
];
```

#### Types of annotations

G2Plot 提供了以下图形标注类型：

| **Type** | **Description** | **Usage** |
| :----------: | :-------------------------------------------------: | :-----------------------------------: |
| arc | 辅助弧线，只在**极坐标系**下生效。常用于绘制仪表盘。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*SccqSpP2hG4AAAAAAAAAAABkARQnAQ) | `{ type: 'arc' }`  |
| image | 辅助图片，在图表上添加辅助图片。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*KYTbSbvRKHQAAAAAAAAAAABkARQnAQ) | `{ type: 'image' }` |
| line | 辅助线（可带文本），例如表示平均值或者预期分布的直线。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*hd7PQ4z_JS8AAAAAAAAAAABkARQnAQ) | `{ type: 'line' }` |
| text | 辅助文本，指定位置添加文本说明。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*PdjoSrdEhnwAAAAAAAAAAABkARQnAQ) | `{ type: 'text' }` |
| region | 辅助框，框选一段图区，设置背景、边框等。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*VEOZR5rXpqMAAAAAAAAAAABkARQnAQ) | `{ type: 'region' }` |
| regionFilter | 区域着色，将图表中位于矩形选区中的图形元素提取出来，重新着色。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*cp2jSJfeJDYAAAAAAAAAAABkARQnAQ) | `{ type: 'regionFilter' }` |
| dataMarker | 特殊数据点标注，多用于折线图和面积图。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*h-e2TLivyI4AAAAAAAAAAABkARQnAQ) | `{ type: 'dataMarker' }` |
| dataRegion | 特殊数据区间标注，多用于折线图和面积图。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*NHbSRKacUesAAAAAAAAAAABkARQnAQ) | `{ type: 'dataRegion' }` |

#### Configurations（_AnnotationCfg_）

`markdown:docs/common/annotations.en.md`
43 changes: 43 additions & 0 deletions docs/api/components/annotations.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,47 @@ title: 图表标注
order: 4
---

`markdown:docs/styles/component.md`

图形标注，Annotation，作为图表的辅助元素，主要用于在图表上标识额外的标记注解。

![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*B0q9R7s1v3sAAAAAAAAAAABkARQnAQ)

前往墨者学院 [AntV 设计 | 标注 Annotation](https://www.yuque.com/mo-college/vis-design/ybatti) 查看**设计指引**。

#### 使用方式

标注是数组类型，可以设置多个。

```ts
annotations: [
{
type: 'text',
position: ['median', 'median'],
content: '辅助文本',
style: {
fill: 'red',
},
},
];
```

#### 图表标注类型

G2Plot 提供了以下图形标注类型：

| **类型** | **描述** | **用法** |
| :----------: | :-------------------------------------------------: | :-----------------------------------: |
| arc | 辅助弧线，只在**极坐标系**下生效。常用于绘制仪表盘。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*SccqSpP2hG4AAAAAAAAAAABkARQnAQ) | `{ type: 'arc' }`  |
| image | 辅助图片，在图表上添加辅助图片。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*KYTbSbvRKHQAAAAAAAAAAABkARQnAQ) | `{ type: 'image' }` |
| line | 辅助线（可带文本），例如表示平均值或者预期分布的直线。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*hd7PQ4z_JS8AAAAAAAAAAABkARQnAQ) | `{ type: 'line' }` |
| text | 辅助文本，指定位置添加文本说明。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*PdjoSrdEhnwAAAAAAAAAAABkARQnAQ) | `{ type: 'text' }` |
| region | 辅助框，框选一段图区，设置背景、边框等。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*VEOZR5rXpqMAAAAAAAAAAABkARQnAQ) | `{ type: 'region' }` |
| regionFilter | 区域着色，将图表中位于矩形选区中的图形元素提取出来，重新着色。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*cp2jSJfeJDYAAAAAAAAAAABkARQnAQ) | `{ type: 'regionFilter' }` |
| dataMarker | 特殊数据点标注，多用于折线图和面积图。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*h-e2TLivyI4AAAAAAAAAAABkARQnAQ) | `{ type: 'dataMarker' }` |
| dataRegion | 特殊数据区间标注，多用于折线图和面积图。![image.png](https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*NHbSRKacUesAAAAAAAAAAABkARQnAQ) | `{ type: 'dataRegion' }` |


#### 配置项（_AnnotationCfg_）

`markdown:docs/common/annotations.zh.md`
28 changes: 28 additions & 0 deletions docs/api/components/axis.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,32 @@ title: Axis
order: 0
---

`markdown:docs/styles/component.md`

Coordinate axis refers to the axis of statistical chart in two-dimensional space, which is used to define the mapping relationship between **direction** and **value of data** in coordinate system.

Go to [AntV Design | 坐标轴 Axis](https://www.yuque.com/mo-college/vis-design/twx9oi) of 墨者学院 to learn more about **Design guide**.

#### Usage

There are two kinds of coordinate axes: `xAxis` and `yAxis`, which vary according to the specific `Plot`.

<b>There are two ways to configure axes: </b>

Method 1, pass in 'Boolean' to set whether to display a legend.

```ts
xAxis: false; // hide xAxis
```

Method 2, pass in _AxisCfg_ to configure the axis as a whole.

```ts
xAxis: {
text: 'title of xAxis'
}
```

#### Configuration (_AxisCfg_)

`markdown:docs/common/axis.en.md`
29 changes: 29 additions & 0 deletions docs/api/components/axis.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,33 @@ title: 坐标轴
order: 0
---

`markdown:docs/styles/component.md`

坐标轴指二维空间中统计图表中的轴，它用来定义坐标系中数据在方向和值的映射关系的图表组件。

前往墨者学院 [AntV 设计 | 坐标轴 Axis](https://www.yuque.com/mo-college/vis-design/twx9oi) 查看**设计指引**

#### 使用方式

坐标轴通常有 `xAxis`, `yAxis` 两种，会根据具体 `Plot` 有所差异。

<b>配置坐标轴有两种方式：</b>

第一种，传入 `false` 设置隐藏坐标轴。

```ts
xAxis: false; // 隐藏 x 轴
```

第二种，传入 _AxisCfg_ 对坐标轴进行整体配置。


```ts
xAxis: {
text: 'x 轴标题'
}
```

#### 配置项 (_AxisCfg_)

`markdown:docs/common/axis.zh.md`
2 changes: 2 additions & 0 deletions docs/api/components/label.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@ title: Label
order: 1
---

`markdown:docs/styles/component.md`

`markdown:docs/common/label.en.md`
2 changes: 2 additions & 0 deletions docs/api/components/label.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@ title: 数据标签
order: 1
---

`markdown:docs/styles/component.md`

`markdown:docs/common/label.zh.md`
13 changes: 9 additions & 4 deletions docs/api/components/legend.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
---
title: Legend
order: 3
order: 2
---

`markdown:docs/styles/legend.md`
`markdown:docs/styles/component.md`


Legend is an auxiliary component of a plot, which uses color, size, and shape mapping, to show the symbol, color, and name of different series. You can click legends to toggle displaying series in the plot.

Go to [AntV Design | 图例 Legend](https://www.yuque.com/mo-college/vis-design/hcs9p2) of 墨者学院 to learn more about **Design guide**

#### Usage

<b>There are two ways to configure legends:</b>

Method 1, pass in the 'false' setting to close the legend.
Expand Down Expand Up @@ -37,8 +42,8 @@ legend: {
| offsetY | _number_ | - | Legends offset in the y direction. | |
| background | _object_ | - | Background box configuration item.reference  [background configuration](#background) | |
| flipPage | _boolean_ | false | Whether to page when there are too many legend items. | <tag color="green" text="Classification legend">Classification legend</tag> |
| itemWidth | _number\|null_ | null | The width of the legend item, default to null (automatically computed). | <tag color="green" text="Classification legend">Classification legend</tag> |
| itemHeight | _number\|null_ | null | The height of the legend, default to null. | <tag color="green" text="Classification legend">Classification legend</tag> |
| itemWidth | _number \| null_ | null | The width of the legend item, default to null (automatically computed). | <tag color="green" text="Classification legend">Classification legend</tag> |
| itemHeight | _number \| null_ | null | The height of the legend, default to null. | <tag color="green" text="Classification legend">Classification legend</tag> |
| itemName | _object_ | - | Configure the legend item name text.reference  [itemName configuration](#itemname) | <tag color="green" text="Classification legend">Classification legend</tag> |
| itemValue | _object_ | - | Configuration item of legend item Value added value.reference  [itemValue configuration](#itemvalue)。 | <tag color="green" text="Classification legend">Classification legend</tag> |
| itemSpacing | _number_ | - | Controls the horizontal spacing of legend items | <tag color="green" text="Classification legend">Classification legend</tag> |
Expand Down
15 changes: 10 additions & 5 deletions docs/api/components/legend.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
---
title: 图例
order: 3
order: 2
---

`markdown:docs/styles/legend.md`
`markdown:docs/styles/component.md`

图例（legend）是图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选。

前往墨者学院 [AntV 设计 | 图例 Legend](https://www.yuque.com/mo-college/vis-design/hcs9p2) 查看**设计指引**。

#### 使用方式

<b>配置图例有两种方式：</b>

第一种，传入 `false` 设置关闭图例。
Expand All @@ -24,7 +28,7 @@ legend: {
position: 'right'
}
```
<a name="7a2DF"></a>

#### 配置项（_LegendCfg_）

| 属性 | 类型 | 默认值 | 描述 | 适用于 |
Expand All @@ -36,8 +40,8 @@ legend: {
| offsetY | _number_ | - | 图例 y 方向的偏移。 | |
| background | _object_ | - | 背景框配置项。详见 [background 配置](#background) | |
| flipPage | _boolean_ | false | 当图例项过多时是否进行分页。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemWidth | _number\|null_ | null | 图例项的宽度, 默认为 null（自动计算）。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemHeight | _number\|null_ | null | 图例的高度, 默认为 null。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemWidth | _number \| null_ | null | 图例项的宽度, 默认为 null（自动计算）。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemHeight | _number \| null_ | null | 图例的高度, 默认为 null。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemName | _object_ | - | 图例项 name 文本的配置。详见 [itemName 配置](#itemname) | <tag color="green" text="分类图例">分类图例</tag> |
| itemValue | _object_ | - | 图例项 value 附加值的配置项。详见 [itemValue 配置](#itemvalue)。 | <tag color="green" text="分类图例">分类图例</tag> |
| itemSpacing | _number_ | - | 控制图例项水平方向的间距 | <tag color="green" text="分类图例">分类图例</tag> |
Expand All @@ -59,6 +63,7 @@ legend: {
| items | _object[]_ | - | 用户自己配置图例项的内容。详见 [items 配置](#items) | |

<a name="fDpx7"></a>

#### 配置项详解

`markdown:docs/common/legend-cfg.zh.md`
Expand Down
12 changes: 12 additions & 0 deletions docs/api/components/scrollbar.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
title: Scrollbar
order: 5
---

`markdown:docs/styles/component.md`

Go to [AntV Design | 缩略轴 Axis Navigator](https://www.yuque.com/mo-college/vis-design/gs5ow9) of 墨者学院 to learn more about **Design guide**

#### Configurations (_ScrollbarCfg_)

`markdown:docs/common/scrollbar.en.md`
12 changes: 12 additions & 0 deletions docs/api/components/scrollbar.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
title: 缩略轴
order: 5
---

`markdown:docs/styles/component.md`

前往墨者学院 [AntV 设计 | 缩略轴 Axis Navigator](https://www.yuque.com/mo-college/vis-design/gs5ow9) 查看**设计指引**。

#### 配置项 (_ScrollbarCfg_)

`markdown:docs/common/slider.zh.md`
10 changes: 10 additions & 0 deletions docs/api/components/slider.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
title: Slider
order: 6
---

`markdown:docs/styles/component.md`

#### Configurations (_SliderCfg_)

`markdown:docs/common/slider.en.md`
10 changes: 10 additions & 0 deletions docs/api/components/slider.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
title: 滚动条
order: 6
---

`markdown:docs/styles/component.md`

#### 配置项 (_SliderCfg_)

`markdown:docs/common/slider.zh.md`
6 changes: 6 additions & 0 deletions docs/api/components/tooltip.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,10 @@ title: Tooltip
order: 3
---

`markdown:docs/styles/component.md`

Go to [AntV 设计 | 提示信息 Tooltip](https://www.yuque.com/mo-college/vis-design/vrxog6)of 墨者学院 to learn more about **Design guide**.

#### Configurations (_TooltipCfg_)

`markdown:docs/common/tooltip.en.md`
8 changes: 8 additions & 0 deletions docs/api/components/tooltip.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,12 @@ title: Tooltip
order: 3
---

`markdown:docs/styles/component.md`

提示信息 Tooltip，指当鼠标悬停在图表上或者手指点按移动设备的某个数据点时，以**交互提示**信息的形式展示该点的数据，比如该点的值，数据单位等。

前往墨者学院 [AntV 设计 | 提示信息 Tooltip](https://www.yuque.com/mo-college/vis-design/vrxog6) 查看**设计指引**。

#### 配置项 (_TooltipCfg_)

`markdown:docs/common/tooltip.zh.md`
15 changes: 0 additions & 15 deletions docs/common/annotations.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,3 @@
标注是数组类型，可以设置多个。

```ts
annotations: [
{
type: 'text',
position: ['median', 'median'],
content: '辅助文本',
style: {
fill: 'red',
},
},
];
```

##### type

<description>**required** _string_ </description>
Expand Down
Loading