fix(图表): 修复轮播提示在双轴图只有一个轴有数据时,无法轮播的问题

This commit is contained in:
jianneng-fit2cloud
2025-04-03 19:59:53 +08:00
committed by jianneng-fit2cloud
parent 14181bb605
commit 41f46e1300
2 changed files with 30 additions and 18 deletions

View File

@@ -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()
}

View File

@@ -1716,10 +1716,8 @@ export function configPlotTooltipEvent<O extends PickOptions, P extends Plot<O>>
// 图表容器,用于计算 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<O extends PickOptions, P extends Plot<O>>
!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