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.

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

feat(radial-bar): 玉珏图支持配置开始角度和结束角度 #2251

Merged
merged 2 commits into from
Jan 20, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 14 additions & 0 deletions docs/api/plots/radial-bar.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,20 @@ Radius of Polar coordinate. Value can be: (0, 1]

InnerRadius of Polar coordinate. Value can be: (0, 1]

#### startAngle

<description>**optional** _number_ _default:_ `-Math.PI / 2`</description>

配置坐标系的起始角度。

#### endAngle

<description>**optional** _number_ _default:_ `Math.PI / 2 * 3`</description>

配置坐标系的结束角度。

<playground path="more-plots/radial-bar/demo/line.ts" rid="startAngle-endAngle"></playground>

#### maxAngle

<description>**optional** _number_ _default:_ `240`</description>
Expand Down
14 changes: 14 additions & 0 deletions docs/api/plots/radial-bar.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,20 @@ order: 25

功能描述: 内径,0 ~ 1。

#### startAngle

<description>**optional** _number_ _default:_ `-Math.PI / 2`</description>

配置坐标系的起始角度。

#### endAngle

<description>**optional** _number_ _default:_ `Math.PI / 2 * 3`</description>

配置坐标系的结束角度。

<playground path="more-plots/radial-bar/demo/line.ts" rid="startAngle-endAngle"></playground>

#### maxAngle

<description>**可选** _number_ _default:_ `240`</description>
Expand Down
28 changes: 22 additions & 6 deletions docs/common/axis.zh.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,25 @@
##### position

<description>**optional** _`top` | `bottom` | `left` | `right`_</description>

适用于直角坐标系,设置坐标轴的位置。

### label

<description> _AxisLabelCfg | null_ **optional** </description>

文本标签的配置项,null 表示不展示。_AxisLabelCfg_ 配置如下:

| 参数名 | 类型 | 是否必选 | 默认值 | 描述 |
| ------------ | ------------------------------------------------------ | -------- | ------- | ------------------------ |
| style | [ShapeAttrs](/zh/docs/api/shape/shape-attrs) | | - | 坐标轴刻度线的样式配置项 |
| offset | number | | - | label 的偏移量 |
| rotate | number | | - | 文本旋转角度 |
| autoRotate | boolean | | `true` | 是否自动旋转 |
| autoHide | boolean | | `false` | 是否自动隐藏 |
| autoEllipsis | boolean | | `false` | 是否自动省略 |
| formatter | `(text: string, item: ListItem, index: number) => any` | | `false` | 格式化函数 |

##### nice

<description>**optional** _boolean_ _default:_ `true`</description>
Expand Down Expand Up @@ -46,12 +68,6 @@

指定 tick 计算方法,或自定义计算 tick 的方法,内置 tick 计算方法包括 `cat`、`time-cat`、 `wilkinson-extended`、`r-pretty`、`time`、`time-pretty`、`log`、`pow`、`quantile`、`d3-linear`。

##### position

<description>**optional** _`top` | `bottom` | `left` | `right`_</description>

适用于直角坐标系,设置坐标轴的位置。

##### line

<description>**optional** _object_</description>
Expand Down
7 changes: 5 additions & 2 deletions examples/more-plots/radial-bar/demo/line.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,11 @@ const bar = new RadialBar('container', {
data,
xField: 'term',
yField: 'count',
radius: 0.8,
innerRadius: 0.2,
radius: 1,
innerRadius: 0.4,
// 设置坐标系的起始角度和终止角度
startAngle: Math.PI * 0.5,
endAngle: Math.PI * 2.5,
tooltip: {
showMarkers: true,
},
Expand Down
4 changes: 3 additions & 1 deletion src/plots/radial-bar/adaptor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,16 @@ export function meta(params: Params<RadialBarOptions>): Params<RadialBarOptions>
*/
function coordinate(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
const { chart, options } = params;
const { radius, innerRadius } = options;
const { radius, innerRadius, startAngle, endAngle } = options;

chart
.coordinate({
type: 'polar',
cfg: {
radius,
innerRadius,
startAngle,
endAngle,
},
})
.transpose();
Expand Down
4 changes: 4 additions & 0 deletions src/plots/radial-bar/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ export interface RadialBarOptions extends Options, Pick<BarOptions, 'barBackgrou
readonly radius?: number;
/** 圆内半径 */
readonly innerRadius?: number;
/** 圆环的开始角度 */
readonly startAngle?: number;
/** 圆环的结束角度 */
readonly endAngle?: number;
/** 颜色字段 */
readonly colorField?: string;
/** 类型 */
Expand Down