diff --git a/docs/assets/option/zh/component/axis-common/linear-axis.md b/docs/assets/option/zh/component/axis-common/linear-axis.md index 6ea098739f..502b0fd492 100644 --- a/docs/assets/option/zh/component/axis-common/linear-axis.md +++ b/docs/assets/option/zh/component/axis-common/linear-axis.md @@ -75,12 +75,14 @@ 使这个轴的 tick 与目标轴保持比例对齐 -#${prefix} tooltipFilterRange(number | [number, number]) +#${prefix} tooltipFilterRange(number | [number, number] | (({ scale: IBaseScale }) => number | [number, number])) **仅当轴为线性轴或时间轴时生效**,配置连续轴上的 dimension tooltip 数据筛选范围。从 1.4.0 版本开始支持。 如果配置为单个数字形如 `d`,则筛选区间为 `[x0 - d, x0 + d]`;如果配置为二元组形如 `[d1, d2]`,则筛选区间为 `[x0 + d1, x0 + d2]`。 +如果配置为函数 `f`, 函数的返回值将会作为数据筛选范围的值。 + #${prefix} breaks(Array|Object) 自 `1.12.4` 版本开始支持。 diff --git a/packages/vchart-types/types/component/axis/interface.d.ts b/packages/vchart-types/types/component/axis/interface.d.ts index 2b8c21718f..e33627a3c3 100644 --- a/packages/vchart-types/types/component/axis/interface.d.ts +++ b/packages/vchart-types/types/component/axis/interface.d.ts @@ -54,7 +54,7 @@ export interface ILinearAxisSpec { min?: number; max?: number; }; - tooltipFilterRange?: number | [number, number]; + tooltipFilterRange?: number | [number, number] | ((params: { scale: IBaseScale }) => number | [number, number]); } export interface IBandAxisSpec { bandPadding?: number | number[]; diff --git a/packages/vchart-types/types/component/axis/interface/spec.d.ts b/packages/vchart-types/types/component/axis/interface/spec.d.ts index 486c05aeba..a3cf102812 100644 --- a/packages/vchart-types/types/component/axis/interface/spec.d.ts +++ b/packages/vchart-types/types/component/axis/interface/spec.d.ts @@ -35,7 +35,7 @@ export interface ILinearAxisSpec { min?: number; max?: number; }; - tooltipFilterRange?: number | [number, number]; + tooltipFilterRange?: number | [number, number] | ((params: { scale: IBaseScale }) => number | [number, number]); breaks?: ILinearAxisBreakSpec[]; } export interface IBandAxisSpec { diff --git a/packages/vchart/src/component/axis/interface/spec.ts b/packages/vchart/src/component/axis/interface/spec.ts index 2a19f73179..7157d653e7 100644 --- a/packages/vchart/src/component/axis/interface/spec.ts +++ b/packages/vchart/src/component/axis/interface/spec.ts @@ -1,4 +1,3 @@ -import { ITextFormatMethod } from './../../../typings/spec/common'; import type { AxisBreakProps, AxisItem, AxisItemStateStyle } from '@visactor/vrender-components'; import type { IAnimationSpec } from '../../../animation/spec'; import type { @@ -14,6 +13,7 @@ import type { } from '../../../typings'; import type { IComponentSpec } from '../../base/interface'; import type { AxisType, IAxisItem, IBandAxisLayer, ITickCalculationCfg, StyleCallback } from './common'; +import type { IBaseScale } from '@visactor/vscale'; export interface ICommonAxisSpec extends Omit, IAnimationSpec { /** @@ -148,9 +148,10 @@ export interface ILinearAxisSpec { /** * 连续轴上的 dimension tooltip 数据筛选范围 * 如果配置为单个数字 d,则筛选区间为 [x0 - d, x0 + d];如果配置为二元组 [d1, d2],则筛选区间为 [x0 + d1, x0 + d2] + * 如果配置为函数 f, 函数的返回值将会作为数据筛选范围的值 * @since 1.4.0 */ - tooltipFilterRange?: number | [number, number]; + tooltipFilterRange?: number | [number, number] | ((params: { scale: IBaseScale }) => number | [number, number]); /** * 轴截断配置,只对笛卡尔坐标系的 linear 轴生效 * @since 1.12.4 diff --git a/packages/vchart/src/event/events/dimension/util/common.ts b/packages/vchart/src/event/events/dimension/util/common.ts index 909d45afde..bd8d96b3fa 100644 --- a/packages/vchart/src/event/events/dimension/util/common.ts +++ b/packages/vchart/src/event/events/dimension/util/common.ts @@ -6,6 +6,7 @@ import { isNil, array, isValid, isValidNumber } from '@visactor/vutils'; import type { Maybe } from '@visactor/vutils'; import type { AxisComponent } from '../../../../component/axis/base-axis'; import type { CoordinateType, Datum, ILayoutPoint } from '../../../../typings'; +import type { IBaseScale } from '@visactor/vscale'; import { isDiscrete } from '@visactor/vscale'; import type { ICartesianLinearAxisSpec } from '../../../../component'; import type { ISeries } from '../../../../series'; @@ -42,6 +43,13 @@ export const isSameDimensionInfo = (a?: IDimensionInfo, b?: IDimensionInfo): boo return true; }; +const resolveTooltipFilterRange = (spec: ICartesianLinearAxisSpec, scale: IBaseScale) => { + const range = spec.tooltipFilterRange; + const rangeValue = typeof range === 'function' ? range({ scale }) : range; + const rangeArr = (isValidNumber(rangeValue) ? [-rangeValue, rangeValue] : rangeValue) as Maybe<[number, number]>; + return rangeArr; +}; + /** 给定维度项的值,获取对应维度数据 */ export const getDimensionData = ( value: any, @@ -98,13 +106,13 @@ export const getDimensionData = ( }); } else { // 散点图情况,依据轴上的配置判断 - const range = (axis.getSpec() as ICartesianLinearAxisSpec).tooltipFilterRange; - const rangeArr = (isValidNumber(range) ? [-range, range] : range) as Maybe<[number, number]>; + const spec = axis.getSpec() as ICartesianLinearAxisSpec; + const rangeArr = resolveTooltipFilterRange(spec, scale); let datums: Datum[] = []; let datumIdList: number[] = []; if (rangeArr) { // 根据范围取 datum - viewData.forEach((datum: any, i: number) => { + viewData.forEach((datum: Datum, i: number) => { if (isValid(datum[dimensionField[0]])) { const delta = datum[dimensionField[0]] - value; if (delta >= rangeArr[0] && delta <= rangeArr[1]) {