feat: 柱条形图支持组间和组内padding的像素级设置

docs/common/bar-style.en.md

@@ -1,3 +1,19 @@
+#### intervalPadding
+
+<description>**optional**, _number_</description>
+
+Specify the padding of interval, pixel value.  Used in GroupColumn plot.
+
+<playground path='bar/grouped/interval-padding.ts' rid='rect1'></playground>
+
+#### dodgePadding
+
+<description>**optional**, _number_</description>
+
+Specify the padding of interval on the same group, pixel value. Used in GroupColumn plot.
+
+<playground path='bar/grouped/dodge-padding.ts' rid='rect2'></playground>
+
 #### minBarWidth
 
 <description>**optional**, _number_</description>

docs/common/bar-style.zh.md

@@ -1,3 +1,18 @@
+#### intervalPadding
+
+<description>**可选**, _number_</description>
+
+功能描述: 分组柱状图的组间间距调整，像素级别。
+
+<playground path='bar/grouped/interval-padding.ts' rid='rect1'></playground>
+
+#### dodgePadding
+
+<description>**可选**, _number_</description>
+
+功能描述: 分组柱状图的组内柱子间距调整，像素级别。
+
+<playground path='bar/grouped/dodge-padding.ts' rid='rect2'></playground>
 
 #### minBarWidth
 

docs/common/column-style.en.md

@@ -1,3 +1,19 @@
+#### intervalPadding
+
+<description>**optional**, _number_</description>
+
+Specify the padding of interval, pixel value.  Used in GroupColumn plot.
+
+<playground path='column/grouped/interval-padding.ts' rid='rect1'></playground>
+
+#### dodgePadding
+
+<description>**optional**, _number_</description>
+
+Specify the padding of interval on the same group, pixel value. Used in GroupColumn plot.
+
+<playground path='column/grouped/dodge-padding.ts' rid='rect2'></playground>
+
 #### minColumnWidth
 
 <description>**optional**, _number_</description>

docs/common/column-style.zh.md

@@ -1,3 +1,18 @@
+#### intervalPadding
+
+<description>**可选**, _number_</description>
+
+功能描述: 分组柱状图的组间间距调整，像素级别。
+
+<playground path='column/grouped/interval-padding.ts' rid='rect1'></playground>
+
+#### dodgePadding
+
+<description>**可选**, _number_</description>
+
+功能描述: 分组柱状图的组内柱子间距调整，像素级别。
+
+<playground path='column/grouped/dodge-padding.ts' rid='rect2'></playground>
 
 #### minColumnWidth
 

examples/bar/grouped/demo/dodge-padding.ts

@@ -0,0 +1,78 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    label: 'Mon.',
+    type: 'series1',
+    value: 2800,
+  },
+  {
+    label: 'Mon.',
+    type: 'series2',
+    value: 2260,
+  },
+  {
+    label: 'Tues.',
+    type: 'series1',
+    value: 1800,
+  },
+  {
+    label: 'Tues.',
+    type: 'series2',
+    value: 1300,
+  },
+  {
+    label: 'Wed.',
+    type: 'series1',
+    value: 950,
+  },
+  {
+    label: 'Wed.',
+    type: 'series2',
+    value: 900,
+  },
+  {
+    label: 'Thur.',
+    type: 'series1',
+    value: 500,
+  },
+  {
+    label: 'Thur.',
+    type: 'series2',
+    value: 390,
+  },
+  {
+    label: 'Fri.',
+    type: 'series1',
+    value: 170,
+  },
+  {
+    label: 'Fri.',
+    type: 'series2',
+    value: 100,
+  },
+];
+
+const stackedBarPlot = new Bar('container', {
+  data,
+  isGroup: true,
+  xField: 'value',
+  yField: 'label',
+  seriesField: 'type',
+  dodgePadding: 4,
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: 'middle', // 'left', 'middle', 'right'
+    // 可配置附加的布局方法
+    layout: [
+      // 柱形图数据标签位置自动调整
+      { type: 'interval-adjust-position' },
+      // 数据标签防遮挡
+      { type: 'interval-hide-overlap' },
+      // 数据标签文颜色自动调整
+      { type: 'adjust-color' },
+    ],
+  },
+});
+
+stackedBarPlot.render();

examples/bar/grouped/demo/interval-padding.ts

@@ -0,0 +1,79 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    label: 'Mon.',
+    type: 'series1',
+    value: 2800,
+  },
+  {
+    label: 'Mon.',
+    type: 'series2',
+    value: 2260,
+  },
+  {
+    label: 'Tues.',
+    type: 'series1',
+    value: 1800,
+  },
+  {
+    label: 'Tues.',
+    type: 'series2',
+    value: 1300,
+  },
+  {
+    label: 'Wed.',
+    type: 'series1',
+    value: 950,
+  },
+  {
+    label: 'Wed.',
+    type: 'series2',
+    value: 900,
+  },
+  {
+    label: 'Thur.',
+    type: 'series1',
+    value: 500,
+  },
+  {
+    label: 'Thur.',
+    type: 'series2',
+    value: 390,
+  },
+  {
+    label: 'Fri.',
+    type: 'series1',
+    value: 170,
+  },
+  {
+    label: 'Fri.',
+    type: 'series2',
+    value: 100,
+  },
+];
+
+const stackedBarPlot = new Bar('container', {
+  data,
+  isGroup: true,
+  xField: 'value',
+  yField: 'label',
+  seriesField: 'type',
+  dodgePadding: 4,
+  intervalPadding: 20,
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: 'middle', // 'left', 'middle', 'right'
+    // 可配置附加的布局方法
+    layout: [
+      // 柱形图数据标签位置自动调整
+      { type: 'interval-adjust-position' },
+      // 数据标签防遮挡
+      { type: 'interval-hide-overlap' },
+      // 数据标签文颜色自动调整
+      { type: 'adjust-color' },
+    ],
+  },
+});
+
+stackedBarPlot.render();

