diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg new file mode 100644 index 0000000000..b89759dd12 --- /dev/null +++ b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg @@ -0,0 +1,428 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + a + + + + + + + + + + + + + + + + + + + + b + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step1.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step1.svg new file mode 100644 index 0000000000..9f8e2beeb4 --- /dev/null +++ b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step1.svg @@ -0,0 +1,428 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + a + + + + + + + + + + + + + + + + + + + + b + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/plots/interaction/alphabet-interval-activate-line-marker-type.ts b/__tests__/plots/interaction/alphabet-interval-activate-line-marker-type.ts new file mode 100644 index 0000000000..91e23fde45 --- /dev/null +++ b/__tests__/plots/interaction/alphabet-interval-activate-line-marker-type.ts @@ -0,0 +1,108 @@ +import { G2Spec, PLOT_CLASS_NAME } from '../../../src'; +import { step } from './utils'; + +export async function alphabetIntervalActiveMarkerType(): Promise { + 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: true, + crosshairsStroke: 'red', + crosshairsLineDash: [4, 4], + markerType: 'hollow', + }, + }, + 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, + }, + }, + ], + }; +} + +alphabetIntervalActiveMarkerType.tooltip = true; + +alphabetIntervalActiveMarkerType.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, + }), + ]; +}; diff --git a/__tests__/plots/interaction/index.ts b/__tests__/plots/interaction/index.ts index 20159216ab..cbe9e9187f 100644 --- a/__tests__/plots/interaction/index.ts +++ b/__tests__/plots/interaction/index.ts @@ -80,3 +80,4 @@ 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'; +export { alphabetIntervalActiveMarkerType } from './alphabet-interval-activate-line-marker-type'; diff --git a/site/docs/spec/interaction/tooltip.zh.md b/site/docs/spec/interaction/tooltip.zh.md index 02f70f81e5..b223f1ee6a 100644 --- a/site/docs/spec/interaction/tooltip.zh.md +++ b/site/docs/spec/interaction/tooltip.zh.md @@ -51,8 +51,9 @@ chart.render(); | crosshairsY | 是否展示Y方向指示线 | `boolean` | - | | `crosshairs${StyleAttrs}` | 指示线的样式 | `number \| string` | - | | `crosshairsX${StyleAttrs}` | X方向指示线的样式（优先级更高） | `number \| string` | - | -| `crosshairsY${StyleAttrs}` | Y方向指示线的样式 （优先级很高） | `number \| string` | - | +| `crosshairsY${StyleAttrs}` | Y方向指示线的样式 （优先级更高） | `number \| string` | - | | `marker${StyleAttrs}` | marker 的样式 | `number \| string` | - | +| markerType | marker 的类型 | `'hollow' \| undefined` | undefined | | render | 自定义 tooltip 渲染函数 | `(event, options) => HTMLElement \| string` | - | | sort | item 排序器 | `(d: TooltipItemValue) => any` | - | | filter | item 筛选器 | `(d: TooltipItemValue) => any` | - | @@ -178,3 +179,39 @@ chart.emit('tooltip:hide'); chart.emit('tooltip:disable'); // 禁用 tooltip chart.emit('tooltip:enable'); // 启用交互 ``` + +### 设置十字辅助线 +默认情况下，`crossharisY`是开启的，`crosshairsX`是关闭的，所以如果要开启十字辅助线，有以下两种方式。 +1. 设置`crosshairs`为`true`。 +```js +chart.interaction("tooltip", { + crosshairs: true, // 开启十字辅助线 + crosshairsXStroke: 'red', // 设置 X 轴辅助线颜色为'red' + crosshairsYStroke: 'blue',// 设置 Y 轴辅助线颜色为'blue' +}) +``` + +2. 设置`crosshairsX`为`true`。 +```js +chart.interaction("tooltip", { + crosshairsX: true, // 开启crosshairsX辅助线 + crosshairsXStroke: 'red', // 设置 X 轴辅助线颜色为'red' + crosshairsYStroke: 'blue',// 设置 Y 轴辅助线颜色为'blue' +}) +``` +`crosshairsX`的优先级大于`crosshairs`的优先级。 + +example + + + + +### 设置提示点为空心圆 + +```js +chart.interaction("tooltip", { + markerType: "hollow", // 设置提示点的样式为空心圆 +}) +``` + +example \ No newline at end of file diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts index a7f9f172e6..602bfa19c0 100644 --- a/src/interaction/tooltip.ts +++ b/src/interaction/tooltip.ts @@ -442,6 +442,7 @@ function updateRuleY( ...defaults, }, }); + root.appendChild(line); return line; }; @@ -472,6 +473,8 @@ function hideRuleX(root) { function updateMarker(root, { data, style, theme }) { if (root.markers) root.markers.forEach((d) => d.remove()); + const { type = '' } = style; + const markers = data .filter((d) => { const [{ x, y }] = d; @@ -479,19 +482,20 @@ function updateMarker(root, { data, style, theme }) { }) .map((d) => { const [{ color, element }, point] = d; - const fill = + const originColor = color || // encode value element.style.fill || element.style.stroke || theme.color; - + const fill = type === 'hollow' ? 'transparent' : originColor; + const stroke = type === 'hollow' ? originColor : '#fff'; const shape = new Circle({ style: { cx: point[0], cy: point[1], fill, r: 4, - stroke: '#fff', + stroke, lineWidth: 2, ...style, },