feat(interaction.tooltip): add crosshairs, crosshairsX, crosshairsY setting

__tests__/plots/interaction/change-size-polar-crosshairs-xy.ts

@@ -0,0 +1,109 @@
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { step } from './utils';
+
+export async function changeSizePolarCrosshairsXY(): Promise<G2Spec> {
+  const data = [
+    { item: 'Design', type: 'a', score: 70 },
+    { item: 'Design', type: 'b', score: 30 },
+    { item: 'Development', type: 'a', score: 60 },
+    { item: 'Development', type: 'b', score: 70 },
+    { item: 'Marketing', type: 'a', score: 50 },
+    { item: 'Marketing', type: 'b', score: 60 },
+    { item: 'Users', type: 'a', score: 40 },
+    { item: 'Users', type: 'b', score: 50 },
+    { item: 'Test', type: 'a', score: 60 },
+    { item: 'Test', type: 'b', score: 70 },
+    { item: 'Language', type: 'a', score: 70 },
+    { item: 'Language', type: 'b', score: 50 },
+    { item: 'Technology', type: 'a', score: 50 },
+    { item: 'Technology', type: 'b', score: 40 },
+    { item: 'Support', type: 'a', score: 30 },
+    { item: 'Support', type: 'b', score: 40 },
+    { item: 'Sales', type: 'a', score: 60 },
+    { item: 'Sales', type: 'b', score: 40 },
+    { item: 'UX', type: 'a', score: 50 },
+    { item: 'UX', type: 'b', score: 60 },
+  ];
+
+  return {
+    type: 'view',
+    coordinate: {
+      type: 'polar',
+    },
+    scale: {
+      x: { padding: 0.5, align: 0 },
+      y: { tickCount: 5, domainMax: 80 },
+    },
+    autoFit: true,
+    data,
+    interaction: {
+      legendFilter: false,
+      elementPointMove: true,
+      tooltip: {
+        crosshairs: {
+          type: 'xy',
+          stroke: 'red',
+          lineDash: [4, 4],
+        },
+      },
+    },
+    axis: {
+      x: {
+        grid: true,
+        gridStrokeWidth: 1,
+        tick: false,
+        gridLineDash: [0, 0],
+      },
+      y: {
+        zIndex: 1,
+        title: false,
+        gridConnect: 'line',
+        gridStrokeWidth: 1,
+        gridLineDash: [0, 0],
+      },
+    },
+    children: [
+      {
+        type: 'area',
+        encode: {
+          x: 'item',
+          y: 'score',
+          color: 'type',
+          key: 'type',
+        },
+        style: {
+          fillOpacity: 0.5,
+        },
+      },
+      {
+        type: 'line',
+        encode: {
+          x: 'item',
+          y: 'score',
+          color: 'type',
+          key: 'type',
+        },
+        style: {
+          lineWidth: 2,
+        },
+      },
+    ],
+  };
+}
+
+changeSizePolarCrosshairsXY.tooltip = true;
+
+changeSizePolarCrosshairsXY.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const [plot] = document.getElementsByClassName(PLOT_CLASS_NAME);
+  return [
+    step(plot, 'pointermove', {
+      offsetX: 100,
+      offsetY: 350,
+    }),
+    step(plot, 'pointermove', {
+      offsetX: 176,
+      offsetY: 350,
+    }),
+  ];
+};

__tests__/plots/interaction/index.ts

@@ -78,3 +78,5 @@ export { profitIntervalLegendFilterElementHighlight } from './profit-interval-le
 export { stocksLineSlider } from './stocks-line-slider';
 export { alphabetIntervalCustom } from './alphabet-interval-custom';
 export { mockIntervalTooltipBackground } from './mock-interval-tooltip-background';
+export { indicesLineCrosshairsXY } from './indices-line-crosshairs-xy';
+export { changeSizePolarCrosshairsXY } from './change-size-polar-crosshairs-xy';

__tests__/plots/interaction/indices-line-chart-facet.ts

@@ -38,8 +38,10 @@ export async function indicesLineChartFacet(): Promise<G2Spec> {
         series: true,
         facet: true,
         body: false,
-        crosshairs: true,
-        crosshairsLineWidth: 30,
+        crosshairs: {
+          type: 'y',
+          lineWidth: 30,
+        },
         marker: false,
       },
     },

