fix: 修复cat类型时guide record计算错误问题 (#1381)

Co-authored-by: 不狸 <junyu.junyujiang@alibaba-inc.com>
antvis · Mar 7, 2022 · c9d86a6 · c9d86a6
1 parent c3a0a04
commit c9d86a6
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 11 deletions.
diff --git a/packages/f2/src/components/guide/withGuide.tsx b/packages/f2/src/components/guide/withGuide.tsx
@@ -65,21 +65,25 @@ export default (View) => {
 
     // 解析record里的模板字符串，如min、max、50%...
     parseReplaceStr(value, scale) {
-      const replaceMap = { min: 0, max: 1, median: 0.5 };
+      const replaceMap = {
+        min: 0,
+        max: 1,
+        median: 0.5,
+      };
 
       // 传入的是 min、max、median 的
       if (!isNil(replaceMap[value])) {
-        return scale.invert(replaceMap[value]);
+        return replaceMap[value];
       }
 
       // 传入的是 xx%
       if (isString(value) && value.indexOf('%') != -1 && !isNaN(Number(value.slice(0, -1)))) {
         const rateValue = Number(value.slice(0, -1));
         const percent = rateValue / 100;
-        return scale.invert(percent);
+        return percent;
       }
 
-      return value;
+      return scale.scale(value);
     }
 
     parsePoint(record) {
@@ -89,13 +93,9 @@ export default (View) => {
       // 只取第一个yScale
       const yScale = chart.getYScales()[0];
 
-      // 解析record
-      const xValue = this.parseReplaceStr(record[xScale.field], xScale);
-      const yValue = this.parseReplaceStr(record[yScale.field], yScale);
-
-      // 归一化
-      const x = xScale.scale(xValue);
-      const y = yScale.scale(yValue);
+      // 解析 record 为归一化后的坐标
+      const x = this.parseReplaceStr(record[xScale.field], xScale);
+      const y = this.parseReplaceStr(record[yScale.field], yScale);
 
       return coord.convertPoint({ x, y });
     }

diff --git a/...guide/__image_snapshots__/type-test-tsx-guide-line-guide-in-category-1-snap.png b/...guide/__image_snapshots__/type-test-tsx-guide-line-guide-in-category-1-snap.png
diff --git a/packages/f2/test/components/guide/type.test.tsx b/packages/f2/test/components/guide/type.test.tsx
@@ -271,4 +271,41 @@ describe('Guide', () => {
     await delay(500);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('LineGuide in Category', async () => {
+    const context = createContext('LineGuideInCategory');
+    const data = [
+      { genre: 'Sports', sold: 275 },
+      { genre: 'Strategy', sold: 115 },
+      { genre: 'Action', sold: 120 },
+      { genre: 'Shooter', sold: 350 },
+      { genre: 'Other', sold: -110 },
+    ];
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="genre" />
+          <Axis field="sold" min={0} />
+          <Interval x="genre" y="sold" color="genre" />
+          <LineGuide
+            records={[
+              { genre: 'min', sold: 100 },
+              { genre: 'max', sold: 100 },
+            ]}
+            style={{
+              stroke: '#d0502d',
+              lineWidth: 2,
+              lineCap: 'round',
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
 });