mirror of
https://github.com/dataease/dataease.git
synced 2026-05-15 13:32:18 +08:00
fix(图表): 修复轮播提示在双轴图只有一个轴有数据时,无法轮播的问题
This commit is contained in:
committed by
jianneng-fit2cloud
parent
14181bb605
commit
41f46e1300
@@ -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()
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user