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: 补充图表英文文档 #2262

Merged
merged 1 commit into from
Jan 24, 2021
Merged

docs: 补充图表英文文档 #2262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion docs/api/plots/bar.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ Whether the plot is Percent Bar. When isPercent is `true`, isStack must be `true

### Graphic Style

`markdown:docs/common/color.zh.md`
`markdown:docs/common/color.en.md`

`markdown:docs/common/bar-style.en.md`

Expand Down
77 changes: 39 additions & 38 deletions docs/api/plots/bullet.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,99 +19,99 @@ Configure the data source. The data source is a collection of objects. For examp

`markdown:docs/common/meta.en.md`

#### measureField
#### measureField

<description>**required** _string_</description>

使用数据条的长度，实际数值的设置字段，表示实际数值。
Use the length of the data bar, the setting field for the actual value, to represent the actual value.

#### rangeField
#### rangeField

<description>**required** _string_</description>

使用背景色条的长度的设置字段，表示区间范围。
Use the setting field for the length of the background bar to represent the range.

#### targetField
#### targetField

<description>**required** _string_</description>

使用测量标记的刻度轴位置的设置字段，表示目标值。
Use a setting field for the position of the scale axis of the measurement mark to represent the target value.

#### xField
#### xField

<description>**optional** _string_</description>

用于区分不同的类型，适用于分组子弹图。
Used to distinguish different types, suitable for grouping bullet diagrams.

### Geometry Style

#### layout

<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>

表示子弹图方向。
Represents the direction of the bullet diagram.

#### color
#### color

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

设置子弹图各图形 color 属性。
Set color property of each graph of bullet map.

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ----------- | ------------ | -------- |
| range | _string\|string[]_ | 区间背景颜色 | 无 |
| measure | _string\|string[]_ | 实际值颜色 | 无 |
| target | _string\|string[]_ | 目标值颜色 | 无 |
| Properties | Type | Description | Default |
| ---------- | ------------------ | ------------------------- | ------- |
| range | _string\|string[]_ | Interval background color | - |
| measure | _string\|string[]_ | Actual value color | - |
| target | _string\|string[]_ | Target value color | - |

#### size
#### size

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

设置子弹图各图形 size 属性。
Set the size property of each graph of bullet map.

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ---------- | ------------ | -------- |
| range | _SizeAttr_ | 区间背景样式 | 30 |
| measure | _SizeAttr_ | 实际值样式 | 20 |
| target | _SizeAttr_ | 目标值样式 | 20 |
| Properties | Type | Description | Default |
| ---------- | ---------- | ------------------------- | ------- |
| range | _SizeAttr_ | Interval Background Style | 30 |
| measure | _SizeAttr_ | Actual value style | 20 |
| target | _SizeAttr_ | Target value styles | 20 |

```plain
type SizeAttr = number | [number, number] | ((datum: Datum) => number);
```

#### bulletStyle
#### bulletStyle

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

设置子弹图各图形 style 属性。
Set the style properties of each bullet map.

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ----------- | ------------ | -------------------- |
| range | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } |
| measure | _StyleAttr_ | 实际值样式 | 无 |
| target | _StyleAttr_ | 目标值样式 | 无 |
| Properties | Type | Description | Default |
| ---------- | ----------- | ------------------------- | -------------------- |
| range | _StyleAttr_ | Interval Background Style | { fillOpacity: 0.5 } |
| measure | _StyleAttr_ | Actual value style | - |
| target | _StyleAttr_ | Target value styles | - |

```plain
type StyleAttr = ShapeStyle | ((datum: object) => ShapeStyle);
```

`ShapeStyle` 结构可以参考：
`ShapeStyle` The structure can be referred to:

`markdown:docs/common/shape-style.en.md`

### Plot Components

#### label
#### label

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

