Skip to content

Commit 2fb8628

Browse files
lxfu1liufu.lf
lxfu1
and
liufu.lf
authored
feat: line support type (#1623)
* feat: line support type * fix: 修改实现 * feat: 新增 line step demos 和修改 API 文档 * fix: 修改类型定义 type => stepType Co-authored-by: liufu.lf <[email protected]>
1 parent 0d5e4dc commit 2fb8628

File tree

16 files changed

+149
-60
lines changed

16 files changed

+149
-60
lines changed

‎__tests__/unit/plots/line/step-type-spec.ts

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Line } from '../../../../src';
2+
import { partySupport } from '../../../data/party-support';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('line', () => {
6+
it('x*y*color and axis options', () => {
7+
const line = new Line(createDiv(), {
8+
width: 400,
9+
height: 300,
10+
data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
11+
xField: 'date',
12+
yField: 'value',
13+
seriesField: 'type',
14+
color: ['blue', 'red'],
15+
appendPadding: 10,
16+
connectNulls: true,
17+
stepType: 'hv',
18+
});
19+
20+
line.render();
21+
22+
const geometry = line.chart.geometries[0];
23+
const elements = geometry.elements;
24+
// @ts-ignore
25+
expect(geometry.connectNulls).toBe(true);
26+
expect(elements.length).toBe(2);
27+
expect(elements[0].getModel().shape).toBe('hv');
28+
});
29+
});

‎examples/line/basic/API.en.md

+8
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,14 @@
3838

3939
默认配置： `false`
4040

41+
#### stepType
42+
43+
**可选**, _hv | vh | hvh | vhv_
44+
45+
功能描述： 阶梯折线图类型，配置后 smooth 无效，一般用在阶梯图中。
46+
47+
默认配置： 无
48+
4149
#### connectNulls
4250

4351
**可选**, _boolean_

‎examples/line/basic/API.zh.md

+8
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,14 @@
3838

3939
默认配置： `false`
4040

41+
#### stepType
42+
43+
**可选**, _hv | vh | hvh | vhv_
44+
45+
功能描述： 阶梯折线图类型，配置后 smooth 无效，一般用在阶梯图中。
46+
47+
默认配置： 无
48+
4149
#### connectNulls
4250

4351
**可选**, _boolean_

‎examples/line/multiple/design.en.md

+1-29
Original file line numberDiff line numberDiff line change
@@ -1,29 +1 @@
1-
---
2-
title: 设计规范
3-
---
4-
5-
## 何时使用
6-
7-
折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。
8-
9-
## 数据类型
10-
11-
| 适合的数据 | 「两个连续字段数据」，或者「一个有序的分类」+「一个连续数据字段」 |
12-
| ---------------- | ----------------------------------------------------------------- |
13-
| 功能 | 观察数据的变化趋势 |
14-
| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 |
15-
| 适合的数据条数 | 大于两条 |
16-
17-
## 用法建议
18-
19-
<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*yGeASraSozQAAAAAAAAAAABkARQnAQ" width="1000">
20-
21-
## 元素
22-
23-
<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uxv8RJgYx4oAAAAAAAAAAABkARQnAQ" width="800">
24-
25-
- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
26-
- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
27-
- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
28-
- 标签：用来解释数据点的值。
29-
- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
1+
`markdown:examples/line/basic/design.en.md`

‎examples/line/multiple/design.zh.md

+1-29
Original file line numberDiff line numberDiff line change
@@ -1,29 +1 @@
1-
---
2-
title: 设计规范
3-
---
4-
5-
## 何时使用
6-
7-
折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。
8-
9-
## 数据类型
10-
11-
| 适合的数据 | 「两个连续字段数据」，或者「一个有序的分类」+「一个连续数据字段」 |
12-
| ---------------- | ----------------------------------------------------------------- |
13-
| 功能 | 观察数据的变化趋势 |
14-
| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 |
15-
| 适合的数据条数 | 大于两条 |
16-
17-
## 用法建议
18-
19-
<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*yGeASraSozQAAAAAAAAAAABkARQnAQ" width="1000">
20-
21-
## 元素
22-
23-
<img alt="design" src="https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uxv8RJgYx4oAAAAAAAAAAABkARQnAQ" width="800">
24-
25-
- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
26-
- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
27-
- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
28-
- 标签：用来解释数据点的值。
29-
- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
1+
`markdown:examples/line/basic/design.zh.md`

‎examples/line/step/API.en.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
`markdown:examples/line/basic/API.en.md`

‎examples/line/step/API.zh.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
`markdown:examples/line/basic/API.zh.md`

