From b4c34bfd727af0b3bb34a0fffe6cac06eb661da5 Mon Sep 17 00:00:00 2001 From: Runtus <893119806@qq.com> Date: Sun, 5 Nov 2023 21:19:49 +0800 Subject: [PATCH 1/5] feat: add two-axis-chart demos and finish code --- .../general/dual/demo/two-axis-bar.ts | 41 ++++++++++++++ .../general/dual/demo/two-axis-line-bar.ts | 45 +++++++++++++++ .../dual/demo/two-axis-multi-line-bar.ts | 56 +++++++++++++++++++ .../dual/demo/two-axis-stacked-group-bar.ts | 49 ++++++++++++++++ 4 files changed, 191 insertions(+) create mode 100644 site/examples/general/dual/demo/two-axis-bar.ts create mode 100644 site/examples/general/dual/demo/two-axis-line-bar.ts create mode 100644 site/examples/general/dual/demo/two-axis-multi-line-bar.ts create mode 100644 site/examples/general/dual/demo/two-axis-stacked-group-bar.ts diff --git a/site/examples/general/dual/demo/two-axis-bar.ts b/site/examples/general/dual/demo/two-axis-bar.ts new file mode 100644 index 0000000000..33d399a30e --- /dev/null +++ b/site/examples/general/dual/demo/two-axis-bar.ts @@ -0,0 +1,41 @@ +/** + * 双轴条形图 + */ +import { Chart } from '@antv/g2'; + +const chart = new Chart({ + container: 'container', + autoFit: true +}); + + +const data = [ + { time: '10:10', call: 4, waiting: 2, people: 2 }, + { time: '10:15', call: 2, waiting: 6, people: 3 }, + { time: '10:20', call: 13, waiting: 2, people: 5 }, + { time: '10:25', call: 9, waiting: 9, people: 1 }, + { time: '10:30', call: 5, waiting: 2, people: 3 }, + { time: '10:35', call: 8, waiting: 2, people: 1 }, + { time: '10:40', call: 13, waiting: 1, people: 2 }, +] + +chart.data(data); + +chart + .interval() + .encode('x', 'time') + .encode('y', 'waiting') + .encode('color', () => 'waiting') + .encode('series', () => 'waiting') + .axis('y', { title: 'Waiting' }); + +chart + .interval() + .encode('x', 'time') + .encode('y', 'people') + .encode('color', () => 'people') + .encode('series', () => 'people') + .scale('y', { independent: true }) + .axis('y', { position: 'right', grid: null, title: 'People' }); + +chart.render() \ No newline at end of file diff --git a/site/examples/general/dual/demo/two-axis-line-bar.ts b/site/examples/general/dual/demo/two-axis-line-bar.ts new file mode 100644 index 0000000000..5018356604 --- /dev/null +++ b/site/examples/general/dual/demo/two-axis-line-bar.ts @@ -0,0 +1,45 @@ +import { Chart } from '@antv/g2'; + +const chart = new Chart({ + container: 'container', + autoFit: true +}); + +const data = [ + { time: '10:10', call: 4, waiting: 2, people: 2 }, + { time: '10:15', call: 2, waiting: 6, people: 3 }, + { time: '10:20', call: 13, waiting: 2, people: 5 }, + { time: '10:25', call: 9, waiting: 9, people: 1 }, + { time: '10:30', call: 5, waiting: 2, people: 3 }, + { time: '10:35', call: 8, waiting: 2, people: 1 }, + { time: '10:40', call: 13, waiting: 1, people: 2 }, +]; + +chart.data(data); + +chart + .interval() + .encode('x', 'time') + .encode('y', 'waiting') + .encode('color', () => 'waiting') + .encode('series', () => 'waiting') + .axis('y', { title: 'Waiting' }) + .scale('y', { nice: true }); + +chart + .interval() + .encode('x', 'time') + .encode('y', 'people') + .encode('color', () => 'people') + .encode('series', () => 'people') + .scale('y', { independent: true }) + .axis('y', { position: 'right', grid: null, title: 'People' }); + +chart + .line() + .encode('x', 'time') + .encode('y', 'call') + .encode('color', () => 'call') + .scale('series', { independent: true }); + +chart.render(); diff --git a/site/examples/general/dual/demo/two-axis-multi-line-bar.ts b/site/examples/general/dual/demo/two-axis-multi-line-bar.ts new file mode 100644 index 0000000000..6907e05551 --- /dev/null +++ b/site/examples/general/dual/demo/two-axis-multi-line-bar.ts @@ -0,0 +1,56 @@ +/** + * 双轴多折现条形图 + */ +import { Chart } from '@antv/g2'; + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +const data = [ + { time: '10:10', call: 4, waiting: 2, people: 2, mock: 3 }, + { time: '10:15', call: 2, waiting: 6, people: 3, mock: 4 }, + { time: '10:20', call: 13, waiting: 2, people: 5, mock: 1 }, + { time: '10:25', call: 9, waiting: 9, people: 1, mock: 2 }, + { time: '10:30', call: 5, waiting: 2, people: 3, mock: 5 }, + { time: '10:35', call: 8, waiting: 2, people: 1, mock: 3 }, + { time: '10:40', call: 13, waiting: 1, people: 2, mock: 2 }, +]; + +chart.data(data); + +chart + .interval() + .encode('x', 'time') + .encode('y', 'waiting') + .encode('color', () => 'waiting') + .encode('series', () => 'waiting') + .axis('y', { title: null }) + .scale('y', { nice: true }); + +chart + .interval() + .encode('x', 'time') + .encode('y', 'people') + .encode('color', () => 'people') + .encode('series', () => 'people') + .scale('y', { key: '2' }) + .axis('y', { position: 'right', grid: null, title: null }); + +chart + .line() + .encode('x', 'time') + .encode('y', 'call') + .encode('color', () => 'call') + .scale('series', { independent: true }); + +chart + .line() + .encode('x', 'time') + .encode('y', 'mock') + .encode('color', () => 'mock') + .scale('y', { key: '2' }) + .scale('series', { independent: true }); + +chart.render(); diff --git a/site/examples/general/dual/demo/two-axis-stacked-group-bar.ts b/site/examples/general/dual/demo/two-axis-stacked-group-bar.ts new file mode 100644 index 0000000000..80ed633232 --- /dev/null +++ b/site/examples/general/dual/demo/two-axis-stacked-group-bar.ts @@ -0,0 +1,49 @@ +import { Chart } from '@antv/g2'; + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +const data = [ + { time: '10:10', call: 4, waiting: 2, people: 2, mock: 3 }, + { time: '10:15', call: 2, waiting: 6, people: 3, mock: 4 }, + { time: '10:20', call: 13, waiting: 2, people: 5, mock: 1 }, + { time: '10:25', call: 9, waiting: 9, people: 1, mock: 2 }, + { time: '10:30', call: 5, waiting: 2, people: 3, mock: 5 }, + { time: '10:35', call: 8, waiting: 2, people: 1, mock: 3 }, + { time: '10:40', call: 13, waiting: 1, people: 2, mock: 2 }, +]; + +chart.data(data); + +chart + .interval() + .data({ + transform: [{ type: 'fold', fields: ['call', 'waiting'] }], + }) + .encode('x', 'time') + .encode('y', 'value') + .encode('color', 'key') + .encode('series', () => 'a') + .transform({ type: 'stackY' }) + .scale('y', { nice: true }) + .axis('y', { title: null }); + +chart + .interval() + .encode('x', 'time') + .encode('y', 'people') + .encode('color', () => 'people') + .encode('series', () => 'b'); + +chart + .interval() + .encode('x', 'time') + .encode('y', 'mock') + .encode('color', () => 'mock') + .encode('series', () => 'c') + .scale('y', { independent: true }) + .axis('y', { position: 'right' }); + +chart.render(); From 3e87c9ee111e7e24ab34baf6322896b45fdca0a8 Mon Sep 17 00:00:00 2001 From: Runtus <893119806@qq.com> Date: Mon, 6 Nov 2023 00:36:44 +0800 Subject: [PATCH 2/5] feat: add demo info in meta.json --- site/examples/general/dual/demo/meta.json | 28 +++++++++++++++++++ .../general/dual/demo/two-axis-bar.ts | 28 ++++++++----------- .../dual/demo/two-axis-multi-line-bar.ts | 3 -- 3 files changed, 40 insertions(+), 19 deletions(-) diff --git a/site/examples/general/dual/demo/meta.json b/site/examples/general/dual/demo/meta.json index 1c947f4a13..220e545a66 100644 --- a/site/examples/general/dual/demo/meta.json +++ b/site/examples/general/dual/demo/meta.json @@ -35,6 +35,34 @@ "en": "Pareto Chart" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*COKsS6s75kYAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "two-axis-bar.ts", + "title": { + "zh": " 双轴条形图", + "en": "Two Axis Bar Chart" + } + }, + { + "filename": "two-axis-line-bar.ts", + "title": { + "zh": "双轴折线条形图", + "en": "Two Axis Line Bar Chart" + } + }, + { + "filename": "two-axis-multi-line-bar.ts", + "title": { + "zh": "双轴多折线条形图", + "en": "Two Axis multiple Bar Chart" + } + }, + { + "filename": "two-axis-stacked-group-bar.ts", + "title": { + "zh": "双轴堆叠分组条形图", + "en": "Two Axis Stacked Group Bar" + } } ] } diff --git a/site/examples/general/dual/demo/two-axis-bar.ts b/site/examples/general/dual/demo/two-axis-bar.ts index 33d399a30e..426202e1ae 100644 --- a/site/examples/general/dual/demo/two-axis-bar.ts +++ b/site/examples/general/dual/demo/two-axis-bar.ts @@ -1,24 +1,20 @@ -/** - * 双轴条形图 - */ import { Chart } from '@antv/g2'; const chart = new Chart({ - container: 'container', - autoFit: true + container: 'container', + autoFit: true, }); - const data = [ - { time: '10:10', call: 4, waiting: 2, people: 2 }, - { time: '10:15', call: 2, waiting: 6, people: 3 }, - { time: '10:20', call: 13, waiting: 2, people: 5 }, - { time: '10:25', call: 9, waiting: 9, people: 1 }, - { time: '10:30', call: 5, waiting: 2, people: 3 }, - { time: '10:35', call: 8, waiting: 2, people: 1 }, - { time: '10:40', call: 13, waiting: 1, people: 2 }, -] - + { time: '10:10', call: 4, waiting: 2, people: 2 }, + { time: '10:15', call: 2, waiting: 6, people: 3 }, + { time: '10:20', call: 13, waiting: 2, people: 5 }, + { time: '10:25', call: 9, waiting: 9, people: 1 }, + { time: '10:30', call: 5, waiting: 2, people: 3 }, + { time: '10:35', call: 8, waiting: 2, people: 1 }, + { time: '10:40', call: 13, waiting: 1, people: 2 }, +]; + chart.data(data); chart @@ -38,4 +34,4 @@ chart .scale('y', { independent: true }) .axis('y', { position: 'right', grid: null, title: 'People' }); -chart.render() \ No newline at end of file +chart.render(); diff --git a/site/examples/general/dual/demo/two-axis-multi-line-bar.ts b/site/examples/general/dual/demo/two-axis-multi-line-bar.ts index 6907e05551..0ab6d7b38f 100644 --- a/site/examples/general/dual/demo/two-axis-multi-line-bar.ts +++ b/site/examples/general/dual/demo/two-axis-multi-line-bar.ts @@ -1,6 +1,3 @@ -/** - * 双轴多折现条形图 - */ import { Chart } from '@antv/g2'; const chart = new Chart({ From 72ce7424fc6016c8e62b1cadbb399f53b3d94ff9 Mon Sep 17 00:00:00 2001 From: Runtus <893119806@qq.com> Date: Mon, 6 Nov 2023 10:14:58 +0800 Subject: [PATCH 3/5] feat: add screenshot link to meta.json and format code style --- site/examples/general/dual/demo/meta.json | 14 +++++++++----- .../general/dual/demo/two-axis-line-bar.ts | 4 ++-- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/site/examples/general/dual/demo/meta.json b/site/examples/general/dual/demo/meta.json index 220e545a66..93889e6cd7 100644 --- a/site/examples/general/dual/demo/meta.json +++ b/site/examples/general/dual/demo/meta.json @@ -41,28 +41,32 @@ "title": { "zh": " 双轴条形图", "en": "Two Axis Bar Chart" - } + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gZCnTpDcG_UAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "two-axis-line-bar.ts", "title": { "zh": "双轴折线条形图", "en": "Two Axis Line Bar Chart" - } + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*xyKZRYhgvMMAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "two-axis-multi-line-bar.ts", "title": { "zh": "双轴多折线条形图", "en": "Two Axis multiple Bar Chart" - } + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*xyXJRIAxTKgAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "two-axis-stacked-group-bar.ts", "title": { "zh": "双轴堆叠分组条形图", "en": "Two Axis Stacked Group Bar" - } + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*O-pVR7pt2DkAAAAAAAAAAAAADmJ7AQ/original" } ] -} +} \ No newline at end of file diff --git a/site/examples/general/dual/demo/two-axis-line-bar.ts b/site/examples/general/dual/demo/two-axis-line-bar.ts index 5018356604..47a02ac670 100644 --- a/site/examples/general/dual/demo/two-axis-line-bar.ts +++ b/site/examples/general/dual/demo/two-axis-line-bar.ts @@ -1,8 +1,8 @@ import { Chart } from '@antv/g2'; const chart = new Chart({ - container: 'container', - autoFit: true + container: 'container', + autoFit: true, }); const data = [ From b06a2426eed9c62a0d8a98d8100470f3e2f7bec6 Mon Sep 17 00:00:00 2001 From: Runtus <893119806@qq.com> Date: Mon, 6 Nov 2023 10:27:15 +0800 Subject: [PATCH 4/5] fix: fix the chart title in meta.json --- site/examples/general/dual/demo/meta.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/examples/general/dual/demo/meta.json b/site/examples/general/dual/demo/meta.json index 93889e6cd7..c61c1c8216 100644 --- a/site/examples/general/dual/demo/meta.json +++ b/site/examples/general/dual/demo/meta.json @@ -64,7 +64,7 @@ "filename": "two-axis-stacked-group-bar.ts", "title": { "zh": "双轴堆叠分组条形图", - "en": "Two Axis Stacked Group Bar" + "en": "Two Axis Stacked Group Bar Chart" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*O-pVR7pt2DkAAAAAAAAAAAAADmJ7AQ/original" } From 731f8a4d93924fc8a6cf943920fffc64b64073c4 Mon Sep 17 00:00:00 2001 From: Runtus <893119806@qq.com> Date: Mon, 6 Nov 2023 11:35:31 +0800 Subject: [PATCH 5/5] fix: change the chart name in English --- .../demo/{two-axis-bar.ts => dual-axis-bar.ts} | 0 ...-axis-line-bar.ts => dual-axis-line-bar.ts} | 0 ...line-bar.ts => dual-axis-multi-line-bar.ts} | 0 ...p-bar.ts => dual-axis-stacked-group-bar.ts} | 0 site/examples/general/dual/demo/meta.json | 18 +++++++++--------- 5 files changed, 9 insertions(+), 9 deletions(-) rename site/examples/general/dual/demo/{two-axis-bar.ts => dual-axis-bar.ts} (100%) rename site/examples/general/dual/demo/{two-axis-line-bar.ts => dual-axis-line-bar.ts} (100%) rename site/examples/general/dual/demo/{two-axis-multi-line-bar.ts => dual-axis-multi-line-bar.ts} (100%) rename site/examples/general/dual/demo/{two-axis-stacked-group-bar.ts => dual-axis-stacked-group-bar.ts} (100%) diff --git a/site/examples/general/dual/demo/two-axis-bar.ts b/site/examples/general/dual/demo/dual-axis-bar.ts similarity index 100% rename from site/examples/general/dual/demo/two-axis-bar.ts rename to site/examples/general/dual/demo/dual-axis-bar.ts diff --git a/site/examples/general/dual/demo/two-axis-line-bar.ts b/site/examples/general/dual/demo/dual-axis-line-bar.ts similarity index 100% rename from site/examples/general/dual/demo/two-axis-line-bar.ts rename to site/examples/general/dual/demo/dual-axis-line-bar.ts diff --git a/site/examples/general/dual/demo/two-axis-multi-line-bar.ts b/site/examples/general/dual/demo/dual-axis-multi-line-bar.ts similarity index 100% rename from site/examples/general/dual/demo/two-axis-multi-line-bar.ts rename to site/examples/general/dual/demo/dual-axis-multi-line-bar.ts diff --git a/site/examples/general/dual/demo/two-axis-stacked-group-bar.ts b/site/examples/general/dual/demo/dual-axis-stacked-group-bar.ts similarity index 100% rename from site/examples/general/dual/demo/two-axis-stacked-group-bar.ts rename to site/examples/general/dual/demo/dual-axis-stacked-group-bar.ts diff --git a/site/examples/general/dual/demo/meta.json b/site/examples/general/dual/demo/meta.json index c61c1c8216..fed671c7be 100644 --- a/site/examples/general/dual/demo/meta.json +++ b/site/examples/general/dual/demo/meta.json @@ -37,34 +37,34 @@ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*COKsS6s75kYAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "two-axis-bar.ts", + "filename": "dual-axis-bar.ts", "title": { - "zh": " 双轴条形图", - "en": "Two Axis Bar Chart" + "zh": "双轴条形图", + "en": "Dual Axis Bar Chart" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gZCnTpDcG_UAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "two-axis-line-bar.ts", + "filename": "dual-axis-line-bar.ts", "title": { "zh": "双轴折线条形图", - "en": "Two Axis Line Bar Chart" + "en": "Dual Axis Line Bar Chart" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*xyKZRYhgvMMAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "two-axis-multi-line-bar.ts", + "filename": "dual-axis-multi-line-bar.ts", "title": { "zh": "双轴多折线条形图", - "en": "Two Axis multiple Bar Chart" + "en": "Dual Axis Multiple Line Bar Chart" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*xyXJRIAxTKgAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "two-axis-stacked-group-bar.ts", + "filename": "dual-axis-stacked-group-bar.ts", "title": { "zh": "双轴堆叠分组条形图", - "en": "Two Axis Stacked Group Bar Chart" + "en": "Dual Axis Stacked Group Bar Chart" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*O-pVR7pt2DkAAAAAAAAAAAAADmJ7AQ/original" }