diff --git a/__tests__/integration/snapshots/static/gaugeCustomTextTooltip.svg b/__tests__/integration/snapshots/static/gaugeCustomTextTooltip.svg new file mode 100644 index 0000000000..99c4897704 --- /dev/null +++ b/__tests__/integration/snapshots/static/gaugeCustomTextTooltip.svg @@ -0,0 +1,415 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + + + + + 100 + + + + + + + 200 + + + + + + + 300 + + + + + + + 400 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 得分:159 + + + 占比:37.5% + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/plots/static/gauge-custom-text-tooltip.ts b/__tests__/plots/static/gauge-custom-text-tooltip.ts new file mode 100644 index 0000000000..a9d41f6d41 --- /dev/null +++ b/__tests__/plots/static/gauge-custom-text-tooltip.ts @@ -0,0 +1,29 @@ +import { G2Spec } from '../../../src'; +export function gaugeCustomTextTooltip(): G2Spec { + return { + type: 'gauge', + data: { + value: { + target: 159, + total: 424, + name: 'score', + }, + }, + style: { + pinShape: false, + textContent: (target, total) => { + return `得分:${target}\n占比:${(target / total) * 100}%`; + }, + textTooltip: { + items: [ + (d, index, data, column) => { + return { + name: 'y', + value: column.y.value[index], // 使用 y 通道的值 + }; + }, + ], + }, + }, + }; +} diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts index 574c540c03..b9ccbbe223 100644 --- a/__tests__/plots/static/index.ts +++ b/__tests__/plots/static/index.ts @@ -217,6 +217,7 @@ export { commitsPointGroupedConstant } from './commits-point-grouped-constant'; export { soldHOMMultiple } from './sold-hom-multiple'; export { soldIntervalCustomShape } from './sold-interval-custom-shape'; export { gaugeDefault } from './gauge-default'; +export { gaugeCustomTextTooltip } from './gauge-custom-text-tooltip'; export { gaugeCustomColor } from './gauge-custom-color'; export { gaugeCustomShape } from './gauge-custom-shape'; export { gaugeRoundShape } from './gauge-round-shape'; diff --git a/src/mark/gauge.ts b/src/mark/gauge.ts index 7abd57804d..dfd4b27a20 100644 --- a/src/mark/gauge.ts +++ b/src/mark/gauge.ts @@ -123,6 +123,7 @@ const DEFAULT_TEXT_OPTIONS = { fontWeight: 800, fill: '#888', }, + tooltip: false, }; export type GaugeData = @@ -212,7 +213,7 @@ export const Gauge: CC = (options) => { total, scale: newScale, } = dataTransform(data, scale); - const textStyle = subObject(style, 'text'); + const { tooltip, ...textStyle } = subObject(style, 'text'); // pointer + pin const indicatorStyle = filterPrefixObject(style, ['pointer', 'pin']); @@ -244,6 +245,7 @@ export const Gauge: CC = (options) => { text: getTextContent(textStyle, { target, total }), ...textStyle, }, + tooltip, animate: typeof animate === 'object' ? subObject(animate, 'text') : animate, }),