fix: stack scale

antvis · Jun 14, 2024 · 89dd5a5 · 89dd5a5
1 parent c58dd31
commit 89dd5a5
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 27 deletions.
diff --git a/packages/f2/src/components/geometry/index.tsx b/packages/f2/src/components/geometry/index.tsx
@@ -274,10 +274,9 @@ class Geometry<
     const { chart, startOnZero = defaultStartOnZero, coord, adjust } = props;
     const { isPolar, transposed } = coord;
     const { y } = attrs;
-    const yField = y.field;
+
     // 如果从 0 开始，只调整 y 轴 scale
     if (startOnZero) {
-      const { y } = attrs;
       chart.scale.adjustStartZero(y.scale);
     }
     // 饼图的scale调整，关闭nice
@@ -286,12 +285,11 @@ class Geometry<
       transposed &&
       (adjust === 'stack' || (adjust as AdjustProps)?.type === 'stack')
     ) {
-      const { y } = attrs;
       chart.scale.adjustPieScale(y.scale);
     }
 
     if (adjust === 'stack' || (adjust as AdjustProps)?.type === 'stack') {
-      this._updateStackRange(yField, y.scale, this.dataArray);
+      chart.scale._updateStackRange(y.scale, flatten(this.dataArray));
     }
   }
 
@@ -391,29 +389,6 @@ class Geometry<
     return adjustData;
   }
 
-  _updateStackRange(field, scale, dataArray) {
-    const flattenArray = flatten(dataArray);
-    let min = Infinity;
-    let max = -Infinity;
-    for (let i = 0, len = flattenArray.length; i < len; i++) {
-      const obj = flattenArray[i];
-      const tmpMin = Math.min.apply(null, obj[field]);
-      const tmpMax = Math.max.apply(null, obj[field]);
-      if (tmpMin < min) {
-        min = tmpMin;
-      }
-      if (tmpMax > max) {
-        max = tmpMax;
-      }
-    }
-    if (min !== scale.min || max !== scale.max) {
-      scale.change({
-        min,
-        max,
-      });
-    }
-  }
-
   _processData() {
     const { props } = this;
     const { data: originData } = props;

diff --git a/packages/f2/src/controller/scale.ts b/packages/f2/src/controller/scale.ts
@@ -241,6 +241,37 @@ class ScaleController {
     });
   }
 
+  //堆叠下的scale调整
+  _updateStackRange(scale: Scale, flattenArray) {
+    const { options } = this;
+    const { field } = scale;
+    const option = options[field];
+
+    let dataMin = Infinity;
+    let dataMax = -Infinity;
+    for (let i = 0, len = flattenArray.length; i < len; i++) {
+      const obj = flattenArray[i];
+      const tmpMin = Math.min.apply(null, obj[field]);
+      const tmpMax = Math.max.apply(null, obj[field]);
+      if (tmpMin < dataMin) {
+        dataMin = tmpMin;
+      }
+      if (tmpMax > dataMax) {
+        dataMax = tmpMax;
+      }
+    }
+
+    // 如果有定义，则优先级更高
+    const min = option?.min || dataMin;
+    const max = option?.max || dataMax;
+    if (min !== scale.min || max !== scale.max) {
+      scale.change({
+        min,
+        max,
+      });
+    }
+  }
+
   // 获取scale 在 0点对位置的值
   getZeroValue(scale) {
     const { min, max } = scale;

diff --git a/...st/components/area/__image_snapshots__/area-test-tsx-面积图-层叠面积图-层叠面积图-1-snap.png b/...st/components/area/__image_snapshots__/area-test-tsx-面积图-层叠面积图-层叠面积图-1-snap.png
diff --git a/.../interval/example/__image_snapshots__/column-test-tsx-柱状图示例-堆叠柱图-max-1-snap.png b/.../interval/example/__image_snapshots__/column-test-tsx-柱状图示例-堆叠柱图-max-1-snap.png
diff --git a/packages/f2/test/components/interval/example/column.test.tsx b/packages/f2/test/components/interval/example/column.test.tsx
@@ -442,6 +442,116 @@ describe('柱状图示例', () => {
     expect(context).toMatchImageSnapshot();
   });
 
+  it('堆叠柱图-max', async () => {
+    const context = createContext('层叠柱图', {
+      height: '300px',
+      width: '400px',
+    });
+    const data = [
+      {
+        name: 'London',
+        月份: 'Jan.',
+        月均降雨量: 18.9,
+      },
+      {
+        name: 'London',
+        月份: 'Feb.',
+        月均降雨量: 28.8,
+      },
+      {
+        name: 'London',
+        月份: 'Mar.',
+        月均降雨量: 39.3,
+      },
+      {
+        name: 'London',
+        月份: 'Apr.',
+        月均降雨量: 81.4,
+      },
+      {
+        name: 'London',
+        月份: 'May.',
+        月均降雨量: 47,
+      },
+      {
+        name: 'London',
+        月份: 'Jun.',
+        月均降雨量: 20.3,
+      },
+      {
+        name: 'London',
+        月份: 'Jul.',
+        月均降雨量: 24,
+      },
+      {
+        name: 'London',
+        月份: 'Aug.',
+        月均降雨量: 35.6,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Jan.',
+        月均降雨量: 12.4,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Feb.',
+        月均降雨量: 23.2,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Mar.',
+        月均降雨量: 34.5,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Apr.',
+        月均降雨量: 99.7,
+      },
+      {
+        name: 'Berlin',
+        月份: 'May.',
+        月均降雨量: 52.6,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Jun.',
+        月均降雨量: 35.5,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Jul.',
+        月均降雨量: 37.4,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Aug.',
+        月均降雨量: 42.4,
+      },
+    ];
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart
+          data={data}
+          scale={{
+            月均降雨量: {
+              max: 100,
+            },
+          }}
+        >
+          <Axis field="月份" />
+          <Axis field="月均降雨量" />
+          <Interval x="月份" y="月均降雨量" color="name" adjust="stack" />
+        </Chart>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('百分比层叠柱图', async () => {
     const context = createContext('百分比层叠柱图', {
       height: '300px',