__tests__/plots/interaction/indices-line-crosshairs-xy.ts

@@ -0,0 +1,62 @@
+import { csv } from 'd3-fetch';
+import { autoType } from 'd3-dsv';
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { step } from './utils';
+
+export async function indicesLineCrosshairsXY(): Promise<G2Spec> {
+  const data = await csv('data/indices.csv', autoType);
+  return {
+    type: 'view',
+    children: [
+      {
+        type: 'line',
+        data,
+        axis: {
+          y: { labelAutoRotate: false },
+        },
+        transform: [{ type: 'normalizeY', basis: 'first', groupBy: 'color' }],
+        legend: false,
+        encode: {
+          x: 'Date',
+          y: 'Close',
+          color: 'Symbol',
+          key: 'Symbol',
+        },
+        state: {
+          active: { stroke: 'red' },
+        },
+      },
+    ],
+    interaction: {
+      tooltip: {
+        crosshairs: {
+          type: 'xy',
+          stroke: 'green',
+        },
+        crosshairsX: {
+          stroke: 'red',
+        },
+        crosshairsY: {
+          stroke: 'blue',
+        },
+      },
+    },
+  };
+}
+
+indicesLineCrosshairsXY.tooltip = true;
+
+indicesLineCrosshairsXY.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const [plot] = document.getElementsByClassName(PLOT_CLASS_NAME);
+  return [
+    step(plot, 'pointermove', {
+      offsetX: 100,
+      offsetY: 350,
+    }),
+    step(plot, 'pointermove', {
+      offsetX: 176,
+      offsetY: 350,
+    }),
+  ];
+};

__tests__/plots/interaction/missing-area-tooltip-marker.ts

@@ -32,6 +32,9 @@ export function missingAreaTooltipMarker(): G2Spec {
         markerR: 10,
         markerLineWidth: 5,
         markerStroke: '#aaa',
+        crosshairs: {
+          type: 'y',
+        },
       },
     },
   };

__tests__/plots/interaction/points-point-regression-quad-inset.ts

