fix(scatter): fix scatter tooltip

antvis · Dec 30, 2019 · b452862 · b452862
1 parent 0dd05a8
commit b452862
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 91 deletions.
diff --git a/demos/scatter-basic.ts b/demos/scatter-basic.ts
@@ -1,50 +1,15 @@
 // 基础散点图
 
 $.get('data/country-economy.json', function(data) {
-  const data2 = [
-    { x: 1, y: 4.181 },
-    { x: 2, y: 4.665 },
-    { x: 3, y: 5.296 },
-    { x: 4, y: 5.365 },
-    { x: 5, y: 5.448 },
-    { x: 6, y: 5.744 },
-    { x: 7, y: 5.653 },
-    { x: 8, y: 5.844 },
-    { x: 9, y: 6.362 },
-    { x: 10, y: 6.38 },
-    { x: 11, y: 6.311 },
-    { x: 12, y: 6.457 },
-    { x: 13, y: 6.479 },
-    { x: 14, y: 6.59 },
-    { x: 15, y: 6.74 },
-    { x: 16, y: 6.58 },
-    { x: 17, y: 6.852 },
-    { x: 18, y: 6.531 },
-    { x: 19, y: 6.682 },
-    { x: 20, y: 7.013 },
-    { x: 21, y: 6.82 },
-    { x: 22, y: 6.647 },
-    { x: 23, y: 6.951 },
-    { x: 24, y: 7.121 },
-    { x: 25, y: 7.143 },
-    { x: 26, y: 6.914 },
-    { x: 27, y: 6.941 },
-    { x: 28, y: 7.226 },
-    { x: 29, y: 6.898 },
-    { x: 30, y: 7.392 },
-    { x: 31, y: 6.938 },
-  ];
   const scatterPlot = new g2plot.Scatter(document.getElementById('canvas'), {
     width: 800,
     height: 600,
     padding: 'auto',
-    data: data2,
-    // xField: 'GDP',
-    xField: 'x',
-    // yField: 'LifeExpectancy',
-    yField: 'y',
+    data,
+    xField: 'GDP',
+    yField: 'LifeExpectancy',
     pointSize: 5,
-    /* colorFields: 'continent',
+    colorField: 'continent',
     quadrant: {
       xBaseline: 20000,
       yBaseline: 70,
@@ -57,7 +22,7 @@ $.get('data/country-economy.json', function(data) {
       label: {
         text: ['第一象限', '第二象限', '第三象限', '第四象限'],
       },
-    },*/
+    },
     trendline: {
       type: 'quad',
       showConfidence: true,

diff --git a/src/plots/bubble/layer.ts b/src/plots/bubble/layer.ts
@@ -20,37 +20,18 @@ export default class BubbleLayer<T extends BubbleLayerConfig = BubbleLayerConfig
     return _.deepMix({}, super.getDefaultOptions(), {
       pointSize: [8, 58],
       pointStyle: {
+        strokeOpacity: 1,
+        fillOpacity: 1,
         opacity: 0.5,
       },
-      xAxis: {
-        grid: {
-          visible: true,
-        },
-      },
-      yAxis: {
-        grid: {
-          visible: true,
-        },
-      },
-      tooltip: {
-        visible: true,
-        shared: false,
-        crosshairs: {
-          type: 'rect',
-        },
-      },
       label: {
-        visible: false,
         position: 'middle',
       },
-      shape: 'circle',
     });
   }
 
   public type: string = 'bubble';
-
-  public bubbles: any;
-
+
   protected legend() {
     super.legend();
     /** 取消气泡大小图例 */
@@ -61,30 +42,6 @@ export default class BubbleLayer<T extends BubbleLayerConfig = BubbleLayerConfig
     });
   }
 
-  protected addGeometry() {
-    const props = this.options;
-
-    const bubbles = getGeom('point', 'circle', {
-      plot: this,
-    });
-
-    if (props.label && props.label.visible) {
-      bubbles.label = this.extractLabel();
-    }
-
-    this.bubbles = bubbles;
-    this.setConfig('element', bubbles);
-  }
-
-  protected animation() {
-    super.animation();
-    const props = this.options;
-    if (props.animation === false) {
-      /** 关闭动画 */
-      this.bubbles.animate = false;
-    }
-  }
-
   protected parseEvents() {
     super.parseEvents(EventParser);
   }

diff --git a/src/plots/scatter/components/quadrant.ts b/src/plots/scatter/components/quadrant.ts
@@ -3,18 +3,18 @@ import { Group, BBox } from '@antv/g';
 import { View } from '@antv/g2';
 
 interface ILabel {
-  position: string;
+  position?: string;
   text: string[] | Function;
-  offset: number | Function;
-  style: any;
+  offset?: number | Function;
+  style?: any;
 }
 
 export interface QuadrantConfig {
   visible?: boolean;
   xBaseline?: number;
   yBaseline?: number;
   regionStyle: any[] | any;
-  lineStyle: any;
+  lineStyle?: any;
   label: ILabel;
 }
 

diff --git a/src/plots/scatter/layer.ts b/src/plots/scatter/layer.ts
@@ -79,7 +79,8 @@ export default class ScatterLayer<T extends ScatterLayerConfig = ScatterLayerCon
       },
       tooltip: {
         visible: true,
-        shared: false,
+        // false 会造成 tooltip 只能显示一条数据，true 会造成 tooltip 在空白区域也会显示
+        shared: null,
         crosshairs: {
           type: 'rect',
         },
@@ -168,6 +169,13 @@ export default class ScatterLayer<T extends ScatterLayerConfig = ScatterLayerCon
     if (this.options.label && this.options.label.visible) {
       this.points.label = this.extractLabel();
     }
+    if (this.options.tooltip && this.options.tooltip.visible) {
+      this.points.tooltip = this.extractTooltip();
+      this.setConfig('tooltip', {
+        showTitle: false,
+        ...this.options.tooltip,
+      } as any);
+    }
     this.setConfig('element', points);
   }
 
@@ -201,6 +209,22 @@ export default class ScatterLayer<T extends ScatterLayerConfig = ScatterLayerCon
     });
     return labelConfig;
   }
+
+  protected extractTooltip() {
+    const props = this.options;
+    if (_.isString(props.colorField)) {
+      return {
+        fields: [props.xField, props.yField, props.colorField],
+      };
+    } else if (_.isArray(props.colorField) && props.colorField.length) {
+      return {
+        fields: [props.xField, props.yField, ...props.colorField],
+      };
+    }
+    return {
+      fields: [props.xField, props.yField],
+    };
+  }
 }
 
 registerPlotType('scatter', ScatterLayer);