feat: add interactive column (antvis#6083)

Co-authored-by: shengzheng <[email protected]>
foolvip · Feb 4, 2024 · f8a3a8d · f8a3a8d
1 parent ffac8f8
commit f8a3a8d
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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/.../examples/general/interval/demo/column.ts → ...neral/interval/demo/column-interactive.ts b/.../examples/general/interval/demo/column.ts → ...neral/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
@@ -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,26 +23,26 @@
     {
       "filename": "bar-basic-stacked.ts",
       "title": {
-        "zh": "简单堆叠柱状图",
+        "zh": "简单堆叠柱形图",
         "en": "Simple Stacked Column"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*69WQTY8YrWgAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
       "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",