diff --git a/__tests__/data/box.ts b/__tests__/data/box.ts new file mode 100644 index 0000000000..b9b9bb3679 --- /dev/null +++ b/__tests__/data/box.ts @@ -0,0 +1,10 @@ +export const boxData = [ + { x: 'Oceania', low: 1, q1: 9, median: 16, q3: 22, high: 24 }, + { x: 'East Europe', low: 1, q1: 5, median: 8, q3: 12, high: 16 }, + { x: 'Australia', low: 1, q1: 8, median: 12, q3: 19, high: 26 }, + { x: 'South America', low: 2, q1: 8, median: 12, q3: 21, high: 28 }, + { x: 'North Africa', low: 1, q1: 8, median: 14, q3: 18, high: 24 }, + { x: 'North America', low: 3, q1: 10, median: 17, q3: 28, high: 30 }, + { x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22 }, + { x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16 }, +]; diff --git a/examples/bar/basic/demo/basic.ts b/examples/bar/basic/demo/basic.ts new file mode 100644 index 0000000000..8ffa18249b --- /dev/null +++ b/examples/bar/basic/demo/basic.ts @@ -0,0 +1,52 @@ +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', + meta: { + type: { + alias: '类别', + }, + sales: { + alias: '销售额', + }, + }, +}); + +barPlot.render(); diff --git a/examples/bar/basic/demo/color.ts b/examples/bar/basic/demo/color.ts new file mode 100644 index 0000000000..338c27895b --- /dev/null +++ b/examples/bar/basic/demo/color.ts @@ -0,0 +1,57 @@ +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', + colorField: 'type', + color: (val) => { + return val === '美容洗护' ? 'red' : 'green'; + }, + legend: false, + meta: { + type: { + alias: '类别', + }, + sales: { + alias: '销售额', + }, + }, +}); + +barPlot.render(); diff --git a/examples/bar/basic/demo/label-position.ts b/examples/bar/basic/demo/label-position.ts new file mode 100644 index 0000000000..456383b446 --- /dev/null +++ b/examples/bar/basic/demo/label-position.ts @@ -0,0 +1,55 @@ +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', + label: { + position: 'middle', + }, + meta: { + type: { + alias: '类别', + }, + sales: { + alias: '销售额', + }, + }, +}); + +barPlot.render(); diff --git a/examples/bar/basic/demo/label.ts b/examples/bar/basic/demo/label.ts new file mode 100644 index 0000000000..02349a029b --- /dev/null +++ b/examples/bar/basic/demo/label.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', + label: {}, + meta: { + type: { + alias: '类别', + }, + sales: { + alias: '销售额', + }, + }, +}); + +barPlot.render(); diff --git a/examples/bar/basic/demo/meta.json b/examples/bar/basic/demo/meta.json new file mode 100644 index 0000000000..898b11ff8f --- /dev/null +++ b/examples/bar/basic/demo/meta.json @@ -0,0 +1,48 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "basic.ts", + "title": { + "zh": "基础条形图", + "en": "Basic Bar chart" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "label.ts", + "title": { + "zh": "基础条形图-图形标签", + "en": "Bar chart label" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "label-position.ts", + "title": { + "zh": "基础条形图-图形标签位置", + "en": "Bar chart label position" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "color.ts", + "title": { + "zh": "基础条形图 - 自定义颜色", + "en": "Bar chart color" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "width.ts", + "title": { + "zh": "基础条形图 - 柱子宽度", + "en": "Bar chart Bar width" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ" + } + ] +} \ No newline at end of file diff --git a/examples/bar/basic/demo/width.ts b/examples/bar/basic/demo/width.ts new file mode 100644 index 0000000000..dad9018c05 --- /dev/null +++ b/examples/bar/basic/demo/width.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.618, + meta: { + type: { + alias: '类别', + }, + sales: { + alias: '销售额', + }, + }, +}); + +barPlot.render(); diff --git a/examples/bar/basic/design.en.md b/examples/bar/basic/design.en.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/bar/basic/design.en.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/bar/basic/design.zh.md b/examples/bar/basic/design.zh.md new file mode 100644 index 0000000000..a870896627 --- /dev/null +++ b/examples/bar/basic/design.zh.md @@ -0,0 +1,29 @@ +--- +title: 设计规范 +--- + +## 何时使用 + +条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| ---------------- | -------------------------------------------------------------------------------------------------- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势 | + +## 用法建议 + + + +## 元素 + + + +- X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。 +- Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。 +- 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +- 标签：用来解释数据点的值。 +- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/bar/basic/index.en.md b/examples/bar/basic/index.en.md new file mode 100644 index 0000000000..0712da6ec7 --- /dev/null +++ b/examples/bar/basic/index.en.md @@ -0,0 +1,6 @@ +--- +title: Bar Chart +order: 0 +--- + +Description about this component. diff --git a/examples/bar/basic/index.zh.md b/examples/bar/basic/index.zh.md new file mode 100644 index 0000000000..deb1849c6d --- /dev/null +++ b/examples/bar/basic/index.zh.md @@ -0,0 +1,6 @@ +--- +title: 基础条形图 +order: 0 +--- + +条形图即是横向柱状图，相比基础柱状图，条形图的分类文本可以横向排布，因此适合用于分类较多的场景。 diff --git a/examples/bar/grouped/demo/basic.ts b/examples/bar/grouped/demo/basic.ts new file mode 100644 index 0000000000..d32d867bd1 --- /dev/null +++ b/examples/bar/grouped/demo/basic.ts @@ -0,0 +1,104 @@ +import { Bar } from '@antv/g2plot'; + +const data = [ + { + year: '1991', + value: 3, + type: 'Lon', + }, + { + year: '1992', + value: 4, + type: 'Lon', + }, + { + year: '1993', + value: 3.5, + type: 'Lon', + }, + { + year: '1994', + value: 5, + type: 'Lon', + }, + { + year: '1995', + value: 4.9, + type: 'Lon', + }, + { + year: '1996', + value: 6, + type: 'Lon', + }, + { + year: '1997', + value: 7, + type: 'Lon', + }, + { + year: '1998', + value: 9, + type: 'Lon', + }, + { + year: '1999', + value: 13, + type: 'Lon', + }, + { + year: '1991', + value: 3, + type: 'Bor', + }, + { + year: '1992', + value: 4, + type: 'Bor', + }, + { + year: '1993', + value: 3.5, + type: 'Bor', + }, + { + year: '1994', + value: 5, + type: 'Bor', + }, + { + year: '1995', + value: 4.9, + type: 'Bor', + }, + { + year: '1996', + value: 6, + type: 'Bor', + }, + { + year: '1997', + value: 7, + type: 'Bor', + }, + { + year: '1998', + value: 9, + type: 'Bor', + }, + { + year: '1999', + value: 13, + type: 'Bor', + }, +]; + +const stackedBarPlot = new Bar('container', { + data, + isGroup: true, + xField: 'value', + yField: 'year', + groupField: 'type', +}); + +stackedBarPlot.render(); diff --git a/examples/bar/grouped/demo/label-position.ts b/examples/bar/grouped/demo/label-position.ts new file mode 100644 index 0000000000..b472300115 --- /dev/null +++ b/examples/bar/grouped/demo/label-position.ts @@ -0,0 +1,107 @@ +import { Bar } from '@antv/g2plot'; + +const data = [ + { + year: '1991', + value: 3, + type: 'Lon', + }, + { + year: '1992', + value: 4, + type: 'Lon', + }, + { + year: '1993', + value: 3.5, + type: 'Lon', + }, + { + year: '1994', + value: 5, + type: 'Lon', + }, + { + year: '1995', + value: 4.9, + type: 'Lon', + }, + { + year: '1996', + value: 6, + type: 'Lon', + }, + { + year: '1997', + value: 7, + type: 'Lon', + }, + { + year: '1998', + value: 9, + type: 'Lon', + }, + { + year: '1999', + value: 13, + type: 'Lon', + }, + { + year: '1991', + value: 3, + type: 'Bor', + }, + { + year: '1992', + value: 4, + type: 'Bor', + }, + { + year: '1993', + value: 3.5, + type: 'Bor', + }, + { + year: '1994', + value: 5, + type: 'Bor', + }, + { + year: '1995', + value: 4.9, + type: 'Bor', + }, + { + year: '1996', + value: 6, + type: 'Bor', + }, + { + year: '1997', + value: 7, + type: 'Bor', + }, + { + year: '1998', + value: 9, + type: 'Bor', + }, + { + year: '1999', + value: 13, + type: 'Bor', + }, +]; + +const stackedBarPlot = new Bar('container', { + data, + isGroup: true, + xField: 'value', + yField: 'year', + groupField: 'type', + label: { + position: 'middle', + }, +}); + +stackedBarPlot.render(); diff --git a/examples/bar/grouped/demo/label.ts b/examples/bar/grouped/demo/label.ts new file mode 100644 index 0000000000..6c26a7e853 --- /dev/null +++ b/examples/bar/grouped/demo/label.ts @@ -0,0 +1,105 @@ +import { Bar } from '@antv/g2plot'; + +const data = [ + { + year: '1991', + value: 3, + type: 'Lon', + }, + { + year: '1992', + value: 4, + type: 'Lon', + }, + { + year: '1993', + value: 3.5, + type: 'Lon', + }, + { + year: '1994', + value: 5, + type: 'Lon', + }, + { + year: '1995', + value: 4.9, + type: 'Lon', + }, + { + year: '1996', + value: 6, + type: 'Lon', + }, + { + year: '1997', + value: 7, + type: 'Lon', + }, + { + year: '1998', + value: 9, + type: 'Lon', + }, + { + year: '1999', + value: 13, + type: 'Lon', + }, + { + year: '1991', + value: 3, + type: 'Bor', + }, + { + year: '1992', + value: 4, + type: 'Bor', + }, + { + year: '1993', + value: 3.5, + type: 'Bor', + }, + { + year: '1994', + value: 5, + type: 'Bor', + }, + { + year: '1995', + value: 4.9, + type: 'Bor', + }, + { + year: '1996', + value: 6, + type: 'Bor', + }, + { + year: '1997', + value: 7, + type: 'Bor', + }, + { + year: '1998', + value: 9, + type: 'Bor', + }, + { + year: '1999', + value: 13, + type: 'Bor', + }, +]; + +const stackedBarPlot = new Bar('container', { + data, + isGroup: true, + xField: 'value', + yField: 'year', + groupField: 'type', + label: {}, +}); + +stackedBarPlot.render(); diff --git a/examples/bar/grouped/demo/margin.ts b/examples/bar/grouped/demo/margin.ts new file mode 100644 index 0000000000..86f0fa9f59 --- /dev/null +++ b/examples/bar/grouped/demo/margin.ts @@ -0,0 +1,105 @@ +import { Bar } from '@antv/g2plot'; + +const data = [ + { + year: '1991', + value: 3, + type: 'Lon', + }, + { + year: '1992', + value: 4, + type: 'Lon', + }, + { + year: '1993', + value: 3.5, + type: 'Lon', + }, + { + year: '1994', + value: 5, + type: 'Lon', + }, + { + year: '1995', + value: 4.9, + type: 'Lon', + }, + { + year: '1996', + value: 6, + type: 'Lon', + }, + { + year: '1997', + value: 7, + type: 'Lon', + }, + { + year: '1998', + value: 9, + type: 'Lon', + }, + { + year: '1999', + value: 13, + type: 'Lon', + }, + { + year: '1991', + value: 3, + type: 'Bor', + }, + { + year: '1992', + value: 4, + type: 'Bor', + }, + { + year: '1993', + value: 3.5, + type: 'Bor', + }, + { + year: '1994', + value: 5, + type: 'Bor', + }, + { + year: '1995', + value: 4.9, + type: 'Bor', + }, + { + year: '1996', + value: 6, + type: 'Bor', + }, + { + year: '1997', + value: 7, + type: 'Bor', + }, + { + year: '1998', + value: 9, + type: 'Bor', + }, + { + year: '1999', + value: 13, + type: 'Bor', + }, +]; + +const stackedBarPlot = new Bar('container', { + data, + isGroup: true, + xField: 'value', + yField: 'year', + groupField: 'type', + marginRatio: 1 / 32, +}); + +stackedBarPlot.render(); diff --git a/examples/bar/grouped/demo/meta.json b/examples/bar/grouped/demo/meta.json new file mode 100644 index 0000000000..f8805e60ea --- /dev/null +++ b/examples/bar/grouped/demo/meta.json @@ -0,0 +1,40 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "basic.ts", + "title": { + "zh": "分组条形图", + "en": "Grouped Bar chart" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*a5SmRYq1wmcAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "label.ts", + "title": { + "zh": "分组条形图 - 数据标签", + "en": "Grouped Bar chart label" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*a5SmRYq1wmcAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "label-position.ts", + "title": { + "zh": "分组条形图 - 数据标签位置", + "en": "Grouped Bar chart label position" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*a5SmRYq1wmcAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "margin.ts", + "title": { + "zh": "分组条形图 - 分组间距", + "en": "Grouped Bar chart Bar margin" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*a5SmRYq1wmcAAAAAAAAAAABkARQnAQ" + } + ] +} \ No newline at end of file diff --git a/examples/bar/grouped/design.en.md b/examples/bar/grouped/design.en.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/bar/grouped/design.en.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/bar/grouped/design.zh.md b/examples/bar/grouped/design.zh.md new file mode 100644 index 0000000000..d649873c7a --- /dev/null +++ b/examples/bar/grouped/design.zh.md @@ -0,0 +1,29 @@ +--- +title: 设计规范 +--- + +## 何时使用 + +柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| ---------------- | -------------------------------------------------------------------------------------------------- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 | + +## 用法建议 + + + +## 元素 + + + +- X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。 +- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。 +- 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +- 标签：用来解释数据点的值。 +- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/bar/grouped/index.en.md b/examples/bar/grouped/index.en.md new file mode 100644 index 0000000000..e1e179caf7 --- /dev/null +++ b/examples/bar/grouped/index.en.md @@ -0,0 +1,6 @@ +--- +title: Grouped Bar Chart +order: 3 +--- + +Description about this component. diff --git a/examples/bar/grouped/index.zh.md b/examples/bar/grouped/index.zh.md new file mode 100644 index 0000000000..f1bdccab6c --- /dev/null +++ b/examples/bar/grouped/index.zh.md @@ -0,0 +1,8 @@ +--- +title: 分组条形图 +order: 3 +--- + +分组条形图是基础条形图的扩展形式，适合于在同一个轴上展示不同维度下相同分类的数据。相比于堆叠条形图，分组条形图更适合进行不同维度下同一分类的横向数值的比较，但缺点是无法直观的看到各维度总和的对比。 + +分组条形图和堆叠条形图是一对“矛盾”，一方的缺点恰恰是另一方的优点，可以根据具体场景选择使用。 diff --git a/examples/bar/stacked/demo/basic.ts b/examples/bar/stacked/demo/basic.ts new file mode 100644 index 0000000000..2a7974a21d --- /dev/null +++ b/examples/bar/stacked/demo/basic.ts @@ -0,0 +1,104 @@ +import { Bar } from '@antv/g2plot'; + +const data = [ + { + year: '1991', + value: 3, + type: 'Lon', + }, + { + year: '1992', + value: 4, + type: 'Lon', + }, + { + year: '1993', + value: 3.5, + type: 'Lon', + }, + { + year: '1994', + value: 5, + type: 'Lon', + }, + { + year: '1995', + value: 4.9, + type: 'Lon', + }, + { + year: '1996', + value: 6, + type: 'Lon', + }, + { + year: '1997', + value: 7, + type: 'Lon', + }, + { + year: '1998', + value: 9, + type: 'Lon', + }, + { + year: '1999', + value: 13, + type: 'Lon', + }, + { + year: '1991', + value: 3, + type: 'Bor', + }, + { + year: '1992', + value: 4, + type: 'Bor', + }, + { + year: '1993', + value: 3.5, + type: 'Bor', + }, + { + year: '1994', + value: 5, + type: 'Bor', + }, + { + year: '1995', + value: 4.9, + type: 'Bor', + }, + { + year: '1996', + value: 6, + type: 'Bor', + }, + { + year: '1997', + value: 7, + type: 'Bor', + }, + { + year: '1998', + value: 9, + type: 'Bor', + }, + { + year: '1999', + value: 13, + type: 'Bor', + }, +]; + +const stackedBarPlot = new Bar('container', { + data, + isStack: true, + xField: 'value', + yField: 'year', + stackField: 'type', +}); + +stackedBarPlot.render(); diff --git a/examples/bar/stacked/demo/label-position.ts b/examples/bar/stacked/demo/label-position.ts new file mode 100644 index 0000000000..e3e59da2c1 --- /dev/null +++ b/examples/bar/stacked/demo/label-position.ts @@ -0,0 +1,107 @@ +import { Bar } from '@antv/g2plot'; + +const data = [ + { + year: '1991', + value: 3, + type: 'Lon', + }, + { + year: '1992', + value: 4, + type: 'Lon', + }, + { + year: '1993', + value: 3.5, + type: 'Lon', + }, + { + year: '1994', + value: 5, + type: 'Lon', + }, + { + year: '1995', + value: 4.9, + type: 'Lon', + }, + { + year: '1996', + value: 6, + type: 'Lon', + }, + { + year: '1997', + value: 7, + type: 'Lon', + }, + { + year: '1998', + value: 9, + type: 'Lon', + }, + { + year: '1999', + value: 13, + type: 'Lon', + }, + { + year: '1991', + value: 3, + type: 'Bor', + }, + { + year: '1992', + value: 4, + type: 'Bor', + }, + { + year: '1993', + value: 3.5, + type: 'Bor', + }, + { + year: '1994', + value: 5, + type: 'Bor', + }, + { + year: '1995', + value: 4.9, + type: 'Bor', + }, + { + year: '1996', + value: 6, + type: 'Bor', + }, + { + year: '1997', + value: 7, + type: 'Bor', + }, + { + year: '1998', + value: 9, + type: 'Bor', + }, + { + year: '1999', + value: 13, + type: 'Bor', + }, +]; + +const stackedBarPlot = new Bar('container', { + data, + isStack: true, + xField: 'value', + yField: 'year', + stackField: 'type', + label: { + position: 'middle', + }, +}); + +stackedBarPlot.render(); diff --git a/examples/bar/stacked/demo/label.ts b/examples/bar/stacked/demo/label.ts new file mode 100644 index 0000000000..9dc584f7bf --- /dev/null +++ b/examples/bar/stacked/demo/label.ts @@ -0,0 +1,105 @@ +import { Bar } from '@antv/g2plot'; + +const data = [ + { + year: '1991', + value: 3, + type: 'Lon', + }, + { + year: '1992', + value: 4, + type: 'Lon', + }, + { + year: '1993', + value: 3.5, + type: 'Lon', + }, + { + year: '1994', + value: 5, + type: 'Lon', + }, + { + year: '1995', + value: 4.9, + type: 'Lon', + }, + { + year: '1996', + value: 6, + type: 'Lon', + }, + { + year: '1997', + value: 7, + type: 'Lon', + }, + { + year: '1998', + value: 9, + type: 'Lon', + }, + { + year: '1999', + value: 13, + type: 'Lon', + }, + { + year: '1991', + value: 3, + type: 'Bor', + }, + { + year: '1992', + value: 4, + type: 'Bor', + }, + { + year: '1993', + value: 3.5, + type: 'Bor', + }, + { + year: '1994', + value: 5, + type: 'Bor', + }, + { + year: '1995', + value: 4.9, + type: 'Bor', + }, + { + year: '1996', + value: 6, + type: 'Bor', + }, + { + year: '1997', + value: 7, + type: 'Bor', + }, + { + year: '1998', + value: 9, + type: 'Bor', + }, + { + year: '1999', + value: 13, + type: 'Bor', + }, +]; + +const stackedBarPlot = new Bar('container', { + data, + isStack: true, + xField: 'value', + yField: 'year', + stackField: 'type', + label: {}, +}); + +stackedBarPlot.render(); diff --git a/examples/bar/stacked/demo/meta.json b/examples/bar/stacked/demo/meta.json new file mode 100644 index 0000000000..18e5df5919 --- /dev/null +++ b/examples/bar/stacked/demo/meta.json @@ -0,0 +1,32 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "basic.ts", + "title": { + "zh": "堆叠条形图", + "en": "StackedBar chart" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*N8smQYy45fAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "label.ts", + "title": { + "zh": "堆叠条形图 - 数据标签", + "en": "StackedBar chart label" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*N8smQYy45fAAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "label-position.ts", + "title": { + "zh": "堆叠条形图 - 数据标签", + "en": "StackedBar chart label position" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*N8smQYy45fAAAAAAAAAAAABkARQnAQ" + } + ] +} \ No newline at end of file diff --git a/examples/bar/stacked/design.en.md b/examples/bar/stacked/design.en.md new file mode 100644 index 0000000000..6d7c247589 --- /dev/null +++ b/examples/bar/stacked/design.en.md @@ -0,0 +1,5 @@ +--- +title: 设计规范 +--- + +设计规范 diff --git a/examples/bar/stacked/design.zh.md b/examples/bar/stacked/design.zh.md new file mode 100644 index 0000000000..421c212832 --- /dev/null +++ b/examples/bar/stacked/design.zh.md @@ -0,0 +1,29 @@ +--- +title: 设计规范 +--- + +## 何时使用 + +条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| ---------------- | -------------------------------------------------------------------------------------------------- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势 | + +## 用法建议 + + + +## 元素 + + + +- X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。 +- Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。 +- 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +- 标签：用来解释数据点的值。 +- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/bar/stacked/index.en.md b/examples/bar/stacked/index.en.md new file mode 100644 index 0000000000..c79044b90a --- /dev/null +++ b/examples/bar/stacked/index.en.md @@ -0,0 +1,6 @@ +--- +title: Stacked Bar Chart +order: 1 +--- + +Description about this component. diff --git a/examples/bar/stacked/index.zh.md b/examples/bar/stacked/index.zh.md new file mode 100644 index 0000000000..8053e2b1a0 --- /dev/null +++ b/examples/bar/stacked/index.zh.md @@ -0,0 +1,8 @@ +--- +title: 堆叠条形图 +order: 1 +--- + +堆叠条形图是基础条形图的扩展形式，将每个条形进行分割，以显示大类目下的细分类目占比情况。堆叠条形图可以展示更多维度的数据：大类目之间的数值比较、大类目下各细分类目的占比情况、不同大类目下同一细分类目的横向数值比较。 + +堆叠条形图的一个缺点是堆叠太多时会导致数据很难区分对比，同时很难对比不同分类下相同维度的数据，因为它们不是按照同一基准线对齐的。 diff --git a/gatsby-config.js b/gatsby-config.js index 79e9fd7dbe..a4e10ac38d 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -71,6 +71,14 @@ module.exports = { en: 'Column Charts', }, }, + { + slug: 'bar', + icon: 'bar', + title: { + zh: '条形图', + en: 'Bar Charts', + }, + }, { slug: 'pie', icon: 'pie', @@ -111,7 +119,7 @@ module.exports = { en: 'Radar Charts', }, }, - + // OTHERS { slug: 'general', diff --git a/src/plots/bar/adaptor.ts b/src/plots/bar/adaptor.ts index 38618e9a78..873ee1b17f 100644 --- a/src/plots/bar/adaptor.ts +++ b/src/plots/bar/adaptor.ts @@ -8,7 +8,12 @@ import { adaptor as columnAdaptor } from '../column/adaptor'; */ export function adaptor(params: Params) { const { chart, options } = params; - const { xField, yField, xAxis, yAxis, barStyle, barWidthRatio } = options; + const { xField, yField, xAxis, yAxis, barStyle, barWidthRatio, label } = options; + + // label of bar charts default position is left, if plot has label + if (label && !label.position) { + label.position = 'left'; + } // transpose column to bar chart.coordinate().transpose(); @@ -17,6 +22,7 @@ export function adaptor(params: Params) { chart, options: { ...options, + label, // switch xField and yField xField: yField, yField: xField, diff --git a/src/plots/bar/index.ts b/src/plots/bar/index.ts index c8ff0aa165..c58124630a 100644 --- a/src/plots/bar/index.ts +++ b/src/plots/bar/index.ts @@ -1,3 +1,4 @@ +import { deepMix } from '@antv/util'; import { Plot } from '../../core/plot'; import { BarOptions } from './types'; import { adaptor } from './adaptor'; @@ -18,4 +19,12 @@ export class Bar extends Plot { protected getSchemaAdaptor(): Adaptor { return adaptor; } + + protected getDefaultOptions() { + return deepMix({}, super.getDefaultOptions(), { + // label: { + // position: 'left', // 默认 label 在左侧 + // }, + }); + } }