Skip to content

Commit

Permalink
docs: 完善 axis 文档（含 title, line, tickLine, subTickLine 等） (#2460)
Browse files Browse the repository at this point in the history 
* docs: 统一修复 shape-attrs 文档链接

* docs(axis): 坐标轴增加轴标题 position 使用 api

* docs: 修复 spacing 类型定义错误

* docs(axis): 完善了 axis 关于 line,tickLine,subTickLine 以及 gird.line 的配置

整体对 lineStyle 的配置文档进行了优化

* docs(theme): 修复主题文档表格错误
  • Loading branch information
@visiky
visiky authored Mar 25, 2021
1 parent b4622b1 commit 7a651f7
Show file tree
Hide file tree
Showing 15 changed files with 135 additions and 114 deletions.
16 changes: 3 additions & 13 deletions docs/api/graphic-style.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,19 +48,9 @@ Result:

## Configure line styles

| Properties | Type | Description |
| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| stroke | string | The color of the line |
| lineWidth | number | Line width |
| lineDash | [number,number] | With dotted line configuration, the first value is the length of each segment of the dotted line, and the second value is the distance between segments. LineDash sets [0,0] to no stroke. |
| opacity | number | Transparency |
| shadowColor | string | Shadow color |
| shadowBlur | number | Gaussian blur coefficient |
| shadowOffsetX | number | Sets the horizontal distance between the shadow and the shape |
| shadowOffsetY | number | Sets the vertical distance of the shadow from the shape |
| cursor | string | Mouse style. Mouse styles with CSS, default 'default'。 |

Use the full graphic style `lineStyle` to configure the Line graphic style. Example:
`markdown:docs/common/line-style.en.md`

In a line plot, you can use `linestyle` directly to configure the Line graphic style. Example:

```ts
lineStyle: {
Expand Down
22 changes: 6 additions & 16 deletions docs/api/graphic-style.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,19 +48,9 @@ G2Plot 使用 [G](https://github.com/antvis/g) 作为绘图引擎，一些图形

## 配置线的样式

| 属性名 | 类型 | 介绍 |
| ------------- | --------------- | ------------------------------------------------------------------------------------------------------ |
| stroke | string | 线的颜色 |
| lineWidth | number | 线宽 |
| lineDash | [number,number] | 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。 |
| opacity | number | 透明度 |
| shadowColor | string | 阴影颜色 |
| shadowBlur | number | 高斯模糊系数 |
| shadowOffsetX | number | 设置阴影距图形的水平距离 |
| shadowOffsetY | number | 设置阴影距图形的垂直距离 |
| cursor | string | 鼠标样式。同 css 的鼠标样式,默认 'default'。 |

示例代码，使用全量图形样式配置 Line (基础折线图) 的折线图形样式 `LineStyle`：
`markdown:docs/common/line-style.zh.md`

在折线图中，你可以直接使用 `linestyle` 来配置 line 几何图形的样式。示例:

```ts
lineStyle: {
Expand All @@ -74,7 +64,7 @@ lineStyle: {
shadowOffsetY: 5,
cursor: 'pointer'
}
```
````

效果：

Expand All @@ -83,12 +73,12 @@ lineStyle: {
## 配置文字样式

| 属性名 | 类型 | 介绍 |
| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ |
| ------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | -------- | -------- | ------------ | --------------------------- |
| fontSize | number | 文字大小 |
| fontFamily | string | 文字字体 |
| fontWeight | number | 字体粗细 |
| lineHeight | number | 文字的行高 |
| textAlign | string | 设置文本内容的当前对齐方式, 支持的属性：`center` | `end` | `left` | `right` | `start`，默认值为`start` |
| textAlign | string | 设置文本内容的当前对齐方式, 支持的属性：`center` | `end` | `left` | `right` | `start`，默认值为`start` |
| textBaseline | string | 设置在绘制文本时使用的当前文本基线, 支持的属性:`top` | `middle` | `bottom` | `alphabetic` | `hanging`。默认值为`bottom` |
| fill | string | 文字的填充色 |
| fillOpacity | number | 文字的填充透明度 |
Expand Down
2 changes: 1 addition & 1 deletion docs/api/plots/area.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ Area graphic style.

#### line

<description>**optional** _lineStyle_</description>
<description>**optional** _object_</description>

Line graphic style in the Area.

Expand Down
2 changes: 1 addition & 1 deletion docs/api/plots/area.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ order: 1

#### line

<description>**optional** _lineStyle_</description>
<description>**optional** _object_</description>

面积中折线的样式。

Expand Down
2 changes: 1 addition & 1 deletion docs/api/plots/tiny-area.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Area chart style.

#### line

<description>**optional** _lineStyle_</description>
<description>**optional** _object_</description>

The pattern of polylines in the area.

Expand Down
2 changes: 1 addition & 1 deletion docs/api/plots/tiny-area.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ order: 15

#### line

<description>**optional** _lineStyle_</description>
<description>**optional** _object_</description>

面积中折线的样式。

Expand Down
64 changes: 41 additions & 23 deletions docs/common/axis.en.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

##### position

<description>**optional** _`top` | `bottom` | `left` | `right`_</description>
Expand All @@ -11,15 +10,15 @@ For Cartesian coordinates, set the position of the coordinate axes.

Configurations related to axis label. Set this to `null` to prevent the axis label from appearing. The details of _ AxisLabelCfg_ are as follows:

| Properties | Type | |
| ------------ | -----------------------------------------------------| ------- | ------------------------ |
| style | _[ShapeAttrs](/zh/docs/api/shape/shape-attrs)_ | - | Axis label text graphic property style |
| offset | _number_ | - | Axis label offset
| rotate | _number_ | - | Axis label text rotation Angle |
| autoRotate | _boolean_ | `true` | Whether to rotate automatically, default true |
| autoHide | _boolean_ | `false` | Whether to hide it automatically, default to false |
| autoEllipsis | _boolean_ | `false` | Whether to ellipsis label when overflow, default to false |
| formatter | _`(text: string, item: ListItem, index: number) => any`_ | `false` | Format function |
| Properties | Type | |
| ------------ | -------------------------------------------------------- | ------- | --------------------------------------------------------- |
| style | _[ShapeAttrs](/zh/docs/api/graphic-style)_ | - | Axis label text graphic property style |
| offset | _number_ | - | Axis label offset |
| rotate | _number_ | - | Axis label text rotation Angle |
| autoRotate | _boolean_ | `true` | Whether to rotate automatically, default true |
| autoHide | _boolean_ | `false` | Whether to hide it automatically, default to false |
| autoEllipsis | _boolean_ | `false` | Whether to ellipsis label when overflow, default to false |
| formatter | _`(text: string, item: ListItem, index: number) => any`_ | `false` | Format function |

##### verticalFactor

Expand Down Expand Up @@ -95,29 +94,50 @@ Coordinate axis configuration item, NULL means not displayed.

The configuration item of the coordinate axis scale line. NULL means not displayed.

`markdown:docs/common/line-style.en.md`
| Properties | Type | Description |
| ---------- | ----------- | -------------------------------------- |
| style | _lineStyle_ | The style of tickLine. |
| alignTick | _boolean_ | Whether aligh tickLine with tick label |
| length | _number_ | The length of tickLine. |

Go [ShapeAttrs](/zh/docs/api/graphic-style) see more details about _ShapeAttrs_. The params of _ShapeAttrsCallback_ are as follow：

```ts
type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
```

##### subTickLine

<description>**optional** _object_</description>

A configuration item for a coordinate subscale. NULL indicates that it is not displayed.

`markdown:docs/common/line-style.en.md`
| Properties | Type | Description |
| ---------- | ---------------------------------- | -------------------------- |
| style | _ShapeAttrs \| ShapeAttrsCallback_ | The style of subTickLine. |
| count | _number_ | The count of subTickLine. |
| length | _number_ | The length of subTickLine. |

Go [ShapeAttrs](/zh/docs/api/graphic-style) see more details about _ShapeAttrs_. The params of _ShapeAttrsCallback_ are as follow：

```ts
type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
```

##### title

<description>**optional** _object_</description>

A configuration item for the title, NULL means not to be displayed.

| Properties | Type | Description |
| ---------- | ------------ | ------------------------------------------------------------------ |
| text | _string_ | The title of axis |
| offset | _number_ | The distance of the title from the coordinate axis |
| spacing | _lineStyle_ | The distance between the title and the text on the coordinate axis |
| style | _shapeStyle_ | Title text configuration items |
| autoRotate | _boolean_ | Whether to rotate automatically or not |
| Properties | Type | Description |
| ---------- | ------------ | -------------------------------------------------------------------------- |
| text | _string_ | The title of axis |
| position | _string_ | Position of the axis title, default: 'center'. Options: start, center, end |
| offset | _number_ | The distance of the title from the coordinate axis |
| spacing | _number_ | The distance between the title and the text on the coordinate axis |
| style | _shapeStyle_ | Title text configuration items |
| autoRotate | _boolean_ | Whether to rotate automatically or not |

**_shapeStyle_**

Expand All @@ -139,14 +159,12 @@ Axis grid line configuration item. NULL means not shown.

| Properties | Type | Description |
| -------------- | ------------------ | ------------------------------------------------------------------ |
| line.style | _lineStyle_ | The style of the line |
| line | _lineStyle_ | The style of the line |
| alternateColor | _string\|string[]_ | The fill color between two grid lines |
| closed | _boolean_ | Whether to close the grid for circle |
| alignTick | _boolean_ | If the value is false, it will be displayed between the two scales |

The configurations of **_lineStyle_** are as follows:

`markdown:docs/common/line-style.en.md`
Then config of `grid.line` is the same as: [line](#line)

##### animate

Expand Down
Loading

0 comments on commit 7a651f7

Please sign in to comment.