feat: column and bar plot support pixel width setting (#2156)

* feat(column-width): 柱条形图支持配置最小、最大宽度和组间间距和组内间距 * docs(💄): 增加柱条形图的最小、最大宽度设置的 demo 和文档 * revert: 暂时不开放 interval 间距设置 * docs(demo): 更新 demo 截图
antvis · Dec 29, 2020 · db09fa4 · db09fa4
1 parent 72bbfa4
commit db09fa4
Show file tree

Hide file tree

Showing 19 changed files with 229 additions and 31 deletions.
diff --git a/docs/api/plots/bar.en.md b/docs/api/plots/bar.en.md
@@ -63,6 +63,18 @@ Whether the plot is Percent Bar. When isPercent is `true`, isStack must be `true
 
 The ratio of bar width( Range:[0-1] ).
 
+#### minBarWidth
+
+<description>**optional** _number_</description>
+
+The min width of bar, pixel value。
+
+#### maxBarWidth
+
+<description>**optional** _number_</description>
+
+The max width of bar, pixel value。
+
 #### marginRatio
 
 <description>**optional** _number_</description>

diff --git a/docs/api/plots/bar.zh.md b/docs/api/plots/bar.zh.md
@@ -63,6 +63,17 @@ order: 3
 
 条形图宽度占比 [0-1]。
 
+#### minBarWidth
+
+<description>**optional** _number_</description>
+
+条形图最小宽度设置，像素值。
+
+#### maxBarWidth
+
+<description>**optional** _number_</description>
+
+条形图最大宽度设置，像素值。
 #### marginRatio
 
 <description>**optional** _number_</description>

diff --git a/docs/api/plots/column.en.md b/docs/api/plots/column.en.md
@@ -63,6 +63,18 @@ order: 2
 
 柱状图宽度占比 [0-1]。
 
+#### minColumnWidth
+
+<description>**optional** _number_</description>
+
+The min width of column, pixel value。
+
+#### maxColumnWidth
+
+<description>**optional** _number_</description>
+
+The max width of column, pixel value。
+
 #### marginRatio
 
 <description>**optional** _number_</description>

diff --git a/docs/api/plots/column.zh.md b/docs/api/plots/column.zh.md
@@ -65,6 +65,18 @@ order: 2
 
 柱状图宽度占比 [0-1]。
 
+#### minColumnWidth
+
+<description>**optional** _number_</description>
+
+柱状图最小宽度设置，像素值。
+
+#### maxColumnWidth
+
+<description>**optional** _number_</description>
+
+柱状图最大宽度设置，像素值。
+
 #### marginRatio
 
 <description>**optional** _number_</description>

diff --git a/docs/common/connected-area.en.md b/docs/common/connected-area.en.md
@@ -1,5 +1,3 @@
-#### connectedArea
-
 适用于堆叠柱状图和堆叠条形图，联通区域组件通过绘制同一字段的联通区域提供视觉上的辅助识别，方便进行数据对比。
 
 <description>**optional** _object_ | _false_</description>

diff --git a/docs/common/connected-area.zh.md b/docs/common/connected-area.zh.md
@@ -1,5 +1,3 @@
-#### connectedArea
-
 适用于堆叠柱状图和堆叠条形图，联通区域组件通过绘制同一字段的联通区域提供视觉上的辅助识别，方便进行数据对比。
 
 <description>**optional** _object_ | _false_</description>

diff --git a/docs/common/conversion-tag.en.md b/docs/common/conversion-tag.en.md
@@ -1,5 +1,3 @@
-#### conversionTag
-
 适用于基础柱形图和基础条形图，转化率组件可以让用户关注到数据的变化比例。
 
 <description>**optional** _object_ | _false_</description>

diff --git a/docs/common/conversion-tag.zh.md b/docs/common/conversion-tag.zh.md
@@ -1,5 +1,3 @@
-#### conversionTag
-
 适用于基础柱形图和基础条形图，转化率组件可以让用户关注到数据的变化比例。
 
 <description>**optional** _object_ | _false_</description>

diff --git a/examples/area/percent/demo/meta.json b/examples/area/percent/demo/meta.json
@@ -7,8 +7,8 @@
     {
       "filename": "basic.ts",
       "title": {
-        "zh": "百分比面积图",
-        "en": "Percented area plot"
+        "zh": "百分比堆叠面积图",
+        "en": "Percent Stacked Area"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*vr8gQJiyNmQAAAAAAAAAAAAAARQnAQ"
     }

diff --git a/examples/bar/basic/demo/meta.json b/examples/bar/basic/demo/meta.json
@@ -15,31 +15,39 @@
     {
       "filename": "color.ts",
       "title": {
-        "zh": "基础条形图 - 自定义颜色",
+        "zh": "自定义条形图颜色",
         "en": "Bar plot color"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*U-D1S4w5HNsAAAAAAAAAAAAAARQnAQ"
     },
     {
-      "filename": "width.ts",
+      "filename": "width-ratio.ts",
       "title": {
-        "zh": "基础条形图 - 柱子宽度",
-        "en": "Bar plot bar width"
+        "zh": "指定条形图宽度比例",
+        "en": "Bar plot column width"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uqtcQJ-N-qUAAAAAAAAAAAAAARQnAQ"
     },
+    {
+      "filename": "width.ts",
+      "title": {
+        "zh": "指定条形图最小最大宽度",
+        "en": "Bar plot with customize width"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/E6pUfKKBCh/bef42127-d21a-43c6-8a89-89bb3ba41a9f.png"
+    },
     {
       "filename": "scrollbar.ts",
       "title": {
-        "zh": "基础条形图 - 滚动条",
+        "zh": "带缩略轴条形图",
         "en": "Bar chart with scrollbar"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*01-mRqASP78AAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "conversion-tag.ts",
       "title": {
-        "zh": "基础条形图 - 转化率",
+        "zh": "带转化率条形图",
         "en": "Bar plot conversion tag"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*QPt7QbZ726QAAAAAAAAAAAAAARQnAQ"

diff --git a/examples/bar/basic/demo/width-ratio.ts b/examples/bar/basic/demo/width-ratio.ts
@@ -0,0 +1,53 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    type: '家具家电',
+    sales: 38,
+  },
+  {
+    type: '粮油副食',
+    sales: 52,
+  },
+  {
+    type: '生鲜水果',
+    sales: 61,
+  },
+  {
+    type: '美容洗护',
+    sales: 145,
+  },
+  {
+    type: '母婴用品',
+    sales: 48,
+  },
+  {
+    type: '进口食品',
+    sales: 38,
+  },
+  {
+    type: '食品饮料',
+    sales: 38,
+  },
+  {
+    type: '家庭清洁',
+    sales: 38,
+  },
+];
+
+const barPlot = new Bar('container', {
+  data,
+  xField: 'sales',
+  yField: 'type',
+  barWidthRatio: 0.8,
+  meta: {
+    type: {
+      alias: '类别',
+    },
+    sales: {
+      alias: '销售额',
+    },
+  },
+});
+
+barPlot.render();
diff --git a/examples/bar/basic/demo/width.ts b/examples/bar/basic/demo/width.ts
@@ -39,7 +39,6 @@ const barPlot = new Bar('container', {
   data,
   xField: 'sales',
   yField: 'type',
-  barWidthRatio: 0.8,
   meta: {
     type: {
       alias: '类别',
@@ -48,6 +47,8 @@ const barPlot = new Bar('container', {
       alias: '销售额',
     },
   },
+  minBarWidth: 20,
+  maxBarWidth: 20,
 });
 
 barPlot.render();
diff --git a/examples/column/basic/demo/meta.json b/examples/column/basic/demo/meta.json
@@ -15,50 +15,58 @@
     {
       "filename": "color.ts",
       "title": {
-        "zh": "基础柱状图 - 自定义颜色",
+        "zh": "自定义柱状图颜色",
         "en": "Column plot color"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*dr27SafKNzIAAAAAAAAAAAAAARQnAQ"
     },
     {
-      "filename": "width.ts",
+      "filename": "width-ratio.ts",
       "title": {
-        "zh": "基础柱状图 - 柱子宽度",
+        "zh": "指定柱状图宽度比例",
         "en": "Column plot column width"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*92VnSrkQLeAAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "region-annotation.ts",
+      "filename": "width.ts",
       "title": {
-        "zh": "带辅助框标注的基础柱状图",
-        "en": "Basic column plot with region annotation"
+        "zh": "指定柱状图最小最大宽度",
+        "en": "Column plot with customize width"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*FOmATLFeuxkAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/VXpimaHvuV/6fbe7c39-c14a-493c-ad45-4b335ab24ba9.png"
     },
     {
       "filename": "slider.ts",
       "title": {
-        "zh": "基础柱状图 - 缩略轴",
+        "zh": "带缩略轴柱状图",
         "en": "Column plot slider"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*QhoHQ4QIts0AAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "scrollbar.ts",
       "title": {
-        "zh": "基础柱状图 - 滚动条",
+        "zh": "带滚动条柱状图",
         "en": "Column plot scroll bar"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*IkdWTaXf4vAAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "conversion-tag.ts",
       "title": {
-        "zh": "基础柱状图 - 转化率",
+        "zh": "带转化率柱状图",
         "en": "Column plot conversion tag"
       },
       "screenshot": "https://gw.alicdn.com/tfs/TB1u3.cvUY1gK0jSZFMXXaWcVXa-1638-1228.png"
+    },
+    {
+      "filename": "region-annotation.ts",
+      "title": {
+        "zh": "带辅助框标注的基础柱状图",
+        "en": "Basic column plot with region annotation"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*FOmATLFeuxkAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/column/basic/demo/width-ratio.ts b/examples/column/basic/demo/width-ratio.ts
@@ -0,0 +1,59 @@
+import { Column } from '@antv/g2plot';
+
+const data = [
+  {
+    type: '家具家电',
+    sales: 38,
+  },
+  {
+    type: '粮油副食',
+    sales: 52,
+  },
+  {
+    type: '生鲜水果',
+    sales: 61,
+  },
+  {
+    type: '美容洗护',
+    sales: 145,
+  },
+  {
+    type: '母婴用品',
+    sales: 48,
+  },
+  {
+    type: '进口食品',
+    sales: 38,
+  },
+  {
+    type: '食品饮料',
+    sales: 38,
+  },
+  {
+    type: '家庭清洁',
+    sales: 38,
+  },
+];
+
+const columnPlot = new Column('container', {
+  data,
+  xField: 'type',
+  yField: 'sales',
+  columnWidthRatio: 0.8,
+  xAxis: {
+    label: {
+      autoHide: true,
+      autoRotate: false,
+    },
+  },
+  meta: {
+    type: {
+      alias: '类别',
+    },
+    sales: {
+      alias: '销售额',
+    },
+  },
+});
+
+columnPlot.render();
diff --git a/examples/column/basic/demo/width.ts b/examples/column/basic/demo/width.ts
@@ -39,7 +39,6 @@ const columnPlot = new Column('container', {
   data,
   xField: 'type',
   yField: 'sales',
-  columnWidthRatio: 0.8,
   xAxis: {
     label: {
       autoHide: true,
@@ -54,6 +53,8 @@ const columnPlot = new Column('container', {
       alias: '销售额',
     },
   },
+  minColumnWidth: 20,
+  maxColumnWidth: 20,
 });
 
 columnPlot.render();