Skip to content

Commit db09fa4

Browse files
visikyvisiky
authored
feat: column and bar plot support pixel width setting (#2156)
* feat(column-width): 柱条形图支持配置最小、最大宽度和组间间距和组内间距 * docs(💄): 增加柱条形图的最小、最大宽度设置的 demo 和文档 * revert: 暂时不开放 interval 间距设置 * docs(demo): 更新 demo 截图
1 parent 72bbfa4 commit db09fa4

File tree

19 files changed

+229
-31
lines changed

19 files changed

+229
-31
lines changed

‎docs/api/plots/bar.en.md

+12
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,18 @@ Whether the plot is Percent Bar. When isPercent is `true`, isStack must be `true
6363

6464
The ratio of bar width( Range:[0-1] ).
6565

66+
#### minBarWidth
67+
68+
<description>**optional** _number_</description>
69+
70+
The min width of bar, pixel value。
71+
72+
#### maxBarWidth
73+
74+
<description>**optional** _number_</description>
75+
76+
The max width of bar, pixel value。
77+
6678
#### marginRatio
6779

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

‎docs/api/plots/bar.zh.md

+11
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,17 @@ order: 3
6363

6464
条形图宽度占比 [0-1]。
6565

66+
#### minBarWidth
67+
68+
<description>**optional** _number_</description>
69+
70+
条形图最小宽度设置，像素值。
71+
72+
#### maxBarWidth
73+
74+
<description>**optional** _number_</description>
75+
76+
条形图最大宽度设置，像素值。
6677
#### marginRatio
6778

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

‎docs/api/plots/column.en.md

+12
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,18 @@ order: 2
6363

6464
柱状图宽度占比 [0-1]。
6565

66+
#### minColumnWidth
67+
68+
<description>**optional** _number_</description>
69+
70+
The min width of column, pixel value。
71+
72+
#### maxColumnWidth
73+
74+
<description>**optional** _number_</description>
75+
76+
The max width of column, pixel value。
77+
6678
#### marginRatio
6779

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

‎docs/api/plots/column.zh.md

+12
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,18 @@ order: 2
6565

6666
柱状图宽度占比 [0-1]。
6767

68+
#### minColumnWidth
69+
70+
<description>**optional** _number_</description>
71+
72+
柱状图最小宽度设置，像素值。
73+
74+
#### maxColumnWidth
75+
76+
<description>**optional** _number_</description>
77+
78+
柱状图最大宽度设置，像素值。
79+
6880
#### marginRatio
6981

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

‎docs/common/connected-area.en.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
#### connectedArea
2-
31
适用于堆叠柱状图和堆叠条形图，联通区域组件通过绘制同一字段的联通区域提供视觉上的辅助识别，方便进行数据对比。
42

53
<description>**optional** _object_ | _false_</description>

‎docs/common/connected-area.zh.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
#### connectedArea
2-
31
适用于堆叠柱状图和堆叠条形图，联通区域组件通过绘制同一字段的联通区域提供视觉上的辅助识别，方便进行数据对比。
42

53
<description>**optional** _object_ | _false_</description>

‎docs/common/conversion-tag.en.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
#### conversionTag
2-
31
适用于基础柱形图和基础条形图，转化率组件可以让用户关注到数据的变化比例。
42

53
<description>**optional** _object_ | _false_</description>

‎docs/common/conversion-tag.zh.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
#### conversionTag
2-
31
适用于基础柱形图和基础条形图，转化率组件可以让用户关注到数据的变化比例。
42

53
<description>**optional** _object_ | _false_</description>

‎examples/area/percent/demo/meta.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
{
88
"filename": "basic.ts",
99
"title": {
10-
"zh": "百分比面积图",
11-
"en": "Percented area plot"
10+
"zh": "百分比堆叠面积图",
11+
"en": "Percent Stacked Area"
1212
},
1313
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*vr8gQJiyNmQAAAAAAAAAAAAAARQnAQ"
1414
}

‎examples/bar/basic/demo/meta.json

+14-6
Original file line numberDiff line numberDiff line change
@@ -15,31 +15,39 @@
1515
{
1616
"filename": "color.ts",
1717
"title": {
18-
"zh": "基础条形图 - 自定义颜色",
18+
"zh": "自定义条形图颜色",
1919
"en": "Bar plot color"
2020
},
2121
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*U-D1S4w5HNsAAAAAAAAAAAAAARQnAQ"
2222
},
2323
{
24-
"filename": "width.ts",
24+
"filename": "width-ratio.ts",
2525
"title": {
26-
"zh": "基础条形图 - 柱子宽度",
27-
"en": "Bar plot bar width"
26+
"zh": "指定条形图宽度比例",
27+
"en": "Bar plot column width"
2828
},
2929
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uqtcQJ-N-qUAAAAAAAAAAAAAARQnAQ"
3030
},
31+
{
32+
"filename": "width.ts",
33+
"title": {
34+
"zh": "指定条形图最小最大宽度",
35+
"en": "Bar plot with customize width"
36+
},
37+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/E6pUfKKBCh/bef42127-d21a-43c6-8a89-89bb3ba41a9f.png"
38+
},
3139
{
3240
"filename": "scrollbar.ts",
3341
"title": {
34-
"zh": "基础条形图 - 滚动条",
42+
"zh": "带缩略轴条形图",
3543
"en": "Bar chart with scrollbar"
3644
},
3745
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*01-mRqASP78AAAAAAAAAAAAAARQnAQ"
3846
},
3947
{
4048
"filename": "conversion-tag.ts",
4149
"title": {
42-
"zh": "基础条形图 - 转化率",
50+
"zh": "带转化率条形图",
4351
"en": "Bar plot conversion tag"
4452
},
4553
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*QPt7QbZ726QAAAAAAAAAAAAAARQnAQ"

‎examples/bar/basic/demo/width-ratio.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Bar } from '@antv/g2plot';
2+
3+
const data = [
4+
{
5+
type: '家具家电',
6+
sales: 38,
7+
},
8+
{
9+
type: '粮油副食',
10+
sales: 52,
11+
},
12+
{
13+
type: '生鲜水果',
14+
sales: 61,
15+
},
16+
{
17+
type: '美容洗护',
18+
sales: 145,
19+
},
20+
{
21+
type: '母婴用品',
22+
sales: 48,
23+
},
24+
{
25+
type: '进口食品',
26+
sales: 38,
27+
},
28+
{
29+
type: '食品饮料',
30+
sales: 38,
31+
},
32+
{
33+
type: '家庭清洁',
34+
sales: 38,
35+
},
36+
];
37+
38+
const barPlot = new Bar('container', {
39+
data,
40+
xField: 'sales',
41+
yField: 'type',
42+
barWidthRatio: 0.8,
43+
meta: {
44+
type: {
45+
alias: '类别',
46+
},
47+
sales: {
48+
alias: '销售额',
49+
},
50+
},
51+
});
52+
53+
barPlot.render();

‎examples/bar/basic/demo/width.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ const barPlot = new Bar('container', {
3939
data,
4040
xField: 'sales',
4141
yField: 'type',
42-
barWidthRatio: 0.8,
4342
meta: {
4443
type: {
4544
alias: '类别',
@@ -48,6 +47,8 @@ const barPlot = new Bar('container', {
4847
alias: '销售额',
4948
},
5049
},
50+
minBarWidth: 20,
51+
maxBarWidth: 20,
5152
});
5253

5354
barPlot.render();

‎examples/column/basic/demo/meta.json

+18-10
Original file line numberDiff line numberDiff line change
@@ -15,50 +15,58 @@
1515
{
1616
"filename": "color.ts",
1717
"title": {
18-
"zh": "基础柱状图 - 自定义颜色",
18+
"zh": "自定义柱状图颜色",
1919
"en": "Column plot color"
2020
},
2121
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*dr27SafKNzIAAAAAAAAAAAAAARQnAQ"
2222
},
2323
{
24-
"filename": "width.ts",
24+
"filename": "width-ratio.ts",
2525
"title": {
26-
"zh": "基础柱状图 - 柱子宽度",
26+
"zh": "指定柱状图宽度比例",
2727
"en": "Column plot column width"
2828
},
2929
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*92VnSrkQLeAAAAAAAAAAAABkARQnAQ"
3030
},
3131
{
32-
"filename": "region-annotation.ts",
32+
"filename": "width.ts",
3333
"title": {
34-
"zh": "带辅助框标注的基础柱状图",
35-
"en": "Basic column plot with region annotation"
34+
"zh": "指定柱状图最小最大宽度",
35+
"en": "Column plot with customize width"
3636
},
37-
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*FOmATLFeuxkAAAAAAAAAAAAAARQnAQ"
37+
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/VXpimaHvuV/6fbe7c39-c14a-493c-ad45-4b335ab24ba9.png"
3838
},
3939
{
4040
"filename": "slider.ts",
4141
"title": {
42-
"zh": "基础柱状图 - 缩略轴",
42+
"zh": "带缩略轴柱状图",
4343
"en": "Column plot slider"
4444
},
4545
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*QhoHQ4QIts0AAAAAAAAAAAAAARQnAQ"
4646
},
4747
{
4848
"filename": "scrollbar.ts",
4949
"title": {
50-
"zh": "基础柱状图 - 滚动条",
50+
"zh": "带滚动条柱状图",
5151
"en": "Column plot scroll bar"
5252
},
5353
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*IkdWTaXf4vAAAAAAAAAAAABkARQnAQ"
5454
},
5555
{
5656
"filename": "conversion-tag.ts",
5757
"title": {
58-
"zh": "基础柱状图 - 转化率",
58+
"zh": "带转化率柱状图",
5959
"en": "Column plot conversion tag"
6060
},
6161
"screenshot": "https://gw.alicdn.com/tfs/TB1u3.cvUY1gK0jSZFMXXaWcVXa-1638-1228.png"
62+
},
63+
{
64+
"filename": "region-annotation.ts",
65+
"title": {
66+
"zh": "带辅助框标注的基础柱状图",
67+
"en": "Basic column plot with region annotation"
68+
},
69+
"screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*FOmATLFeuxkAAAAAAAAAAAAAARQnAQ"
6270
}
6371
]
6472
}

‎examples/column/basic/demo/width-ratio.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Column } from '@antv/g2plot';
2+
3+
const data = [
4+
{
5+
type: '家具家电',
6+
sales: 38,
7+
},
8+
{
9+
type: '粮油副食',
10+
sales: 52,
11+
},
12+
{
13+
type: '生鲜水果',
14+
sales: 61,
15+
},
16+
{
17+
type: '美容洗护',
18+
sales: 145,
19+
},
20+
{
21+
type: '母婴用品',
22+
sales: 48,
23+
},
24+
{
25+
type: '进口食品',
26+
sales: 38,
27+
},
28+
{
29+
type: '食品饮料',
30+
sales: 38,
31+
},
32+
{
33+
type: '家庭清洁',
34+
sales: 38,
35+
},
36+
];
37+
38+
const columnPlot = new Column('container', {
39+
data,
40+
xField: 'type',
41+
yField: 'sales',
42+
columnWidthRatio: 0.8,
43+
xAxis: {
44+
label: {
45+
autoHide: true,
46+
autoRotate: false,
47+
},
48+
},
49+
meta: {
50+
type: {
51+
alias: '类别',
52+
},
53+
sales: {
54+
alias: '销售额',
55+
},
56+
},
57+
});
58+
59+
columnPlot.render();

‎examples/column/basic/demo/width.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ const columnPlot = new Column('container', {
3939
data,
4040
xField: 'type',
4141
yField: 'sales',
42-
columnWidthRatio: 0.8,
4342
xAxis: {
4443
label: {
4544
autoHide: true,
@@ -54,6 +53,8 @@ const columnPlot = new Column('container', {
5453
alias: '销售额',
5554
},
5655
},
56+
minColumnWidth: 20,
57+
maxColumnWidth: 20,
5758
});
5859

5960
columnPlot.render();

0 commit comments

Comments
 (0)