设置子弹图各图形 label 属性。
Set the label attribute of each graph of the bullet map.

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ------------------- | ------------------- | -------- |
| range | _GeometryLabelAttr_ | 区间的 label 属性 | 无 |
| measure | _GeometryLabelAttr_ | 实际值的 label 属性 | true |
| target | _GeometryLabelAttr_ | 目标值的 label 属性 | 无 |
| Properties | Type | Description | Default |
| ---------- | ------------------- | --------------------------------------- | ------- |
| range | _GeometryLabelAttr_ | The label attribute of the range | - |
| measure | _GeometryLabelAttr_ | The label attribute of the actual value | true |
| target | _GeometryLabelAttr_ | The label attribute of the target value | - |

`markdown:docs/common/label.en.md`

Expand All @@ -128,6 +128,7 @@ Same for xAxis and yAxis.
#### legend

`markdown:docs/common/legend.en.md`

### Event

`markdown:docs/common/events.en.md`
Expand Down
16 changes: 8 additions & 8 deletions docs/api/plots/column.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,37 +21,37 @@ Configure the data source. The data source is a collection of objects. For examp

<description>**optional** _string_</description>

拆分字段，在分组柱状图下同 groupField、colorField，在堆积柱状图下同 stackField、colorField。
Split fields, same as GroupField and ColorField under the grouping bar chart, same as StackField and ColorField under the stacking bar chart.

#### groupField

<description>**optional** _string_</description>

拆分字段，用于堆叠分组柱状图，拆分优先级高于 seriesField，isGroup: true 时会根据 groupField 进行分组。
Split field used to stack grouping columns. Split field has a higher priority than SeriesField. IsGroup: true will group by GroupField.

#### isGroup

<description>**optional** _boolean_</description>

是否分组柱形图。
Whether to group bar charts.

#### isStack

<description>**optional** _boolean_</description>

是否堆积柱状图。
Whether to stack columns.

#### isRange

<description>**optional** _boolean_</description>

是否区间柱状图。
Whether to range columns.

#### isPercent

<description>**optional** _boolean_</description>

是否百分比柱状图，isPercent 为 true 时，isStack 也需要为 true。
Whether to percent columns, if isPercent is true, isStack also needs to be true.

#### meta

Expand All @@ -67,13 +67,13 @@ Configure the data source. The data source is a collection of objects. For examp

<description>**optional** _number_</description>

柱状图宽度占比 [0-1]。
Width ratio of column [0-1].

#### marginRatio

<description>**optional** _number_</description>

分组中柱子之间的间距 [0-1]，仅对分组柱状图适用。
The spacing between columns in a grouping [0-1] applies only to grouping columns.

### Plot Components

Expand Down
85 changes: 43 additions & 42 deletions docs/api/plots/dual-axes.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,23 @@ order: 6

<description>**required** _Array<Record<string, any>[]>_</description>

设置图表数据源。数据源为二维数组，形式为[左轴图形对象集合，右轴图形对象集合]，例如：
Configure the chart data source. The data source is a two-dimensional array in the form of [left-axis graph object set, right-axis graph object set], for example:

```ts
const data = [[{ time: '1991'，value: 20 }], [{ time: '1992', count: 20 }]];
```

#### xField
#### xField

<description>**required** _string_</description>

点形状在 x 方向位置映射对应的数据字段名，一般对应一个连续字段。例如`{xField: 'time'}`。
The dot shape maps the name of the corresponding data field in the x-direction position, generally corresponding to a consecutive field. For example: `{xField: 'time'}`。

#### yField
#### yField

<description>**required** _string[]_</description>

点形状在 y 方向位置映射所对应的数据字段名数组, 形式为[左轴图形数据字段名，右轴图形数据字段名]，例如 `{yField: ['value', 'count']}`。
The array of data field names to which the dot shape maps in the Y direction is of the form [left-axis graph data field name, right-axis graph data field name], for example '{yField: ['value', 'count']}'.

#### meta

Expand All @@ -41,39 +41,40 @@ const data = [[{ time: '1991'，value: 20 }], [{ time: '1992', count: 20 }]];

<description>**optional** _array object_</description>