@@ -17,7 +17,14 @@ export function pointsPointRegressionQuadInset(): G2Spec {
     scale: { x: { domain: [-4, 4] }, y: { domain: [-2, 14] } },
     axis: { x: { title: false }, y: { title: false } },
     interaction: {
-      tooltip: { body: false, crosshairsLineWidth: 30, marker: false },
+      tooltip: {
+        body: false,
+        crosshairs: {
+          type: 'y',
+          lineWidth: 30,
+        },
+        marker: false,
+      },
     },
     children: [
       {

__tests__/plots/interaction/points-point-regression-quad-transpose.ts

@@ -16,7 +16,14 @@ export function pointsPointRegressionQuadTranspose(): G2Spec {
     scale: { x: { domain: [-4, 4] }, y: { domain: [-2, 14] } },
     axis: { x: { title: false }, y: { title: false } },
     interaction: {
-      tooltip: { body: false, crosshairsLineWidth: 30, marker: false },
+      tooltip: {
+        body: false,
+        crosshairs: {
+          type: 'y',
+          lineWidth: 30,
+        },
+        marker: false,
+      },
     },
     coordinate: { transform: [{ type: 'transpose' }] },
     children: [

__tests__/plots/interaction/points-point-regression-quad.ts

@@ -16,7 +16,14 @@ export function pointsPointRegressionQuad(): G2Spec {
     scale: { x: { domain: [-4, 4] }, y: { domain: [-2, 14] } },
     axis: { x: { title: false }, y: { title: false } },
     interaction: {
-      tooltip: { body: false, crosshairsLineWidth: 30, marker: false },
+      tooltip: {
+        body: false,
+        crosshairs: {
+          type: 'y',
+          lineWidth: 30,
+        },
+        marker: false,
+      },
     },
     children: [
       {

__tests__/plots/interaction/points-point-tooltip-marker.ts

@@ -30,7 +30,9 @@ export function pointsPointTooltipMarker(): G2Spec {
     interaction: {
       tooltip: {
         body: false,
-        crosshairs: false,
+        crosshairs: {
+          type: 'none',
+        },
         markerR: 20,
         markerLineWidth: 5,
         markerStroke: 'yellow',

__tests__/plots/interaction/score-by-item-area-radar.ts

@@ -20,8 +20,11 @@ export function scoreByItemAreaRadar(): G2Spec {
       tooltip: {
         body: false,
         marker: false,
-        crosshairsLineDash: [4, 4],
-        crosshairsLineWidth: 10,
+        crosshairs: {
+          type: 'y',
+          lineDash: [4, 4],
+          lineWidth: 10,
+        },
       },
     },
     children: [

__tests__/plots/interaction/stocks-line-slider.ts

@@ -26,7 +26,15 @@ export function stocksLineSlider(): G2Spec {
         tooltip: false,
       },
     ],
-    interaction: { tooltip: { crosshairsLineWidth: 10, body: false } },
+    interaction: {
+      tooltip: {
+        crosshairs: {
+          type: 'y',
+          lineWidth: 10,
+        },
+        body: false,
+      },
+    },
   };
 }
 

site/docs/manual/core/tooltip.zh.md

@@ -206,8 +206,11 @@ G2 默认打开 Tooltip 交互 ，如果需要配置 Tooltip 属性，可以通
     .encode('x', 'year')
     .encode('y', 'value')
     .interaction('tooltip', {
-      crosshairsStroke: 'red',
-      crosshairsStrokeWidth: 4,
+      crosshairs: {
+        type: "xy",
+        stroke: 'red',
+        strokeWidth: 4
+      },
     });
 
   chart.render();

site/docs/spec/interaction/tooltip.zh.md

@@ -46,8 +46,9 @@ chart.render();
 | position                  | tooltip 位置                                                      | `TooltipPosition`                           | -                     |
 | mount                     | tooltip 渲染的 dom 节点                                           | `string` \| `HTMLElement`                   | 图表容器              |
 | bounding                  | tooltip 渲染的限制区域，超出会自动调整位置                        | `BBox`                                      | 图表区域大小          |
-| crosshairs                | 是否展示指示线                                                    | `boolean`                                   | -                     |
-| `crosshairs${StyleAttrs}` | 指示线的样式                                                      | `number \| string`                          | -                     |
+| crosshairs                | 十字指示线设置                                                     | `Record<string, any>`                                   | -                     |
+| crosshairsX               | X方向指示线样式设置                                                  | `Record<string, any>`                                   | -                     |
+| crosshairsY               | Y方向指示线样式设置                                                  | `Record<string, any>`                                   | -                     |
 | `marker${StyleAttrs}`     | marker 的样式                                                     | `number \| string`                          | -                     |
 | render                    | 自定义 tooltip 渲染函数                                           | `(event, options) => HTMLElement \| string` | -                     |
 | sort                      | item 排序器                                                       | `(d: TooltipItemValue) => any`              | -                     |
@@ -174,3 +175,53 @@ chart.emit('tooltip:hide');
 chart.emit('tooltip:disable'); // 禁用 tooltip
 chart.emit('tooltip:enable'); // 启用交互
 ```
+
+
+### 十字辅助线设置
+默认情况下，`crosshairs`默认开启，`tooltip.crosshairs`下的`type`属性用于指定十字辅助线的类型。
+```js
+chart.interaction("tooltip", {
+  crosshairs: {
+    type: 'xy' // 默认情况，开启十字辅助线
+  }
+})
+
+chart.interaction("tooltip", {
+  crosshairs: {
+    type: 'x' // 只开启X方向辅助线
+  }
+})
+
+chart.interaction("tooltip", {
+  crosshairs: {
+    type: 'y' // 只开启Y方向辅助线
+  }
+})
+
+chart.interaction("tooltip", {
+  crosshairs: {
+    type: 'none' // 关闭十字辅助线
+  }
+})
+
+```
+`tooltip.crosshairsX`和`tooltip.crosshairsY`则用于分别设置X方向辅助线和Y方向辅助线的样式，`tooltip.crosshairs`也具有设置样式的功能，但优先级低于前两者。
+
+```js
+chart.interaction("tooltip", {
+  crosshairs: {
+    type: "xy",
+    stroke: "red"
+    // other style attrs
+  },
+  crosshairsX: {
+    stroke: "blue" // X方向辅助线最终表现为蓝色
+    // other style attrs
+  },
+  crosshairsY: {
+    stroke: "yellow" // Y方向辅助线最终表现为黄色
+    // other style attrs
+  }
+})
+
+```