如何在 Bokeh 中添加固定位置的工具提示？

Question

我的目标是在我的图形中添加一个 HoverTool，它按名称显示工作日。日期由 x 轴值定义。即使可见部分被 BoxZoom.

之类的工具更改，我也想在固定位置显示此信息

由于 HoverTool 至少需要一个渲染器，我首先尝试定义一条线，但我没有找到一种方法来定义相对于图形的位置。事实上，如果我缩放它可能会发生，这条线不在可见部分并且 HoverTool 不再工作（或在不可见的区域）。

我的第二次尝试是定义一个 extra_y_range 来绘制相对线。但是我没有找到取消选择该轴的 BoxZoom 的方法。

import pandas as pd

from bokeh.plotting import figure, output_notebook, show
from bokeh.models import (
    HoverTool, 
    LinearAxis,
    Range1d,
)
output_notebook()

dr = pd.date_range('2020-01-01', '2020-01-05', freq='D')

p = figure(title="line", plot_width=300, plot_height=300, x_axis_type='datetime')
p.line(x=dr, y=[6, 7, 2, 4, 5])
p.extra_y_ranges.update({"extra": Range1d(0, 1)})
p.add_layout(LinearAxis(y_range_name="extra", axis_label=''), "right")
l = p.line(x=dr, y=0.8, color='gray', **{"y_range_name":"extra"})


p.add_tools(
            HoverTool(
                tooltips=[("", "@x{%A}")],
                renderers=[l],
                mode="vline",
                formatters={"@x": "datetime"},
            ))
show(p)

有没有办法添加一个 HoverTool，即使该区域受到工具的影响，它仍保持在可见区域的相同位置？

Answer 1

您可以试试这个适用于 Bokeh v2.1.1 的解决方案。在下面的代码中，工具提示固定在屏幕上的绝对位置。您可以独立于屏幕上的绘图位置添加自己更通用的解决方案。

from bokeh.models import CustomJS
from bokeh.models import HoverTool
from bokeh.plotting import show, figure
import numpy as np

p = figure(plot_width = 300, plot_height = 300, tooltips = [('value X', '@x'), ('value Y', '@y')])
circles = p.circle(x=np.random.rand(10)*10, y=np.random.rand(10)*10, size=10)

callback = CustomJS(args={'p': p}, code="""
    var tooltips = document.getElementsByClassName("bk-tooltip");
    const tw = 100;
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = '5px'; 
        tooltips[i].style.left = p.width/2 - tw/2 + 'px'; 
        tooltips[i].style.width = tw + 'px'; 
    } """)

hover = p.select_one(HoverTool)
hover.renderers = [circles]
hover.callback = callback
hover.show_arrow = False

show(p)

结果：

如何在 Bokeh 中添加固定位置的工具提示？

How to add a fixed-position tooltip in Bokeh?

python

bokeh