From bbc2eefdfebee7ef78b8ef0240adaed7131149b6 Mon Sep 17 00:00:00 2001
From: xiecg <onxiecg@gmail.com>
Date: Mon, 27 Apr 2026 11:17:08 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(column):=20=E4=BF=AE=E5=A4=8D=E6=9F=B1?=
 =?UTF-8?q?=E5=9B=BE=20color=20=E5=9B=9E=E8=B0=83=E5=AF=BC=E8=87=B4=20slid?=
 =?UTF-8?q?er=20=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 __tests__/unit/plots/column/index-spec.ts | 26 ++++++++++++
 src/adaptor/geometries/base.ts            | 51 ++++++++++++++++++-----
 2 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/__tests__/unit/plots/column/index-spec.ts b/__tests__/unit/plots/column/index-spec.ts
index 633a4eaae8..28b6c0f65f 100644
--- a/__tests__/unit/plots/column/index-spec.ts
+++ b/__tests__/unit/plots/column/index-spec.ts
@@ -83,6 +83,32 @@ describe('column', () => {
     column.destroy();
   });
 
+  it('x*y with color callback', () => {
+    const column = new Column(createDiv('x*y with color callback'), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      slider: {
+        start: 0,
+        end: 0.5,
+      },
+      color: (datum) => (datum.sales > 100 ? 'red' : 'green'),
+    });
+
+    column.render();
+
+    const geometry = column.chart.geometries[0];
+
+    expect(geometry.getAttribute('color')).toBeUndefined();
+    expect(geometry.getAttribute('style').getFields()).toEqual(['area']);
+    expect(column.chart.getGroupScales()).toHaveLength(0);
+    expect(geometry.elements[0].shape.attr('fill')).toBe('green');
+
+    column.destroy();
+  });
+
   it('grouped column', () => {
     const column = new Column(createDiv('grouped column'), {
       width: 400,
diff --git a/src/adaptor/geometries/base.ts b/src/adaptor/geometries/base.ts
index 6eb6b8d7a4..b0d1cd0ea7 100644
--- a/src/adaptor/geometries/base.ts
+++ b/src/adaptor/geometries/base.ts
@@ -126,17 +126,22 @@ export function getMappingFunction(mappingFields: string[], func: (datum: Datum)
   if (!func) return undefined;
   // 返回函数
   return (...args: any[]) => {
-    const params: Datum = {};
+    const params = getMappingDatum(mappingFields, args);
+    return func(params);
+  };
+}
 
-    mappingFields.forEach((f: string, idx: number) => {
-      params[f] = args[idx];
-    });
+function getMappingDatum(mappingFields: string[], args: any[]): Datum {
+  const params: Datum = {};
 
-    // 删除 undefined
-    delete params['undefined'];
+  mappingFields.forEach((f: string, idx: number) => {
+    params[f] = args[idx];
+  });
 
-    return func(params);
-  };
+  // 删除 undefined
+  delete params['undefined'];
+
+  return params;
 }
 
 /**
@@ -170,6 +175,9 @@ export function geometry<O extends GeometryOptions>(params: Params<O>): Params<O
 
   // 创建 geometry
   const geometry = chart[type](args).position(`${xField}*${yField}`);
+  let colorStyleFields: string[] = [];
+  let colorStyleMappingField: string;
+  let colorStyleCallback: (datum: Datum) => string;
 
   /**
    * color 的几种情况
@@ -182,7 +190,13 @@ export function geometry<O extends GeometryOptions>(params: Params<O>): Params<O
     colorField ? geometry.color(colorField, color) : geometry.color(color);
   } else if (isFunction(color)) {
     const { mappingFields, tileMappingField } = getMappingField(options, 'color');
-    geometry.color(customMappingField || tileMappingField, getMappingFunction(mappingFields, color));
+    if (type === 'interval' && !colorField) {
+      colorStyleFields = mappingFields;
+      colorStyleMappingField = customMappingField || tileMappingField;
+      colorStyleCallback = color;
+    } else {
+      geometry.color(customMappingField || tileMappingField, getMappingFunction(mappingFields, color));
+    }
   } else {
     colorField && geometry.color(colorField, color);
   }
@@ -224,7 +238,24 @@ export function geometry<O extends GeometryOptions>(params: Params<O>): Params<O
    * g.style({ fill: 'red' });
    * g.style('x*y*color', (x, y, color) => ({ fill: 'red' }));
    */
-  if (isFunction(style)) {
+  if (!isEmpty(colorStyleFields)) {
+    if (isFunction(style)) {
+      const { mappingFields } = getMappingField(options, 'style');
+      const fields = uniq([...colorStyleFields, ...mappingFields]);
+      geometry.style(fields.join('*'), (...args: any[]) => {
+        const datum = getMappingDatum(fields, args);
+        return {
+          fill: colorStyleCallback(datum),
+          ...style(datum),
+        };
+      });
+    } else {
+      geometry.style(colorStyleMappingField, (...args: any[]) => ({
+        fill: getMappingFunction(colorStyleFields, colorStyleCallback)(...args),
+        ...(isObject(style) ? style : {}),
+      }));
+    }
+  } else if (isFunction(style)) {
     const { mappingFields, tileMappingField } = getMappingField(options, 'style');
     geometry.style(tileMappingField, getMappingFunction(mappingFields, style));
   } else if (isObject(style)) {

From 5b604d0ce9dc0978a817f76f04e4ecf355154a26 Mon Sep 17 00:00:00 2001
From: xiecg <xiecg53@gmail.com>
Date: Mon, 27 Apr 2026 13:58:30 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor(column):=20=E4=BC=98=E5=8C=96=20co?=
 =?UTF-8?q?lor=20=E5=9B=9E=E8=B0=83=E6=98=A0=E5=B0=84=E6=89=A7=E8=A1=8C?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/adaptor/geometries/base.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/adaptor/geometries/base.ts b/src/adaptor/geometries/base.ts
index b0d1cd0ea7..a17518054a 100644
--- a/src/adaptor/geometries/base.ts
+++ b/src/adaptor/geometries/base.ts
@@ -251,7 +251,7 @@ export function geometry<O extends GeometryOptions>(params: Params<O>): Params<O
       });
     } else {
       geometry.style(colorStyleMappingField, (...args: any[]) => ({
-        fill: getMappingFunction(colorStyleFields, colorStyleCallback)(...args),
+        fill: colorStyleCallback(getMappingDatum(colorStyleFields, args)),
         ...(isObject(style) ? style : {}),
       }));
     }