指定了双轴各自对应的图形配置，形式为[左轴图形配置，右轴图形配置]。每一个配置应为 Line 或 Column 类型的 Config。通过指定双轴对应图形，来实现混合图表功能:
- 双轴折线图: [Line, Line], 参考 [DEMO](../../../examples/dual-axes/dual-line)
- 柱线混合图: [Column, Line], 参考 [DEMO](http://localhost:8080/zh/examples/dual-axes/column-line)

你还可以通过配置 Line 或 Column 的相关配置（见下文），形成双轴多折线图([DEMO](../../../examples/dual-axes/dual-line#dual-multi-line)), 堆叠柱+折线图([DEMO](../../../examples/dual-axes/stacked-column-line)), 分组柱+折线图([DEMO](../../../examples/dual-axes/grouped-column-line))

折线对应的图形配置为：

| 细分配置项名称 | 类型 | 功能描述 | 默认值 |
| ----------- | -------------------------------- | ----------------------------------------------- | ------ |
| geometry | _string_ | 图形类型，指定为'line' | 'line' |
| seriesField | _string_ | 拆分字段, 若存在则为多折线，具体用法同[折线图 seriesfield](./line#seriesfield) |
| smooth | _boolean_ | 是否平滑，具体用法同[折线图 smooth](./line#smooth) | false |
| connectNulls | _boolean_ | 是否连接空数据，具体用法同[折线图 connectnulls](./line#connectnulls) | true |
| lineStyle | _StyleAttr \| Function_ | 折线图形样式，具体用法同[折线图 lineStyle](./line#linestyle) | |
| point | _pointStyle_ | 线数据点图形样式，具体用法同[折线图 point](./line#point) | |
| label | _ContinueLegendLabelCfg_ | 折线图 label,具体用法同[折线图 label](./line#label) |
| color | _string \| string[] \| Function_ | 指定点的颜色。具体用法同[折线图 color](./line#color) |

柱形对应的图形配置为：

| 细分配置项名称 | 类型 | 功能描述 | 默认值 |
| ----------- | -------------------------------- | ----------------------------------------------- | ------ |
| geometry | _string_ | 图形类型，应指定为'column' | |
| seriesField | _string_ | 拆分字段, 在分组柱状图下同 groupField、colorField，在堆积柱状图下同 stackField、colorField ，具体参考[柱形图 seriesfield](./column#seriesfield) |
| isGroup | _boolean_ | 是否分组柱形图，具体用法同[柱形图 isGroup](./column#isgroup) | false |
| isStack | _boolean_ | 是否堆积柱状图，具体用法同[柱形图 isStack](./column#isstack) | false |
| columnWidthRatio | _number_ | 柱状图宽度占比 [0-1] ，具体用法同[柱形图 columnWidthRatio](./column#columnwidthratio) | |
| marginRatio | _number_ | 分组中柱子之间的间距 [0-1]，仅对分组柱状图适用，具体用法同[柱形图 marginRatio](./column#marginratio) | |
| columnStyle | _StyleAttr \| Function_ | 柱子样式配置，具体用法同[柱形图 columnStyle](./column#columnstyle) | |
| label | _ContinueLegendLabelCfg_ | 柱形图 label,具体用法同[柱线图 label](./column#label) |
| color | _string \| string[] \| Function_ | 指定点的颜色。具体用法同[折线图 color](./column#color) |
| groupField | _string_ | 拆分字段，用于堆叠+分组柱图，拆分优先级高于 seriesField，isGroup: true 时会根据 groupField 进行分组。 | - |
Specifies the respective configuration of the two axes in the form of "left axis configuration, right axis configuration". Each configuration should be a Config of type LINE or COLUMN. Mixed chart function is implemented by specifying the corresponding graph with two axes:

- Biaxial line chart: [Line, Line], reference [DEMO](../../../examples/dual-axes/dual-line)
- Column and Line Mixing Chart: [Column, Line], reference [DEMO](http://localhost:8080/zh/examples/dual-axes/column-line)

你还可以通过配置 Line 或 Column 的相关配置（见下文），形成双轴多 Line([DEMO](../../../examples/dual-axes/dual-line#dual-multi-line)), 堆叠柱+Line([DEMO](../../../examples/dual-axes/stacked-column-line)), 分组柱+Line([DEMO](../../../examples/dual-axes/grouped-column-line))

The corresponding graph configuration of polyline is as follows:

| Properties | Type | Description | Default |
| ------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------- |
| geometry | _string_ | Chart type, specified as 'line' | 'line' |
| seriesField | _string_ | Split the field, if there is a polyline, the specific use of the same[Line seriesfield](./line#seriesfield) |
| smooth | _boolean_ | Whether is smooth[Line smooth](./line#smooth) | false |
| connectNulls | _boolean_ | Whether to connect empty data[Line connectnulls](./line#connectnulls) | true |
| lineStyle | _StyleAttr \| Function_ | Line style[Line lineStyle](./line#linestyle) | |
| point | _pointStyle_ | Line data point graphic style[Line point](./line#point) | |
| label | _ContinueLegendLabelCfg_ | Line label [Line label](./line#label) |
| color | _string \| string[] \| Function_ | Specifies the color of the point[Line color](./line#color) |

The graph corresponding to the column is configured as follows:

| Properties | Type | Description | Default |
| ---------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| geometry | _string_ | Chart type, specified as 'column' | |
| seriesField | _string_ | Split fields, same as GroupField and ColorField under the grouping bar chart, same as StackField and ColorField under the stacking bar chart, specificreference[Column seriesfield](./column#seriesfield) |
| isGroup | _boolean_ | Whether to group bar charts[Column isGroup](./column#isgroup) | false |
| isStack | _boolean_ | Whether to stack histograms[Column isStack](./column#isstack) | false |
| columnWidthRatio | _number_ | Histogram width ratio [0-1] [Column columnWidthRatio](./column#columnwidthratio) | |
| marginRatio | _number_ | The spacing between columns in a grouping [0-1] applies only to grouping histograms[Column marginRatio](./column#marginratio) | |
| columnStyle | _StyleAttr \| Function_ | Column style configuration[Column columnStyle](./column#columnstyle) | |
| label | _ContinueLegendLabelCfg_ | Column label [Column label](./column#label) |
| color | _string \| string[] \| Function_ | Specifies the color of the point[Line color](./column#color) |
| groupField | _string_ | Split field, used to stack group histograms. Split field takes precedence over SeriesField. IsGroup: true will group by GroupField. | - |

### Plot Components

Expand All @@ -83,7 +84,7 @@ const data = [[{ time: '1991'，value: 20 }], [{ time: '1992', count: 20 }]];

#### axis

xAxis、yAxis 配置相同，由于 DualAxes 是双轴， yAxis 类型是对象类型，形式为{左轴字段: 左轴配置，右轴字段: 右轴配置}。例如
XAXIS and YAXIS are configured the same, since DualAxes are biaxial and YAXIS type is an object type, for example

```ts
{
Expand All @@ -103,7 +104,7 @@ xAxis、yAxis 配置相同，由于 DualAxes 是双轴， yAxis 类型是对象

#### annotations

xAxis、yAxis 配置相同，由于 DualAxes 是双轴， annotations 类型是对象类型，形式为{左轴字段: 左轴配置，右轴字段: 右轴配置}。例如
The configuration for Xaxis and Yaxis is the same, since DualAxes are biaxes, and the Annotations type is an object type, with the form {left axis field: left axis configuration, right axis field: right axis configuration}. For example,

```ts
{
Expand Down Expand Up @@ -144,7 +145,8 @@ xAxis、yAxis 配置相同，由于 DualAxes 是双轴， annotations 类型是
}
}
```
`markdown:docs/common/annotations.zh.md`

`markdown:docs/common/annotations.en.md`

#### legend

Expand All @@ -161,4 +163,3 @@ xAxis、yAxis 配置相同，由于 DualAxes 是双轴， annotations 类型是
### Plot Methods

`markdown:docs/common/chart-methods.en.md`

Loading