‎examples/line/step/demo/line-multiple.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Line } from '@antv/g2plot';
2+
3+
const data = [
4+
{ month: 'Jan', key: 'series1', value: 125 },
5+
{ month: 'Jan', key: 'series2', value: 51 },
6+
{ month: 'Feb', key: 'series1', value: 132 },
7+
{ month: 'Feb', key: 'series2', value: 91 },
8+
{ month: 'Mar', key: 'series1', value: 141 },
9+
{ month: 'Mar', key: 'series2', value: 34 },
10+
{ month: 'Apr', key: 'series1', value: 158 },
11+
{ month: 'Apr', key: 'series2', value: 47 },
12+
{ month: 'May', key: 'series1', value: 133 },
13+
{ month: 'May', key: 'series2', value: 63 },
14+
{ month: 'June', key: 'series1', value: 143 },
15+
{ month: 'June', key: 'series2', value: 58 },
16+
{ month: 'July', key: 'series1', value: 176 },
17+
{ month: 'July', key: 'series2', value: 56 },
18+
{ month: 'Aug', key: 'series1', value: 194 },
19+
{ month: 'Aug', key: 'series2', value: 77 },
20+
{ month: 'Sep', key: 'series1', value: 115 },
21+
{ month: 'Sep', key: 'series2', value: 99 },
22+
{ month: 'Oct', key: 'series1', value: 134 },
23+
{ month: 'Oct', key: 'series2', value: 106 },
24+
{ month: 'Nov', key: 'series1', value: 110 },
25+
{ month: 'Nov', key: 'series2', value: 88 },
26+
{ month: 'Dec', key: 'series1', value: 91 },
27+
{ month: 'Dec', key: 'series2', value: 56 },
28+
];
29+
const line = new Line('container', {
30+
data,
31+
xField: 'month',
32+
yField: 'value',
33+
legend: false,
34+
seriesField: 'key',
35+
stepType: 'hvh',
36+
});
37+
38+
line.render();

‎examples/line/step/demo/line.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Line } from '@antv/g2plot';
2+
3+
const data = [
4+
{ year: '1991', value: 3 },
5+
{ year: '1992', value: 4 },
6+
{ year: '1993', value: 3.5 },
7+
{ year: '1994', value: 5 },
8+
{ year: '1995', value: 4.9 },
9+
{ year: '1996', value: 6 },
10+
{ year: '1997', value: 7 },
11+
{ year: '1998', value: 9 },
12+
{ year: '1999', value: 13 },
13+
{ year: '1999', value: 8 },
14+
];
15+
const linePlot = new Line('container', {
16+
data,
17+
xField: 'year',
18+
yField: 'value',
19+
stepType: 'vh',
20+
});
21+
22+
linePlot.render();

‎examples/line/step/demo/meta.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"title": {
3+
"zh": "中文分类",
4+
"en": "Category"
5+
},
6+
"demos": [
7+
{
8+
"filename": "line.ts",
9+
"title": {
10+
"zh": "阶梯折线图",
11+
"en": "step Line chart"
12+
},
13+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*lOdVRrYL7UIAAAAAAAAAAAAAARQnAQ"
14+
},
15+
{
16+
"filename": "line-multiple.ts",
17+
"title": {
18+
"zh": "多阶梯折线图",
19+
"en": "step Line multiple chart"
20+
},
21+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*qpizTrPVB-IAAAAAAAAAAABkARQnAQ"
22+
}
23+
]
24+
}

‎examples/line/step/design.en.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
`markdown:examples/line/basic/design.en.md`

‎examples/line/step/design.zh.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
`markdown:examples/line/basic/design.zh.md`

‎examples/line/step/index.en.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 阶梯折线图
3+
order: 1
4+
---

‎examples/line/step/index.zh.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: 阶梯折线图
3+
order: 1
4+
---

‎src/adaptor/geometries/line.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export interface LineGeometryOptions extends GeometryOptions {
2525
readonly connectNulls?: boolean;
2626
/** line 映射配置 */
2727
readonly line?: LineOption;
28+
/** 阶梯折线图类型 */
29+
readonly stepType?: string;
2830
}
2931

3032
/**
@@ -33,7 +35,7 @@ export interface LineGeometryOptions extends GeometryOptions {
3335
*/
3436
export function line<O extends LineGeometryOptions>(params: Params<O>): Params<O> {
3537
const { options } = params;
36-
const { line, seriesField, smooth, connectNulls } = options;
38+
const { line, stepType, seriesField, smooth, connectNulls } = options;
3739

3840
// 如果存在才处理
3941
return line
@@ -43,7 +45,7 @@ export function line<O extends LineGeometryOptions>(params: Params<O>): Params<O
4345
type: 'line',
4446
colorField: seriesField,
4547
mapping: {
46-
shape: smooth ? 'smooth' : 'line',
48+
shape: stepType || (smooth ? 'smooth' : 'line'),
4749
...line,
4850
},
4951
args: { connectNulls },

‎src/plots/line/types.ts

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { PointGeometryOptions } from '../../adaptor/geometries';
22
import { Options, StyleAttr } from '../../types';
33

44
export interface LineOptions extends Options {
5+
/** 阶梯折线图类型 */
6+
readonly stepType?: string;
57
/** x 轴字段 */
68
readonly xField?: string;
79
/** y 轴字段 */

0 commit comments

Comments
 (0)