From b7248ce5337238b6fe2483b238f2f210112c71d7 Mon Sep 17 00:00:00 2001 From: "liufu.lf" Date: Tue, 10 Nov 2020 16:58:32 +0800 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A0=86?= =?UTF-8?q?=E5=8F=A0=E5=88=86=E7=BB=84=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/data/common.ts | 34 ++ .../unit/plots/bar/stacked-grouped-spec.ts | 30 ++ .../unit/plots/column/stack-group-spec.ts | 30 ++ __tests__/unit/plots/dual-axes/group-spec.ts | 295 ++++++++++++++++++ docs/manual/plots/bar.en.md | 6 + docs/manual/plots/bar.zh.md | 6 + docs/manual/plots/column.en.md | 6 + docs/manual/plots/column.zh.md | 6 + docs/manual/plots/dual-axes.en.md | 1 + docs/manual/plots/dual-axes.zh.md | 1 + examples/column/grouped/demo/meta.json | 8 + examples/column/grouped/demo/stacked.ts | 36 +++ .../dual-axes/grouped-stacked-line/API.en.md | 1 + .../dual-axes/grouped-stacked-line/API.zh.md | 1 + .../grouped-stacked-line/demo/meta.json | 16 + .../demo/stacked-grouped-column-line.ts | 61 ++++ .../grouped-stacked-line/index.en.md | 4 + .../grouped-stacked-line/index.zh.md | 4 + src/adaptor/geometries/interval.ts | 19 +- src/plots/column/types.ts | 2 + src/plots/dual-axes/adaptor.ts | 32 +- src/plots/dual-axes/types.ts | 2 + 22 files changed, 582 insertions(+), 19 deletions(-) create mode 100644 __tests__/unit/plots/bar/stacked-grouped-spec.ts create mode 100644 __tests__/unit/plots/column/stack-group-spec.ts create mode 100644 __tests__/unit/plots/dual-axes/group-spec.ts create mode 100644 examples/column/grouped/demo/stacked.ts create mode 100644 examples/dual-axes/grouped-stacked-line/API.en.md create mode 100644 examples/dual-axes/grouped-stacked-line/API.zh.md create mode 100644 examples/dual-axes/grouped-stacked-line/demo/meta.json create mode 100644 examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts create mode 100644 examples/dual-axes/grouped-stacked-line/index.en.md create mode 100644 examples/dual-axes/grouped-stacked-line/index.zh.md diff --git a/__tests__/data/common.ts b/__tests__/data/common.ts index 00d6a5ef1e..4a759ad9e7 100644 --- a/__tests__/data/common.ts +++ b/__tests__/data/common.ts @@ -48,3 +48,37 @@ export const POSITIVE_NEGATIVE_DATA = [ value: -470, }, ]; + +export const MultipleData = [ + { name: 'London', month: 'Jan.', value: 12.9, type: '语文' }, + { name: 'London', month: 'Jan.', value: 10.9, type: '数学' }, + { name: 'London', month: 'Jan.', value: 120.9, type: '英语' }, + { name: 'Berlin', month: 'Jan.', value: 12.4, type: '美术' }, + { name: 'Berlin', month: 'Jan.', value: 12.4, type: '线性代数' }, + { name: 'beijing', month: 'Jan.', value: 12.4, type: '高数' }, + { name: 'London', month: 'Feb.', value: 2.9, type: '语文' }, + { name: 'London', month: 'Feb.', value: 5.9, type: '数学' }, + { name: 'London', month: 'Feb.', value: 10.9, type: '英语' }, + { name: 'Berlin', month: 'Feb.', value: 22.4, type: '美术' }, + { name: 'Berlin', month: 'Feb.', value: 32.4, type: '线性代数' }, + { name: 'Berlin', month: 'Feb.', value: 62.4, type: '线性代数-上' }, + { name: 'beijing', month: 'Feb.', value: 42.4, type: '高数' }, + { name: 'London', month: 'wed.', value: 2.9, type: '语文' }, + { name: 'London', month: 'wed.', value: 5.9, type: '数学' }, + { name: 'Berlin', month: 'wed.', value: 22.4, type: '美术' }, + { name: 'Berlin', month: 'wed.', value: 32.4, type: '线性代数' }, + { name: 'beijing', month: 'wed.', value: 42.4, type: '高数' }, + { name: 'beijing', month: 'wed.', value: 42.4, type: '高数-上' }, +]; + +export const LineData = [ + { name: '福老师', month: 'Jan.', value: 12.9, type: '美术' }, + { name: '逍老师', month: 'Jan.', value: 1.4, type: '线性代数' }, + { name: '新老师', month: 'Jan.', value: 2.4, type: '高数' }, + { name: '福老师', month: 'Feb.', value: 18.9, type: '美术' }, + { name: '逍老师', month: 'Feb.', value: 13.4, type: '线性代数' }, + { name: '新老师', month: 'Feb.', value: 15.4, type: '高数' }, + { name: '福老师', month: 'wed.', value: 8.9, type: '美术' }, + { name: '逍老师', month: 'wed.', value: 6.4, type: '线性代数' }, + { name: '新老师', month: 'wed.', value: 5.4, type: '高数' }, +]; diff --git a/__tests__/unit/plots/bar/stacked-grouped-spec.ts b/__tests__/unit/plots/bar/stacked-grouped-spec.ts new file mode 100644 index 0000000000..fef4464f59 --- /dev/null +++ b/__tests__/unit/plots/bar/stacked-grouped-spec.ts @@ -0,0 +1,30 @@ +import { Bar } from '../../../../src'; +import { MultipleData } from '../../../data/common'; +import { createDiv } from '../../../utils/dom'; + +describe('Bar stacked grouped', () => { + it('stacked grouped', () => { + const bar = new Bar(createDiv(), { + width: 400, + height: 300, + data: MultipleData, + xField: 'value', + yField: 'month', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + }); + + bar.render(); + + const geometry = bar.chart.geometries[0]; + const elements = geometry.elements; + // @ts-ignore + const adjusts = geometry.adjusts; + expect(adjusts.dodge.dodgeBy).toBe('name'); + expect(adjusts.stack.xField).toBe('month'); + expect(elements.length).toBe(19); + bar.destroy(); + }); +}); diff --git a/__tests__/unit/plots/column/stack-group-spec.ts b/__tests__/unit/plots/column/stack-group-spec.ts new file mode 100644 index 0000000000..9c838a380b --- /dev/null +++ b/__tests__/unit/plots/column/stack-group-spec.ts @@ -0,0 +1,30 @@ +import { Column } from '../../../../src'; +import { MultipleData } from '../../../data/common'; +import { createDiv } from '../../../utils/dom'; + +describe('column stacked grouped', () => { + it('stacked grouped', () => { + const column = new Column(createDiv(), { + width: 400, + height: 300, + data: MultipleData, + xField: 'month', + yField: 'value', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + }); + + column.render(); + + const geometry = column.chart.geometries[0]; + const elements = geometry.elements; + // @ts-ignore + const adjusts = geometry.adjusts; + expect(adjusts.dodge.dodgeBy).toBe('name'); + expect(adjusts.stack.xField).toBe('month'); + expect(elements.length).toBe(19); + column.destroy(); + }); +}); diff --git a/__tests__/unit/plots/dual-axes/group-spec.ts b/__tests__/unit/plots/dual-axes/group-spec.ts new file mode 100644 index 0000000000..45e3dfe5f8 --- /dev/null +++ b/__tests__/unit/plots/dual-axes/group-spec.ts @@ -0,0 +1,295 @@ +import { DualAxes } from '../../../../src'; +import { createDiv } from '../../../utils/dom'; +import { MultipleData, LineData } from '../../../data/common'; + +const columnData2 = [ + { name: 'London', month: 'Jan.', value: 12.9, type: 'type1' }, + { name: 'Berlin', month: 'Jan.', value: 12.4, type: 'type2' }, + { name: 'beijing', month: 'Jan.', value: 12.4, type: 'type3' }, + { name: 'London', month: 'Feb.', value: 2.9, type: 'type1' }, + { name: 'Berlin', month: 'Feb.', value: 32.4, type: 'type2' }, + { name: 'beijing', month: 'Feb.', value: 42.4, type: 'type3' }, + { name: 'London', month: 'wed.', value: 2.9, type: 'type1' }, + { name: 'Berlin', month: 'wed.', value: 32.4, type: 'type2' }, + { name: 'beijing', month: 'wed.', value: 42.4, type: 'type3' }, +]; + +const color = [ + '#5B8FF9', + '#CDDDFD', + '#5AD8A6', + '#CDF3E4', + '#5D7092', + '#CED4DE', + '#F6BD16', + '#FCEBB9', + '#6F5EF9', + '#D3CEFD', + '#6DC8EC', + '#D3EEF9', + '#945FB9', + '#DECFEA', + '#FF9845', + '#FFE0C7', + '#1E9493', + '#BBDEDE', + '#FF99C3', + '#FFE0ED', +]; + +describe('column line', () => { + it('stack column and stack line', () => { + const dualAxes = new DualAxes(createDiv('stack column and stack line'), { + height: 500, + data: [MultipleData, LineData], + xField: 'month', + yField: ['value', 'value'], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + color: color, + }, + { + geometry: 'line', + seriesField: 'name', + isStack: true, + color: color.reverse(), + smooth: true, + }, + ], + tooltip: false, + }); + + dualAxes.render(); + // @ts-ignore + const column = dualAxes.chart.views[0].geometries[0].adjusts; + // @ts-ignore + const line = dualAxes.chart.views[1].geometries[0].adjusts; + expect(column.dodge.dodgeBy).toBe('name'); + expect(column.stack.xField).toBe('month'); + expect(line.stack.xField).toBe('month'); + dualAxes.destroy(); + }); + + it('stack column and series line', () => { + const dualAxes = new DualAxes(createDiv('stack column and series line'), { + height: 500, + data: [MultipleData, LineData], + xField: 'month', + yField: ['value', 'value'], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + color: color, + }, + { + geometry: 'line', + seriesField: 'name', + color: color.reverse(), + smooth: true, + }, + ], + tooltip: false, + }); + + dualAxes.render(); + // @ts-ignore + const column = dualAxes.chart.views[0].geometries[0].adjusts; + // @ts-ignore + const line = dualAxes.chart.views[1].geometries[0].adjusts; + expect(column.dodge.dodgeBy).toBe('name'); + expect(column.stack.xField).toBe('month'); + expect(line.stack).toBeUndefined(); + dualAxes.destroy(); + }); + + it('group column and series line', () => { + const dualAxes = new DualAxes(createDiv('group column and series line'), { + height: 500, + data: [columnData2, LineData], + xField: 'month', + yField: ['value', 'value'], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + seriesField: 'type', + color: color, + }, + { + geometry: 'line', + seriesField: 'name', + color: color.reverse(), + smooth: true, + }, + ], + tooltip: false, + }); + dualAxes.render(); + // @ts-ignore + const column = dualAxes.chart.views[0].geometries[0].adjusts; + // @ts-ignore + const line = dualAxes.chart.views[1].geometries[0].adjusts; + expect(column.dodge.dodgeBy).toBe('type'); + expect(column.stack).toBeUndefined(); + expect(line.stack).toBeUndefined(); + dualAxes.destroy(); + }); + + it('group column and stack line', () => { + const dualAxes = new DualAxes(createDiv('group column and stack line'), { + height: 500, + data: [columnData2, LineData], + xField: 'month', + yField: ['value', 'value'], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + seriesField: 'name', + color: color, + }, + { + geometry: 'line', + seriesField: 'name', + color: color.reverse(), + smooth: true, + }, + ], + tooltip: false, + }); + + dualAxes.render(); + // @ts-ignore + const column = dualAxes.chart.views[0].geometries[0].adjusts; + // @ts-ignore + const line = dualAxes.chart.views[1].geometries[0].adjusts; + expect(column.dodge.dodgeBy).toBe('name'); + expect(column.stack).toBeUndefined(); + expect(line.stack).toBeUndefined(); + dualAxes.destroy(); + }); + + it('group column', () => { + const dualAxes = new DualAxes(createDiv('group column'), { + height: 500, + data: [columnData2, []], + xField: 'month', + yField: ['value', 'value'], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + seriesField: 'type', + color: color, + }, + { + geometry: 'line', + seriesField: 'name', + groupField: 'type', + color: color.reverse(), + smooth: true, + }, + ], + tooltip: false, + }); + + dualAxes.render(); + // @ts-ignore + const column = dualAxes.chart.views[0].geometries[0].adjusts; + const lineGeometries = dualAxes.chart.views[1].geometries; + expect(column.dodge.dodgeBy).toBe('type'); + expect(column.stack).toBeUndefined(); + expect(lineGeometries.length).toBe(1); + expect(lineGeometries[0].data.length).toBe(0); + dualAxes.destroy(); + }); + + it('stack column', () => { + const dualAxes = new DualAxes(createDiv('stack column'), { + height: 500, + data: [MultipleData, []], + xField: 'month', + yField: ['value', 'value'], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + color: color, + }, + { + geometry: 'line', + seriesField: 'name', + groupField: 'type', + color: color.reverse(), + smooth: true, + }, + ], + tooltip: false, + }); + + dualAxes.render(); + const legendController = dualAxes.chart.getController('legend'); + const legendComponent = legendController.getComponents()[0]; + const cfgItems = legendComponent.component.cfg.items; + expect(cfgItems.length).toBe(8); + // @ts-ignore + const column = dualAxes.chart.views[0].geometries[0].adjusts; + const lineGeometries = dualAxes.chart.views[1].geometries; + expect(column.dodge.dodgeBy).toBe('name'); + expect(column.stack.xField).toBe('month'); + expect(lineGeometries.length).toBe(1); + expect(lineGeometries[0].data.length).toBe(0); + dualAxes.destroy(); + }); + + it('stack line', () => { + const dualAxes = new DualAxes(createDiv('stack line'), { + height: 500, + data: [[], LineData], + xField: 'month', + yField: ['value', 'value'], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + color: color, + }, + { + geometry: 'line', + seriesField: 'name', + color: color.reverse(), + smooth: true, + }, + ], + tooltip: false, + }); + + dualAxes.render(); + const legendController = dualAxes.chart.getController('legend'); + const legendComponent = legendController.getComponents()[0]; + const cfgItems = legendComponent.component.cfg.items; + expect(cfgItems.length).toBe(3); + const columnGeometries = dualAxes.chart.views[0].geometries; + // @ts-ignore + const line = dualAxes.chart.views[1].geometries[0].adjusts; + expect(line.stack).toBeUndefined(); + expect(columnGeometries.length).toBe(1); + expect(columnGeometries[0].data.length).toBe(0); + dualAxes.destroy(); + }); +}); diff --git a/docs/manual/plots/bar.en.md b/docs/manual/plots/bar.en.md index ccfc19f283..f39ec778b5 100644 --- a/docs/manual/plots/bar.en.md +++ b/docs/manual/plots/bar.en.md @@ -23,6 +23,12 @@ order: 3 拆分字段，在分组条形图下同 groupField、colorField，在堆积条形图下同 stackField、colorField。 +#### groupField + +**optional** _string_ + +拆分字段，用于堆叠分组条形图，拆分优先级高于 seriesField。 + #### isGroup **optional** _boolean_ diff --git a/docs/manual/plots/bar.zh.md b/docs/manual/plots/bar.zh.md index 65d966bb77..8c6530fed1 100644 --- a/docs/manual/plots/bar.zh.md +++ b/docs/manual/plots/bar.zh.md @@ -23,6 +23,12 @@ order: 3 拆分字段，在分组条形图下同 groupField、colorField，在堆积条形图下同 stackField、colorField。 +#### groupField + +**optional** _string_ + +拆分字段，用于堆叠分组条形图，拆分优先级高于 seriesField。 + #### isGroup **optional** _boolean_ diff --git a/docs/manual/plots/column.en.md b/docs/manual/plots/column.en.md index c91fd70a78..4afc96912a 100644 --- a/docs/manual/plots/column.en.md +++ b/docs/manual/plots/column.en.md @@ -23,6 +23,12 @@ order: 2 拆分字段，在分组柱状图下同 groupField、colorField，在堆积柱状图下同 stackField、colorField。 +#### groupField + +**optional** _string_ + +拆分字段，用于堆叠分组柱状图，拆分优先级高于 seriesField。 + #### isGroup **optional** _boolean_ diff --git a/docs/manual/plots/column.zh.md b/docs/manual/plots/column.zh.md index d9f27b79f6..24554be40f 100644 --- a/docs/manual/plots/column.zh.md +++ b/docs/manual/plots/column.zh.md @@ -25,6 +25,12 @@ order: 2 拆分字段，在分组柱状图下同 groupField、colorField，在堆积柱状图下同 stackField、colorField。 +#### groupField + +**optional** _string_ + +拆分字段，用于堆叠分组柱状图，拆分优先级高于 seriesField。 + #### isGroup **optional** _boolean_ diff --git a/docs/manual/plots/dual-axes.en.md b/docs/manual/plots/dual-axes.en.md index 8b58ad1fcd..d2a5869ca7 100644 --- a/docs/manual/plots/dual-axes.en.md +++ b/docs/manual/plots/dual-axes.en.md @@ -71,6 +71,7 @@ const data = [[{ time: '1991'，value: 20 }], [{ time: '1992', count: 20 }]]; | columnStyle | _StyleAttr \| Function_ | 柱子样式配置，具体用法同[柱形图 columnStyle](./column#columnstyle) | | | label | _ContinueLegendLabelCfg_ | 柱形图 label,具体用法同[柱线图 label](./column#label) | | color | _string \| string[] \| Function_ | 指定点的颜色。具体用法同[折线图 color](./column#color) | +| groupField | _string_ | 拆分字段，用于堆叠+分组柱图，拆分优先级高于 seriesField。 | - | ### Plot Components diff --git a/docs/manual/plots/dual-axes.zh.md b/docs/manual/plots/dual-axes.zh.md index 88a7ffa311..046205e3b8 100644 --- a/docs/manual/plots/dual-axes.zh.md +++ b/docs/manual/plots/dual-axes.zh.md @@ -71,6 +71,7 @@ const data = [[{ time: '1991'，value: 20 }], [{ time: '1992', count: 20 }]]; | columnStyle | _StyleAttr \| Function_ | 柱子样式配置，具体用法同[柱形图 columnStyle](./column#columnstyle) | | | label | _ContinueLegendLabelCfg_ | 柱形图 label,具体用法同[柱线图 label](./column#label) | | color | _string \| string[] \| Function_ | 指定点的颜色。具体用法同[折线图 color](./column#color) | +| groupField | _string_ | 拆分字段，用于堆叠+分组柱图，拆分优先级高于 seriesField。 | - | ### 图表组件 diff --git a/examples/column/grouped/demo/meta.json b/examples/column/grouped/demo/meta.json index b4c3d70639..13db14a69a 100644 --- a/examples/column/grouped/demo/meta.json +++ b/examples/column/grouped/demo/meta.json @@ -11,6 +11,14 @@ "en": "Grouped column plot" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*cE7xSYYgqCcAAAAAAAAAAAAAARQnAQ" + }, + { + "filename": "stacked.ts", + "title": { + "zh": "堆叠分组柱状图", + "en": "Stacked grouped column plot" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*x6zHR4G3ydsAAAAAAAAAAAAAARQnAQ" } ] } diff --git a/examples/column/grouped/demo/stacked.ts b/examples/column/grouped/demo/stacked.ts new file mode 100644 index 0000000000..20127671b5 --- /dev/null +++ b/examples/column/grouped/demo/stacked.ts @@ -0,0 +1,36 @@ +import { Column } from '@antv/g2plot'; + +const data = [ + { name: 'London', month: 'Jan.', value: 12.9, type: '语文' }, + { name: 'London', month: 'Jan.', value: 10.9, type: '数学' }, + { name: 'London', month: 'Jan.', value: 120.9, type: '英语' }, + { name: 'Berlin', month: 'Jan.', value: 12.4, type: '美术' }, + { name: 'Berlin', month: 'Jan.', value: 12.4, type: '线性代数' }, + { name: 'beijing', month: 'Jan.', value: 12.4, type: '高数' }, + { name: 'London', month: 'Feb.', value: 2.9, type: '语文' }, + { name: 'London', month: 'Feb.', value: 5.9, type: '数学' }, + { name: 'London', month: 'Feb.', value: 10.9, type: '英语' }, + { name: 'Berlin', month: 'Feb.', value: 22.4, type: '美术' }, + { name: 'Berlin', month: 'Feb.', value: 32.4, type: '线性代数' }, + { name: 'Berlin', month: 'Feb.', value: 62.4, type: '线性代数-上' }, + { name: 'beijing', month: 'Feb.', value: 42.4, type: '高数' }, + { name: 'London', month: 'wed.', value: 2.9, type: '语文' }, + { name: 'London', month: 'wed.', value: 5.9, type: '数学' }, + { name: 'Berlin', month: 'wed.', value: 22.4, type: '美术' }, + { name: 'Berlin', month: 'wed.', value: 32.4, type: '线性代数' }, + { name: 'beijing', month: 'wed.', value: 42.4, type: '高数' }, + { name: 'beijing', month: 'wed.', value: 42.4, type: '高数-上' }, +]; + +const dualAxes = new Column('container', { + data, + xField: 'month', + yField: 'value', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + tooltip: false, +}); + +dualAxes.render(); diff --git a/examples/dual-axes/grouped-stacked-line/API.en.md b/examples/dual-axes/grouped-stacked-line/API.en.md new file mode 100644 index 0000000000..ea1012e28f --- /dev/null +++ b/examples/dual-axes/grouped-stacked-line/API.en.md @@ -0,0 +1 @@ +`markdown:docs/manual/plots/dual-axes.en.md` \ No newline at end of file diff --git a/examples/dual-axes/grouped-stacked-line/API.zh.md b/examples/dual-axes/grouped-stacked-line/API.zh.md new file mode 100644 index 0000000000..8b3cf9919e --- /dev/null +++ b/examples/dual-axes/grouped-stacked-line/API.zh.md @@ -0,0 +1 @@ +`markdown:docs/manual/plots/dual-axes.zh.md` diff --git a/examples/dual-axes/grouped-stacked-line/demo/meta.json b/examples/dual-axes/grouped-stacked-line/demo/meta.json new file mode 100644 index 0000000000..c406179168 --- /dev/null +++ b/examples/dual-axes/grouped-stacked-line/demo/meta.json @@ -0,0 +1,16 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "stacked-grouped-column-line.ts", + "title": { + "zh": "堆叠分组柱状图-折线图", + "en": "Stacked and Grouped column line" + }, + "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*9Pl8SrMreqkAAAAAAAAAAAAAARQnAQ" + } + ] +} diff --git a/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts b/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts new file mode 100644 index 0000000000..4f7b06d187 --- /dev/null +++ b/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts @@ -0,0 +1,61 @@ +import { DualAxes } from '@antv/g2plot'; + +const columnData = [ + { name: 'London', month: 'Jan.', value: 12.9, type: '语文' }, + { name: 'London', month: 'Jan.', value: 10.9, type: '数学' }, + { name: 'London', month: 'Jan.', value: 120.9, type: '英语' }, + { name: 'Berlin', month: 'Jan.', value: 12.4, type: '美术' }, + { name: 'Berlin', month: 'Jan.', value: 12.4, type: '线性代数' }, + { name: 'beijing', month: 'Jan.', value: 12.4, type: '高数' }, + { name: 'London', month: 'Feb.', value: 2.9, type: '语文' }, + { name: 'London', month: 'Feb.', value: 5.9, type: '数学' }, + { name: 'London', month: 'Feb.', value: 10.9, type: '英语' }, + { name: 'Berlin', month: 'Feb.', value: 22.4, type: '美术' }, + { name: 'Berlin', month: 'Feb.', value: 32.4, type: '线性代数' }, + { name: 'Berlin', month: 'Feb.', value: 62.4, type: '线性代数-上' }, + { name: 'beijing', month: 'Feb.', value: 42.4, type: '高数' }, + { name: 'London', month: 'wed.', value: 2.9, type: '语文' }, + { name: 'London', month: 'wed.', value: 5.9, type: '数学' }, + { name: 'Berlin', month: 'wed.', value: 22.4, type: '美术' }, + { name: 'Berlin', month: 'wed.', value: 32.4, type: '线性代数' }, + { name: 'beijing', month: 'wed.', value: 42.4, type: '高数' }, + { name: 'beijing', month: 'wed.', value: 42.4, type: '高数-上' }, +]; + +const lineData = [ + { name: '福老师', month: 'Jan.', value: 12.9, type: '美术' }, + { name: '逍老师', month: 'Jan.', value: 1.4, type: '线性代数' }, + { name: '新老师', month: 'Jan.', value: 2.4, type: '高数' }, + { name: '福老师', month: 'Feb.', value: 18.9, type: '美术' }, + { name: '逍老师', month: 'Feb.', value: 13.4, type: '线性代数' }, + { name: '新老师', month: 'Feb.', value: 15.4, type: '高数' }, + { name: '福老师', month: 'wed.', value: 8.9, type: '美术' }, + { name: '逍老师', month: 'wed.', value: 6.4, type: '线性代数' }, + { name: '新老师', month: 'wed.', value: 5.4, type: '高数' }, +]; + +const dualAxes = new DualAxes('container', { + data: [columnData, lineData], + xField: 'month', + yField: ['value', 'value'], + padding: [20], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + }, + { + geometry: 'line', + seriesField: 'name', + isStack: true, + smooth: true, + color: ['#BBDEDE', '#FF99C3', '#FFE0ED'], + }, + ], + tooltip: false, +}); + +dualAxes.render(); diff --git a/examples/dual-axes/grouped-stacked-line/index.en.md b/examples/dual-axes/grouped-stacked-line/index.en.md new file mode 100644 index 0000000000..fb1f7f2b0a --- /dev/null +++ b/examples/dual-axes/grouped-stacked-line/index.en.md @@ -0,0 +1,4 @@ +--- +title: Stacked and Grouped column line +order: 4 +--- diff --git a/examples/dual-axes/grouped-stacked-line/index.zh.md b/examples/dual-axes/grouped-stacked-line/index.zh.md new file mode 100644 index 0000000000..1dbbf0508f --- /dev/null +++ b/examples/dual-axes/grouped-stacked-line/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 堆叠分组柱 + 折线混合图表 +order: 4 +--- diff --git a/src/adaptor/geometries/interval.ts b/src/adaptor/geometries/interval.ts index 1d54359427..4754a6c042 100644 --- a/src/adaptor/geometries/interval.ts +++ b/src/adaptor/geometries/interval.ts @@ -22,6 +22,8 @@ export interface IntervalGeometryOptions extends GeometryOptions { readonly marginRatio?: number; /** 柱子样式配置 */ readonly interval?: MappingOptions; + /** 分组字段，优先级高于 seriesField */ + readonly groupField?: string; } /** @@ -30,28 +32,35 @@ export interface IntervalGeometryOptions extends GeometryOptions { */ function otherAdaptor(params: Params): Params { const { chart, options, ext } = params; - const { seriesField, isGroup, isStack, marginRatio, widthRatio } = options; + const { seriesField, isGroup, isStack, marginRatio, widthRatio, groupField, data } = options; const g = ext.geometry as Geometry; /** * adjust */ + const adjust = []; if (seriesField) { // group if (isGroup) { - g.adjust({ + adjust.push({ type: 'dodge', + dodgeBy: groupField || seriesField, marginRatio, }); - } else if (isStack) { - // stack - g.adjust({ + } + // stack + if (isStack) { + adjust.push({ type: 'stack', marginRatio, }); } } + if (adjust.length && data?.length) { + g.adjust(adjust); + } + // widthRatio if (!isNil(widthRatio)) { chart.theme({ diff --git a/src/plots/column/types.ts b/src/plots/column/types.ts index 14a9a61669..8da0c12f69 100644 --- a/src/plots/column/types.ts +++ b/src/plots/column/types.ts @@ -23,4 +23,6 @@ export interface ColumnOptions extends Options, OptionWithConversionTag, OptionW readonly marginRatio?: number; /** 柱子样式配置，可选 */ readonly columnStyle?: StyleAttr; + /** 分组字段，优先级高于 seriesField */ + readonly groupField?: string; } diff --git a/src/plots/dual-axes/adaptor.ts b/src/plots/dual-axes/adaptor.ts index a4957e9059..f9867597d7 100644 --- a/src/plots/dual-axes/adaptor.ts +++ b/src/plots/dual-axes/adaptor.ts @@ -226,7 +226,7 @@ export function animation(params: Params): Params): Params { const { chart, options } = params; - const { legend, geometryOptions, yField } = options; + const { legend, geometryOptions, yField, data } = options; const leftView = findViewById(chart, LEFT_AXES_VIEW); const rightView = findViewById(chart, RIGHT_AXES_VIEW); @@ -237,19 +237,23 @@ export function legend(params: Params): Params } else { // 均使用自定义图例 chart.once('beforepaint', () => { - const leftItems = getViewLegendItems({ - view: leftView, - geometryOption: geometryOptions[0], - yField: yField[0], - legend, - }); - - const rightItems = getViewLegendItems({ - view: rightView, - geometryOption: geometryOptions[1], - yField: yField[1], - legend, - }); + const leftItems = data[0].length + ? getViewLegendItems({ + view: leftView, + geometryOption: geometryOptions[0], + yField: yField[0], + legend, + }) + : []; + + const rightItems = data[1].length + ? getViewLegendItems({ + view: rightView, + geometryOption: geometryOptions[1], + yField: yField[1], + legend, + }) + : []; chart.legend( deepAssign({}, legend, { diff --git a/src/plots/dual-axes/types.ts b/src/plots/dual-axes/types.ts index a0aec2b6d6..f9d3fc4be9 100644 --- a/src/plots/dual-axes/types.ts +++ b/src/plots/dual-axes/types.ts @@ -25,6 +25,8 @@ type CommonGeometryOption = { readonly label?: Options['label']; // 色板 readonly color?: Options['color']; + // 分组字段，优先级高于 seriesField + readonly groupField?: string; }; // 折线设置接口, 直接用 LineOption 吧 From 01dfac58dbc58dbaf1112fbf6d4df5aaa856c16b Mon Sep 17 00:00:00 2001 From: "liufu.lf" Date: Tue, 10 Nov 2020 17:53:56 +0800 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E5=8F=8C?= =?UTF-8?q?=E8=BD=B4=E5=9B=BE=E5=A0=86=E5=8F=A0=E5=88=86=E7=BB=84=20line?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/data/common.ts | 2 - __tests__/unit/plots/dual-axes/group-spec.ts | 41 +++++++++++++++++++- src/plots/dual-axes/types.ts | 4 ++ src/plots/dual-axes/util/geometry.ts | 20 ++++++++-- 4 files changed, 60 insertions(+), 7 deletions(-) diff --git a/__tests__/data/common.ts b/__tests__/data/common.ts index 4a759ad9e7..f52e7a24dc 100644 --- a/__tests__/data/common.ts +++ b/__tests__/data/common.ts @@ -61,14 +61,12 @@ export const MultipleData = [ { name: 'London', month: 'Feb.', value: 10.9, type: '英语' }, { name: 'Berlin', month: 'Feb.', value: 22.4, type: '美术' }, { name: 'Berlin', month: 'Feb.', value: 32.4, type: '线性代数' }, - { name: 'Berlin', month: 'Feb.', value: 62.4, type: '线性代数-上' }, { name: 'beijing', month: 'Feb.', value: 42.4, type: '高数' }, { name: 'London', month: 'wed.', value: 2.9, type: '语文' }, { name: 'London', month: 'wed.', value: 5.9, type: '数学' }, { name: 'Berlin', month: 'wed.', value: 22.4, type: '美术' }, { name: 'Berlin', month: 'wed.', value: 32.4, type: '线性代数' }, { name: 'beijing', month: 'wed.', value: 42.4, type: '高数' }, - { name: 'beijing', month: 'wed.', value: 42.4, type: '高数-上' }, ]; export const LineData = [ diff --git a/__tests__/unit/plots/dual-axes/group-spec.ts b/__tests__/unit/plots/dual-axes/group-spec.ts index 45e3dfe5f8..a4b05b5e35 100644 --- a/__tests__/unit/plots/dual-axes/group-spec.ts +++ b/__tests__/unit/plots/dual-axes/group-spec.ts @@ -38,6 +38,45 @@ const color = [ ]; describe('column line', () => { + it('stacked grouped column and stacked grouped line', () => { + const dualAxes = new DualAxes(createDiv('stack column and stack line'), { + height: 500, + data: [MultipleData, MultipleData], + xField: 'month', + yField: ['value', 'value'], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + color: color, + }, + { + geometry: 'line', + seriesField: 'type', + smooth: true, + isGroup: true, + isStack: true, + groupField: 'name', + color: color.reverse(), + }, + ], + tooltip: false, + }); + + dualAxes.render(); + // @ts-ignore + const column = dualAxes.chart.views[0].geometries[0].adjusts; + // @ts-ignore + const line = dualAxes.chart.views[1].geometries[0].adjusts; + expect(column.dodge.dodgeBy).toBe('name'); + expect(column.stack.xField).toBe('month'); + expect(line.dodge.dodgeBy).toBe('name'); + expect(line.stack.xField).toBe('month'); + dualAxes.destroy(); + }); it('stack column and stack line', () => { const dualAxes = new DualAxes(createDiv('stack column and stack line'), { height: 500, @@ -243,7 +282,7 @@ describe('column line', () => { const legendController = dualAxes.chart.getController('legend'); const legendComponent = legendController.getComponents()[0]; const cfgItems = legendComponent.component.cfg.items; - expect(cfgItems.length).toBe(8); + expect(cfgItems.length).toBe(6); // @ts-ignore const column = dualAxes.chart.views[0].geometries[0].adjusts; const lineGeometries = dualAxes.chart.views[1].geometries; diff --git a/src/plots/dual-axes/types.ts b/src/plots/dual-axes/types.ts index f9d3fc4be9..57ff0c3dc6 100644 --- a/src/plots/dual-axes/types.ts +++ b/src/plots/dual-axes/types.ts @@ -25,8 +25,12 @@ type CommonGeometryOption = { readonly label?: Options['label']; // 色板 readonly color?: Options['color']; + // 是否分组 + readonly isGroup?: boolean; // 分组字段，优先级高于 seriesField readonly groupField?: string; + // 数据 + readonly data?: any[]; }; // 折线设置接口, 直接用 LineOption 吧 diff --git a/src/plots/dual-axes/util/geometry.ts b/src/plots/dual-axes/util/geometry.ts index f101dd517a..c0bf7f7938 100644 --- a/src/plots/dual-axes/util/geometry.ts +++ b/src/plots/dual-axes/util/geometry.ts @@ -15,7 +15,7 @@ export function drawSingleGeometry { const { options, chart } = params; const { geometryOption, yField } = options; - const { isStack, color } = geometryOption; + const { isStack, color, seriesField, groupField, isGroup, data } = geometryOption; const FIELD_KEY = ['xField', 'yField']; if (isLine(geometryOption)) { @@ -46,11 +46,23 @@ export function drawSingleGeometry { - g.adjust('stack'); + g.adjust(adjust); }); } } From f592c4275aa25ff11e51b9a38325c6f44ad9e2a1 Mon Sep 17 00:00:00 2001 From: "liufu.lf" Date: Tue, 10 Nov 2020 18:37:08 +0800 Subject: [PATCH 3/7] fix: tests --- __tests__/unit/plots/bar/stacked-grouped-spec.ts | 2 +- __tests__/unit/plots/column/stack-group-spec.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/__tests__/unit/plots/bar/stacked-grouped-spec.ts b/__tests__/unit/plots/bar/stacked-grouped-spec.ts index fef4464f59..5e9fc12cc1 100644 --- a/__tests__/unit/plots/bar/stacked-grouped-spec.ts +++ b/__tests__/unit/plots/bar/stacked-grouped-spec.ts @@ -24,7 +24,7 @@ describe('Bar stacked grouped', () => { const adjusts = geometry.adjusts; expect(adjusts.dodge.dodgeBy).toBe('name'); expect(adjusts.stack.xField).toBe('month'); - expect(elements.length).toBe(19); + expect(elements.length).toBe(17); bar.destroy(); }); }); diff --git a/__tests__/unit/plots/column/stack-group-spec.ts b/__tests__/unit/plots/column/stack-group-spec.ts index 9c838a380b..138d4bba3e 100644 --- a/__tests__/unit/plots/column/stack-group-spec.ts +++ b/__tests__/unit/plots/column/stack-group-spec.ts @@ -24,7 +24,7 @@ describe('column stacked grouped', () => { const adjusts = geometry.adjusts; expect(adjusts.dodge.dodgeBy).toBe('name'); expect(adjusts.stack.xField).toBe('month'); - expect(elements.length).toBe(19); + expect(elements.length).toBe(17); column.destroy(); }); }); From 1c4a51a11a42d43d0b02b41bf00199a305aad3e4 Mon Sep 17 00:00:00 2001 From: "liufu.lf" Date: Tue, 10 Nov 2020 19:57:00 +0800 Subject: [PATCH 4/7] fix: conversation --- __tests__/unit/plots/dual-axes/group-spec.ts | 5 +++++ docs/manual/plots/bar.en.md | 2 +- docs/manual/plots/bar.zh.md | 2 +- docs/manual/plots/column.en.md | 2 +- docs/manual/plots/column.zh.md | 2 +- docs/manual/plots/dual-axes.en.md | 2 +- docs/manual/plots/dual-axes.zh.md | 2 +- .../demo/stacked-grouped-column-line.ts | 1 - src/adaptor/geometries/interval.ts | 6 +++--- src/plots/column/types.ts | 2 +- src/plots/dual-axes/types.ts | 2 -- src/plots/dual-axes/util/geometry.ts | 4 ++-- 12 files changed, 17 insertions(+), 15 deletions(-) diff --git a/__tests__/unit/plots/dual-axes/group-spec.ts b/__tests__/unit/plots/dual-axes/group-spec.ts index a4b05b5e35..9c0114a2a4 100644 --- a/__tests__/unit/plots/dual-axes/group-spec.ts +++ b/__tests__/unit/plots/dual-axes/group-spec.ts @@ -299,6 +299,11 @@ describe('column line', () => { data: [[], LineData], xField: 'month', yField: ['value', 'value'], + meta: { + month: { + type: 'cat', + }, + }, geometryOptions: [ { geometry: 'column', diff --git a/docs/manual/plots/bar.en.md b/docs/manual/plots/bar.en.md index f39ec778b5..37df5a1c24 100644 --- a/docs/manual/plots/bar.en.md +++ b/docs/manual/plots/bar.en.md @@ -27,7 +27,7 @@ order: 3 **optional** _string_ -拆分字段，用于堆叠分组条形图，拆分优先级高于 seriesField。 +拆分字段，用于堆叠分组条形图，拆分优先级高于 seriesField，isGroup: true 时会根据 groupField 进行分组。 #### isGroup diff --git a/docs/manual/plots/bar.zh.md b/docs/manual/plots/bar.zh.md index 8c6530fed1..b139793fa3 100644 --- a/docs/manual/plots/bar.zh.md +++ b/docs/manual/plots/bar.zh.md @@ -27,7 +27,7 @@ order: 3 **optional** _string_ -拆分字段，用于堆叠分组条形图，拆分优先级高于 seriesField。 +拆分字段，用于堆叠分组条形图，拆分优先级高于 seriesField，isGroup: true 时会根据 groupField 进行分组。 #### isGroup diff --git a/docs/manual/plots/column.en.md b/docs/manual/plots/column.en.md index 4afc96912a..317b6275e1 100644 --- a/docs/manual/plots/column.en.md +++ b/docs/manual/plots/column.en.md @@ -27,7 +27,7 @@ order: 2 **optional** _string_ -拆分字段，用于堆叠分组柱状图，拆分优先级高于 seriesField。 +拆分字段，用于堆叠分组柱状图，拆分优先级高于 seriesField，isGroup: true 时会根据 groupField 进行分组。 #### isGroup diff --git a/docs/manual/plots/column.zh.md b/docs/manual/plots/column.zh.md index 24554be40f..5a305e5460 100644 --- a/docs/manual/plots/column.zh.md +++ b/docs/manual/plots/column.zh.md @@ -29,7 +29,7 @@ order: 2 **optional** _string_ -拆分字段，用于堆叠分组柱状图，拆分优先级高于 seriesField。 +拆分字段，用于堆叠分组柱状图，拆分优先级高于 seriesField，isGroup: true 时会根据 groupField 进行分组。 #### isGroup diff --git a/docs/manual/plots/dual-axes.en.md b/docs/manual/plots/dual-axes.en.md index d2a5869ca7..064975e800 100644 --- a/docs/manual/plots/dual-axes.en.md +++ b/docs/manual/plots/dual-axes.en.md @@ -71,7 +71,7 @@ const data = [[{ time: '1991'，value: 20 }], [{ time: '1992', count: 20 }]]; | columnStyle | _StyleAttr \| Function_ | 柱子样式配置，具体用法同[柱形图 columnStyle](./column#columnstyle) | | | label | _ContinueLegendLabelCfg_ | 柱形图 label,具体用法同[柱线图 label](./column#label) | | color | _string \| string[] \| Function_ | 指定点的颜色。具体用法同[折线图 color](./column#color) | -| groupField | _string_ | 拆分字段，用于堆叠+分组柱图，拆分优先级高于 seriesField。 | - | +| groupField | _string_ | 拆分字段，用于堆叠+分组柱图，拆分优先级高于 seriesField，isGroup: true 时会根据 groupField 进行分组。 | - | ### Plot Components diff --git a/docs/manual/plots/dual-axes.zh.md b/docs/manual/plots/dual-axes.zh.md index 046205e3b8..ee662372ff 100644 --- a/docs/manual/plots/dual-axes.zh.md +++ b/docs/manual/plots/dual-axes.zh.md @@ -71,7 +71,7 @@ const data = [[{ time: '1991'，value: 20 }], [{ time: '1992', count: 20 }]]; | columnStyle | _StyleAttr \| Function_ | 柱子样式配置，具体用法同[柱形图 columnStyle](./column#columnstyle) | | | label | _ContinueLegendLabelCfg_ | 柱形图 label,具体用法同[柱线图 label](./column#label) | | color | _string \| string[] \| Function_ | 指定点的颜色。具体用法同[折线图 color](./column#color) | -| groupField | _string_ | 拆分字段，用于堆叠+分组柱图，拆分优先级高于 seriesField。 | - | +| groupField | _string_ | 拆分字段，用于堆叠+分组柱图，拆分优先级高于 seriesField，isGroup: true 时会根据 groupField 进行分组。 | - | ### 图表组件 diff --git a/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts b/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts index 4f7b06d187..73365b9d37 100644 --- a/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts +++ b/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts @@ -38,7 +38,6 @@ const dualAxes = new DualAxes('container', { data: [columnData, lineData], xField: 'month', yField: ['value', 'value'], - padding: [20], geometryOptions: [ { geometry: 'column', diff --git a/src/adaptor/geometries/interval.ts b/src/adaptor/geometries/interval.ts index 4754a6c042..2679f5161b 100644 --- a/src/adaptor/geometries/interval.ts +++ b/src/adaptor/geometries/interval.ts @@ -22,7 +22,7 @@ export interface IntervalGeometryOptions extends GeometryOptions { readonly marginRatio?: number; /** 柱子样式配置 */ readonly interval?: MappingOptions; - /** 分组字段，优先级高于 seriesField */ + /** 分组字段，优先级高于 seriesField , isGroup: true 时会根据 groupField 进行分组。*/ readonly groupField?: string; } @@ -32,7 +32,7 @@ export interface IntervalGeometryOptions extends GeometryOptions { */ function otherAdaptor(params: Params): Params { const { chart, options, ext } = params; - const { seriesField, isGroup, isStack, marginRatio, widthRatio, groupField, data } = options; + const { seriesField, isGroup, isStack, marginRatio, widthRatio, groupField } = options; const g = ext.geometry as Geometry; /** @@ -57,7 +57,7 @@ function otherAdaptor(params: Params): Par } } - if (adjust.length && data?.length) { + if (adjust.length) { g.adjust(adjust); } diff --git a/src/plots/column/types.ts b/src/plots/column/types.ts index 8da0c12f69..89fb4db3b1 100644 --- a/src/plots/column/types.ts +++ b/src/plots/column/types.ts @@ -23,6 +23,6 @@ export interface ColumnOptions extends Options, OptionWithConversionTag, OptionW readonly marginRatio?: number; /** 柱子样式配置，可选 */ readonly columnStyle?: StyleAttr; - /** 分组字段，优先级高于 seriesField */ + /** 分组字段，优先级高于 seriesField , isGroup: true 时会根据 groupField 进行分组。*/ readonly groupField?: string; } diff --git a/src/plots/dual-axes/types.ts b/src/plots/dual-axes/types.ts index 57ff0c3dc6..40857a051e 100644 --- a/src/plots/dual-axes/types.ts +++ b/src/plots/dual-axes/types.ts @@ -29,8 +29,6 @@ type CommonGeometryOption = { readonly isGroup?: boolean; // 分组字段，优先级高于 seriesField readonly groupField?: string; - // 数据 - readonly data?: any[]; }; // 折线设置接口, 直接用 LineOption 吧 diff --git a/src/plots/dual-axes/util/geometry.ts b/src/plots/dual-axes/util/geometry.ts index c0bf7f7938..3ba5e7664a 100644 --- a/src/plots/dual-axes/util/geometry.ts +++ b/src/plots/dual-axes/util/geometry.ts @@ -15,7 +15,7 @@ export function drawSingleGeometry { const { options, chart } = params; const { geometryOption, yField } = options; - const { isStack, color, seriesField, groupField, isGroup, data } = geometryOption; + const { isStack, color, seriesField, groupField, isGroup } = geometryOption; const FIELD_KEY = ['xField', 'yField']; if (isLine(geometryOption)) { @@ -60,7 +60,7 @@ export function drawSingleGeometry { g.adjust(adjust); }); From 52b88b7f2ee40db84eb3d8d031b683ac018990c6 Mon Sep 17 00:00:00 2001 From: "liufu.lf" Date: Tue, 10 Nov 2020 20:39:24 +0800 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20tooltip=20?= =?UTF-8?q?=E5=81=8F=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../grouped-stacked-line/demo/stacked-grouped-column-line.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts b/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts index 73365b9d37..cb1679c8d1 100644 --- a/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts +++ b/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts @@ -12,14 +12,12 @@ const columnData = [ { name: 'London', month: 'Feb.', value: 10.9, type: '英语' }, { name: 'Berlin', month: 'Feb.', value: 22.4, type: '美术' }, { name: 'Berlin', month: 'Feb.', value: 32.4, type: '线性代数' }, - { name: 'Berlin', month: 'Feb.', value: 62.4, type: '线性代数-上' }, { name: 'beijing', month: 'Feb.', value: 42.4, type: '高数' }, { name: 'London', month: 'wed.', value: 2.9, type: '语文' }, { name: 'London', month: 'wed.', value: 5.9, type: '数学' }, { name: 'Berlin', month: 'wed.', value: 22.4, type: '美术' }, { name: 'Berlin', month: 'wed.', value: 32.4, type: '线性代数' }, { name: 'beijing', month: 'wed.', value: 42.4, type: '高数' }, - { name: 'beijing', month: 'wed.', value: 42.4, type: '高数-上' }, ]; const lineData = [ From 778b1d1fdc301d8869b76e743e5c8d2538038484 Mon Sep 17 00:00:00 2001 From: "liufu.lf" Date: Tue, 10 Nov 2020 21:05:02 +0800 Subject: [PATCH 6/7] =?UTF-8?q?docs:=20=E6=89=93=E5=BC=80tooltip?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/column/grouped/demo/stacked.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/column/grouped/demo/stacked.ts b/examples/column/grouped/demo/stacked.ts index 20127671b5..1482afa0d3 100644 --- a/examples/column/grouped/demo/stacked.ts +++ b/examples/column/grouped/demo/stacked.ts @@ -30,7 +30,6 @@ const dualAxes = new Column('container', { isStack: true, seriesField: 'type', groupField: 'name', - tooltip: false, }); dualAxes.render(); From 776ecbc293f1d014533b05626f02a50204b21487 Mon Sep 17 00:00:00 2001 From: "liufu.lf" Date: Tue, 10 Nov 2020 21:10:39 +0800 Subject: [PATCH 7/7] fix: word --- __tests__/data/common.ts | 16 ++++++++-------- __tests__/unit/plots/dual-axes/group-spec.ts | 6 +++--- examples/column/grouped/demo/stacked.ts | 12 ++++++------ .../demo/stacked-grouped-column-line.ts | 16 ++++++++-------- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/__tests__/data/common.ts b/__tests__/data/common.ts index f52e7a24dc..8906e74189 100644 --- a/__tests__/data/common.ts +++ b/__tests__/data/common.ts @@ -62,11 +62,11 @@ export const MultipleData = [ { name: 'Berlin', month: 'Feb.', value: 22.4, type: '美术' }, { name: 'Berlin', month: 'Feb.', value: 32.4, type: '线性代数' }, { name: 'beijing', month: 'Feb.', value: 42.4, type: '高数' }, - { name: 'London', month: 'wed.', value: 2.9, type: '语文' }, - { name: 'London', month: 'wed.', value: 5.9, type: '数学' }, - { name: 'Berlin', month: 'wed.', value: 22.4, type: '美术' }, - { name: 'Berlin', month: 'wed.', value: 32.4, type: '线性代数' }, - { name: 'beijing', month: 'wed.', value: 42.4, type: '高数' }, + { name: 'London', month: 'Mar.', value: 2.9, type: '语文' }, + { name: 'London', month: 'Mar.', value: 5.9, type: '数学' }, + { name: 'Berlin', month: 'Mar.', value: 22.4, type: '美术' }, + { name: 'Berlin', month: 'Mar.', value: 32.4, type: '线性代数' }, + { name: 'beijing', month: 'Mar.', value: 42.4, type: '高数' }, ]; export const LineData = [ @@ -76,7 +76,7 @@ export const LineData = [ { name: '福老师', month: 'Feb.', value: 18.9, type: '美术' }, { name: '逍老师', month: 'Feb.', value: 13.4, type: '线性代数' }, { name: '新老师', month: 'Feb.', value: 15.4, type: '高数' }, - { name: '福老师', month: 'wed.', value: 8.9, type: '美术' }, - { name: '逍老师', month: 'wed.', value: 6.4, type: '线性代数' }, - { name: '新老师', month: 'wed.', value: 5.4, type: '高数' }, + { name: '福老师', month: 'Mar.', value: 8.9, type: '美术' }, + { name: '逍老师', month: 'Mar.', value: 6.4, type: '线性代数' }, + { name: '新老师', month: 'Mar.', value: 5.4, type: '高数' }, ]; diff --git a/__tests__/unit/plots/dual-axes/group-spec.ts b/__tests__/unit/plots/dual-axes/group-spec.ts index 9c0114a2a4..0057327724 100644 --- a/__tests__/unit/plots/dual-axes/group-spec.ts +++ b/__tests__/unit/plots/dual-axes/group-spec.ts @@ -9,9 +9,9 @@ const columnData2 = [ { name: 'London', month: 'Feb.', value: 2.9, type: 'type1' }, { name: 'Berlin', month: 'Feb.', value: 32.4, type: 'type2' }, { name: 'beijing', month: 'Feb.', value: 42.4, type: 'type3' }, - { name: 'London', month: 'wed.', value: 2.9, type: 'type1' }, - { name: 'Berlin', month: 'wed.', value: 32.4, type: 'type2' }, - { name: 'beijing', month: 'wed.', value: 42.4, type: 'type3' }, + { name: 'London', month: 'Mar.', value: 2.9, type: 'type1' }, + { name: 'Berlin', month: 'Mar.', value: 32.4, type: 'type2' }, + { name: 'beijing', month: 'Mar.', value: 42.4, type: 'type3' }, ]; const color = [ diff --git a/examples/column/grouped/demo/stacked.ts b/examples/column/grouped/demo/stacked.ts index 1482afa0d3..df3449937a 100644 --- a/examples/column/grouped/demo/stacked.ts +++ b/examples/column/grouped/demo/stacked.ts @@ -14,12 +14,12 @@ const data = [ { name: 'Berlin', month: 'Feb.', value: 32.4, type: '线性代数' }, { name: 'Berlin', month: 'Feb.', value: 62.4, type: '线性代数-上' }, { name: 'beijing', month: 'Feb.', value: 42.4, type: '高数' }, - { name: 'London', month: 'wed.', value: 2.9, type: '语文' }, - { name: 'London', month: 'wed.', value: 5.9, type: '数学' }, - { name: 'Berlin', month: 'wed.', value: 22.4, type: '美术' }, - { name: 'Berlin', month: 'wed.', value: 32.4, type: '线性代数' }, - { name: 'beijing', month: 'wed.', value: 42.4, type: '高数' }, - { name: 'beijing', month: 'wed.', value: 42.4, type: '高数-上' }, + { name: 'London', month: 'Mar.', value: 2.9, type: '语文' }, + { name: 'London', month: 'Mar.', value: 5.9, type: '数学' }, + { name: 'Berlin', month: 'Mar.', value: 22.4, type: '美术' }, + { name: 'Berlin', month: 'Mar.', value: 32.4, type: '线性代数' }, + { name: 'beijing', month: 'Mar.', value: 42.4, type: '高数' }, + { name: 'beijing', month: 'Mar.', value: 42.4, type: '高数-上' }, ]; const dualAxes = new Column('container', { diff --git a/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts b/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts index cb1679c8d1..b20cbd7536 100644 --- a/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts +++ b/examples/dual-axes/grouped-stacked-line/demo/stacked-grouped-column-line.ts @@ -13,11 +13,11 @@ const columnData = [ { name: 'Berlin', month: 'Feb.', value: 22.4, type: '美术' }, { name: 'Berlin', month: 'Feb.', value: 32.4, type: '线性代数' }, { name: 'beijing', month: 'Feb.', value: 42.4, type: '高数' }, - { name: 'London', month: 'wed.', value: 2.9, type: '语文' }, - { name: 'London', month: 'wed.', value: 5.9, type: '数学' }, - { name: 'Berlin', month: 'wed.', value: 22.4, type: '美术' }, - { name: 'Berlin', month: 'wed.', value: 32.4, type: '线性代数' }, - { name: 'beijing', month: 'wed.', value: 42.4, type: '高数' }, + { name: 'London', month: 'Mar.', value: 2.9, type: '语文' }, + { name: 'London', month: 'Mar.', value: 5.9, type: '数学' }, + { name: 'Berlin', month: 'Mar.', value: 22.4, type: '美术' }, + { name: 'Berlin', month: 'Mar.', value: 32.4, type: '线性代数' }, + { name: 'beijing', month: 'Mar.', value: 42.4, type: '高数' }, ]; const lineData = [ @@ -27,9 +27,9 @@ const lineData = [ { name: '福老师', month: 'Feb.', value: 18.9, type: '美术' }, { name: '逍老师', month: 'Feb.', value: 13.4, type: '线性代数' }, { name: '新老师', month: 'Feb.', value: 15.4, type: '高数' }, - { name: '福老师', month: 'wed.', value: 8.9, type: '美术' }, - { name: '逍老师', month: 'wed.', value: 6.4, type: '线性代数' }, - { name: '新老师', month: 'wed.', value: 5.4, type: '高数' }, + { name: '福老师', month: 'Mar.', value: 8.9, type: '美术' }, + { name: '逍老师', month: 'Mar.', value: 6.4, type: '线性代数' }, + { name: '新老师', month: 'Mar.', value: 5.4, type: '高数' }, ]; const dualAxes = new DualAxes('container', {