diff --git a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts index 02d8cb1bd1..7ca69cd39f 100644 --- a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts +++ b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts @@ -219,6 +219,9 @@ class ChartCarouselTooltip { if (['pie', 'pie-donut'].includes(this.chart.type)) { return this.getPieTooltipPosition(view, value) } + if (this.plot instanceof DualAxes) { + return this.getDualAxesTooltipPosition(view, value) + } const types = view .scale() .getGeometries() @@ -266,6 +269,23 @@ class ChartCarouselTooltip { } } + /** + * 获取双轴图表的 Tooltip 位置 + * @param view + * @param value + * @private + */ + private getDualAxesTooltipPosition(view, value: string) { + const xScale = view.getXScale() + const values = xScale.values + const [rangeStart, rangeEnd] = xScale.range + const totalMonths = values.length + const bandWidth = (rangeEnd - rangeStart) / totalMonths + const index = values.indexOf(value) + const xPos = rangeStart + bandWidth * (index + 0.5) + return view.getCoordinate().convert({ x: xPos, y: 0 }) + } + /** * 高亮指定元素 * */ @@ -308,12 +328,12 @@ class ChartCarouselTooltip { * 绑定事件监听 * */ private bindEventListeners() { - let deCanvasElement = document.getElementById('de-canvas-canvas-main') - if (!deCanvasElement) { - deCanvasElement = document.getElementById('preview-canvas-main') - } - if (!deCanvasElement) { - deCanvasElement = document.getElementById('canvas-mark-line') + // 用于监听在不同的浏览页面的滚动事件 + const elementIds = ['de-canvas-canvas-main', 'preview-canvas-main', 'canvas-mark-line'] + let deCanvasElement = null + for (const id of elementIds) { + deCanvasElement = document.getElementById(id) + if (deCanvasElement) break } if (!deCanvasElement) { this.unHighlightPoint() @@ -346,9 +366,6 @@ class ChartCarouselTooltip { this.setPaused(false) } }) - } - - if (deCanvasElement) { // 元素可视性观察(交叉观察器) this.setupIntersectionObserver() } diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index 7dddf51e1a..83bcf4d3d3 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -1716,10 +1716,8 @@ export function configPlotTooltipEvent> // 图表容器,用于计算 tooltip 的位置 // 编辑时 let chartElement = document.getElementById('shape-id-' + chart.id) - if (!chartElement) { - // 公共连接时 - chartElement = document.getElementById('enlarge-inner-content-' + chart.id) - } + // 公共连接页面 + chartElement = chartElement || document.getElementById('enlarge-inner-content-' + chart.id) configCarouselTooltip(plot, chart) // 鼠标可移入, 移入之后保持显示, 移出之后隐藏 plot.options.tooltip.container.addEventListener('mouseenter', e => { @@ -1742,12 +1740,9 @@ export function configPlotTooltipEvent> !event || event?.type === 'plot:leave' || ['pie', 'pie-rose', 'pie-donut'].includes(chart.type) + plot.options.tooltip.showMarkers = isCarousel ? true : false const wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER) - if (isCarousel && wrapperDom) { - wrapperDom.style.zIndex = '1' - } else { - wrapperDom.style.zIndex = '9999' - } + wrapperDom.style.zIndex = isCarousel && wrapperDom ? '1' : '9999' if (tooltipCtl.tooltip) { // 处理视图放大后再关闭 tooltip 的 dom 被清除 const container = tooltipCtl.tooltip.cfg.container