From f8a3a8d7ca8bf509f6cb69ddda58abbe2b740148 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=87=E6=AD=A3?= <60083015+hsp-sz@users.noreply.github.com> Date: Sun, 4 Feb 2024 18:37:38 +0800 Subject: [PATCH] feat: add interactive column (#6083) Co-authored-by: shengzheng --- site/docs/manual/core/state.en.md | 8 ++-- site/docs/manual/core/state.zh.md | 9 +++-- .../general/interval/demo/bar-basic.ts | 37 ++++++++++++++----- .../demo/{column.ts => column-interactive.ts} | 5 ++- site/examples/general/interval/demo/meta.json | 16 ++++---- 5 files changed, 48 insertions(+), 27 deletions(-) rename site/examples/general/interval/demo/{column.ts => column-interactive.ts} (66%) diff --git a/site/docs/manual/core/state.en.md b/site/docs/manual/core/state.en.md index 3e42b6d36e..658942518f 100644 --- a/site/docs/manual/core/state.en.md +++ b/site/docs/manual/core/state.en.md @@ -9,7 +9,7 @@ State in G2 is mainly used to control the state style of mark. These states will ({ type: 'interval', state: { - active: { fill: 'red', stroke: 2 }, + active: { fill: 'red', stroke: 'blue', strokeWidth: 2 }, inactive: { fill: '#aaa' }, }, }); @@ -20,12 +20,12 @@ State in G2 is mainly used to control the state style of mark. These states will // First way chart .interval() - .state('active', { fill: 'red', stroke: 2 }) + .state('active', { fill: 'red', stroke: 'blue', strokeWidth: 2 }) .state('inactive', { fill: '#aaa' }); // Second way chart.interval().state({ - active: { fill: 'red', stroke: 2 }, + active: { fill: 'red', stroke: 'blue', strokeWidth: 2 }, inactive: { fill: '#aaa' }, }); ``` @@ -81,7 +81,7 @@ There are currently 4 built-in states: .encode('x', 'letter') .encode('y', 'frequency') .axis('y', { labelFormatter: '.0%' }) - .state('selected', { fill: 'red' }) + .state('selected', { fill: 'red', stroke: 'blue', strokeWidth: 2 }) .state('unselected', { fill: '#aaa' }) .interaction('elementSelect'); // Set up selection interaction diff --git a/site/docs/manual/core/state.zh.md b/site/docs/manual/core/state.zh.md index 7875311e0d..229e2fde5e 100644 --- a/site/docs/manual/core/state.zh.md +++ b/site/docs/manual/core/state.zh.md @@ -9,7 +9,8 @@ G2 中**状态（State）** 主要用来控制标记的状态样式。这些状 ({ type: 'interval', state: { - active: { fill: 'red', stroke: 2 }, + /** fill 填充色；stroke 描边色；strokeWidth 描边宽度 */ + active: { fill: 'red', stroke: 'blue', strokeWidth: 2 }, inactive: { fill: '#aaa' }, }, }); @@ -20,12 +21,12 @@ G2 中**状态（State）** 主要用来控制标记的状态样式。这些状 // 第一种方式 chart .interval() - .state('active', { fill: 'red', stroke: 2 }) + .state('active', { fill: 'red', stroke: 'blue', strokeWidth: 2 }) .state('inactive', { fill: '#aaa' }); // 第二种方式 chart.interval().state({ - active: { fill: 'red', stroke: 2 }, + active: { fill: 'red', stroke: 'blue', strokeWidth: 2 }, inactive: { fill: '#aaa' }, }); ``` @@ -81,7 +82,7 @@ chart.interval().state({ .encode('x', 'letter') .encode('y', 'frequency') .axis('y', { labelFormatter: '.0%' }) - .state('selected', { fill: 'red' }) + .state('selected', { fill: 'red', stroke: 'blue', strokeWidth: 2 }) .state('unselected', { fill: '#aaa' }) .interaction('elementSelect'); // 设置选择交互 diff --git a/site/examples/general/interval/demo/bar-basic.ts b/site/examples/general/interval/demo/bar-basic.ts index 497f3e890b..cc00d8250d 100644 --- a/site/examples/general/interval/demo/bar-basic.ts +++ b/site/examples/general/interval/demo/bar-basic.ts @@ -1,21 +1,38 @@ import { Chart } from '@antv/g2'; const data = [ - { year: '1951 年', sales: 38 }, - { year: '1952 年', sales: 52 }, - { year: '1956 年', sales: 61 }, - { year: '1957 年', sales: 145 }, - { year: '1958 年', sales: 48 }, - { year: '1959 年', sales: 38 }, - { year: '1960 年', sales: 38 }, - { year: '1962 年', sales: 38 }, + { letter: 'A', frequency: 0.08167 }, + { letter: 'B', frequency: 0.01492 }, + { letter: 'C', frequency: 0.02782 }, + { letter: 'D', frequency: 0.04253 }, + { letter: 'E', frequency: 0.12702 }, + { letter: 'F', frequency: 0.02288 }, + { letter: 'G', frequency: 0.02015 }, + { letter: 'H', frequency: 0.06094 }, + { letter: 'I', frequency: 0.06966 }, + { letter: 'J', frequency: 0.00153 }, + { letter: 'K', frequency: 0.00772 }, + { letter: 'L', frequency: 0.04025 }, + { letter: 'M', frequency: 0.02406 }, + { letter: 'N', frequency: 0.06749 }, + { letter: 'O', frequency: 0.07507 }, + { letter: 'P', frequency: 0.01929 }, + { letter: 'Q', frequency: 0.00095 }, + { letter: 'R', frequency: 0.05987 }, + { letter: 'S', frequency: 0.06327 }, + { letter: 'T', frequency: 0.09056 }, + { letter: 'U', frequency: 0.02758 }, + { letter: 'V', frequency: 0.00978 }, + { letter: 'W', frequency: 0.0236 }, + { letter: 'X', frequency: 0.0015 }, + { letter: 'Y', frequency: 0.01974 }, + { letter: 'Z', frequency: 0.00074 }, ]; - const chart = new Chart({ container: 'container', autoFit: true, }); -chart.interval().data(data).encode('x', 'year').encode('y', 'sales'); +chart.interval().data(data).encode('x', 'letter').encode('y', 'frequency'); chart.render(); diff --git a/site/examples/general/interval/demo/column.ts b/site/examples/general/interval/demo/column-interactive.ts similarity index 66% rename from site/examples/general/interval/demo/column.ts rename to site/examples/general/interval/demo/column-interactive.ts index afae2cfc4e..157693b65d 100644 --- a/site/examples/general/interval/demo/column.ts +++ b/site/examples/general/interval/demo/column-interactive.ts @@ -17,6 +17,9 @@ chart }) .encode('x', 'letter') .encode('y', 'frequency') - .axis('y', { labelFormatter: '.0%' }); + .axis('y', { labelFormatter: '.0%' }) + .state('selected', { fill: '#1783FF', stroke: 'black', strokeWidth: 1 }) + .state('unselected', { fill: '#ccc' }) + .interaction('elementSelect'); // 设置高亮交互; chart.render(); diff --git a/site/examples/general/interval/demo/meta.json b/site/examples/general/interval/demo/meta.json index 0fec463492..ef3cff6f63 100644 --- a/site/examples/general/interval/demo/meta.json +++ b/site/examples/general/interval/demo/meta.json @@ -7,10 +7,10 @@ { "filename": "bar-basic.ts", "title": { - "zh": "简单柱状图", + "zh": "简单柱形图", "en": "Simple Column" }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*fNFMRb3DlokAAAAAAAAAAAAADmJ7AQ/original" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kvZLSLxjnkIAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "bar-basic-transposed.ts", @@ -23,7 +23,7 @@ { "filename": "bar-basic-stacked.ts", "title": { - "zh": "简单堆叠柱状图", + "zh": "简单堆叠柱形图", "en": "Simple Stacked Column" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*69WQTY8YrWgAAAAAAAAAAAAADmJ7AQ/original" @@ -31,18 +31,18 @@ { "filename": "bar-basic-grouped.ts", "title": { - "zh": "简单分组柱状图", + "zh": "简单分组柱形图", "en": "Simple Grouped Column" }, "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kqGUT4wRYrsAAAAAAAAAAAAADmJ7AQ/original" }, { - "filename": "column.ts", + "filename": "column-interactive.ts", "title": { - "zh": "柱形图", - "en": "Column Chart" + "zh": "可交互柱形图", + "en": "Interactive Column Chart" }, - "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kvZLSLxjnkIAAAAAAAAAAAAADmJ7AQ/original" + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*QdN3S6Zi4SUAAAAAAAAAAAAADmJ7AQ/original" }, { "filename": "column-maxwidth.ts",