examples/bar/grouped/demo/meta.json

@@ -19,6 +19,22 @@
         "en": "Bar plot with corner-radius"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vFQNz1dCaD/21d77486-a9a3-4287-bc49-24fc40ad4800.png"
+    },
+    {
+      "filename": "dodge-padding.ts",
+      "title": {
+        "zh": "分组条形图像素级组内柱子间距",
+        "en": "DodgePadding of grouped bar plot"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/pb4RmT767Q/953ed207-ec9b-4d0b-8f19-dadd7e016610.png"
+    },
+    {
+      "filename": "interval-padding.ts",
+      "title": {
+        "zh": "分组条形图像素级组间间距",
+        "en": "IntervalPadding of grouped bar plot"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%24aj8gaJ%267H/8d4e1840-3aa0-44af-bae4-6f6aa4de47e0.png"
     }
   ]
 }

examples/column/grouped/demo/dodge-padding.ts

@@ -0,0 +1,30 @@
+import { Column } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/iPY8JFnxdb/dodge-padding.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const plot = new Column('container', {
+      data,
+      isGroup: true,
+      xField: '月份',
+      yField: '月均降雨量',
+      seriesField: 'name',
+      // 分组柱状图 组内柱子间的间距 (像素级别)
+      dodgePadding: 2,
+      label: {
+        // 可手动配置 label 数据标签位置
+        position: 'middle', // 'top', 'middle', 'bottom'
+        // 可配置附加的布局方法
+        layout: [
+          // 柱形图数据标签位置自动调整
+          { type: 'interval-adjust-position' },
+          // 数据标签防遮挡
+          { type: 'interval-hide-overlap' },
+          // 数据标签文颜色自动调整
+          { type: 'adjust-color' },
+        ],
+      },
+    });
+
+    plot.render();
+  });

examples/column/grouped/demo/interval-padding.ts

@@ -0,0 +1,32 @@
+import { Column } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/iPY8JFnxdb/dodge-padding.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const plot = new Column('container', {
+      data,
+      isGroup: true,
+      xField: '月份',
+      yField: '月均降雨量',
+      seriesField: 'name',
+      // 分组柱状图 组内柱子间的间距 (像素级别)
+      dodgePadding: 2,
+      // 分组柱状图 组间的间距 (像素级别)
+      intervalPadding: 20,
+      label: {
+        // 可手动配置 label 数据标签位置
+        position: 'middle', // 'top', 'middle', 'bottom'
+        // 可配置附加的布局方法
+        layout: [
+          // 柱形图数据标签位置自动调整
+          { type: 'interval-adjust-position' },
+          // 数据标签防遮挡
+          { type: 'interval-hide-overlap' },
+          // 数据标签文颜色自动调整
+          { type: 'adjust-color' },
+        ],
+      },
+    });
+
+    plot.render();
+  });

examples/column/grouped/demo/meta.json

@@ -35,6 +35,22 @@
         "en": "Stacked grouped column plot"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/9ExrwrpVrA/908eff62-1132-4dbb-8c3c-9cbe8183c6d8.png"
+    },
+    {
+      "filename": "dodge-padding.ts",
+      "title": {
+        "zh": "分组柱状图像素级组内柱子间距",
+        "en": "DodgePadding of grouped column plot"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/VL8xZlzwm5/2d96f1be-83c6-47c8-8a02-6023ecdbe035.png"
+    },
+    {
+      "filename": "interval-padding.ts",
+      "title": {
+        "zh": "分组柱状图像素级组间间距",
+        "en": "IntervalPadding of grouped column plot"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/lRokVhHkrr/61d333f8-9d15-4327-b70f-8e026453cf70.png"
     }
   ]
 }

src/adaptor/geometries/interval.ts

@@ -18,8 +18,12 @@ export interface IntervalGeometryOptions extends GeometryOptions {
   readonly isStack?: boolean;
   /** 柱状图宽度占比 [0-1] */
   readonly widthRatio?: number;
+  /** 分组间柱子之间的组间间距(像素级)，仅对分组柱状图适用 */
+  readonly intervalPadding?: number;
   /** 分组中柱子之间的间距 [0-1]，仅对分组柱状图适用 */
   readonly marginRatio?: number;
+  /** 分组中柱子之间的组内间距(像素级)，仅对分组柱状图适用 */
+  readonly dodgePadding?: number;
   /** 柱状图最小宽度（像素） */
   readonly minColumnWidth?: number;
   /** 柱状图最大宽度（像素） */
@@ -82,7 +86,18 @@ function otherAdaptor<O extends IntervalGeometryOptions>(params: Params<O>): Par
 
 export function interval<O extends IntervalGeometryOptions>(params: Params<O>): Params<O> {
   const { options } = params;
-  const { xField, yField, interval, seriesField, tooltip, minColumnWidth, maxColumnWidth, columnBackground } = options;
+  const {
+    xField,
+    yField,
+    interval,
+    seriesField,
+    tooltip,
+    minColumnWidth,
+    maxColumnWidth,
+    columnBackground,
+    dodgePadding,
+    intervalPadding,
+  } = options;
 
   const { fields, formatter } = getTooltipMapping(tooltip, [xField, yField, seriesField]);
 
@@ -98,7 +113,7 @@ export function interval<O extends IntervalGeometryOptions>(params: Params<O>):
               tooltip: formatter,
               ...interval,
             },
-            args: { minColumnWidth, maxColumnWidth, background: columnBackground },
+            args: { dodgePadding, intervalPadding, minColumnWidth, maxColumnWidth, background: columnBackground },
           },
         })
       )