python - 修复了点击 Bokeh 图元素时的 HoverTool TOOLTIPS

Question

与悬停工具类似，我希望当我点击绘图的元素(在本例中为圆圈)时，会弹出一个窗口，其中包含有关该元素的信息(请参阅下图)。如果我在单击元素后移动鼠标，窗口将保持显示。 taptool 有工具提示吗？我非常努力地通过使用 CustomJS 来做到这一点，但是没有办法显示 html 内容。有谁知道如何进行？

from bokeh.plotting import figure, output_file, show, ColumnDataSource

output_file("toolbar.html")

source = ColumnDataSource(data=dict(
x=[1, 2, 3, 4, 5],
y=[2, 5, 8, 2, 7],
desc=['A', 'b', 'C', 'd', 'E'],
imgs=[
    'https://docs.bokeh.org/static/snake.jpg',
    'https://docs.bokeh.org/static/snake2.png',
    'https://docs.bokeh.org/static/snake3D.png',
    'https://docs.bokeh.org/static/snake4_TheRevenge.png',
    'https://docs.bokeh.org/static/snakebite.jpg'
],
fonts=[
    '<i>italics</i>',
    '<pre>pre</pre>',
    '<b>bold</b>',
    '<small>small</small>',
    '<del>del</del>'
]
))

TOOLTIPS = """
<div>
    <div>
        <img
            src="@imgs" height="42" alt="@imgs" width="42"
            style="float: left; margin: 0px 15px 15px 0px;"
            border="2"
        ></img>
    </div>
    <div>
        <span style="font-size: 17px; font-weight: bold;">@desc</span>
        <span style="font-size: 15px; color: #966;">[$index]</span>
    </div>
    <div>
        <span>@fonts{safe}</span>
    </div>
    <div>
        <span style="font-size: 15px;">Location</span>
        <span style="font-size: 10px; color: #696;">($x, $y)</span>
    </div>
</div>
"""

 p = figure(plot_width=400, plot_height=400, tooltips=TOOLTIPS,
       title="Mouse over the dots")

 p.circle('x', 'y', size=20, source=source)

 show(p)

代码取自https://docs.bokeh.org/en/latest/docs/user_guide/tools.html显示

Answer 1

您可以像下面的代码一样使用 TapTool 回调。单击圆圈会显示工具提示。单击绘图上的其他位置或单击 ResetTool 可隐藏工具提示。 TapTool 回调使用与示例中相同的 HoverTool 工具提示，您可以根据需要进一步自定义它。

另见 this post它使用迷你图作为工具提示。

此代码适用于 Bokeh v1.0.4

from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import TapTool, CustomJS, HoverTool, Div, Row

output_file("toolbar.html")

source = ColumnDataSource(data = dict(
x = [1, 2, 3, 3, 4],
y = [2, 5, 8, 3, 6],
desc = ['A', 'B', 'C', 'D', 'E'],
imgs = ['https://docs.bokeh.org/static/snake.jpg',
        'https://docs.bokeh.org/static/snake2.png',
        'https://dods.bokeh.org/static/snake3D.png',
        'https://docs.bokeh.org/static/snake4_TheRevenge.png',
        'https://docs.bokeh.org/static/snakebite.jpg'],
fonts = ['<i>italics</i>',
         '<pre>pre</pre>',
         '<b>bold</b>',
         '<small>small</small>',
         '<del>del</del>' ]))
TOOLTIPS = """
<div>
    <div>
        <img
            src="@imgs" height="42" alt="@imgs" width="42"
            style="float: left; margin: 0px 15px 15px 0px;"
            border="2"/>
    </div>
    <div width=60px>
        <span style="font-size: 17px; font-weight: bold;">@desc</span>
        <span style="font-size: 15px; color: #966;">[$index]</span>
    </div>
    <div>
        <span>@fonts{safe}</span>
    </div>
    <div>
        <span style="font-size: 15px;">Location</span>
        <span style="font-size: 10px; color: #696;">($x, $y)</span>
    </div>
</div> """

p = figure(plot_width = 400, plot_height = 400, x_range = (0, 6), y_range = (1, 9),
      title = "Mouse over the dots", tools = 'pan,wheel_zoom,save,reset,tap')
circles = p.circle('x', 'y', size = 20, source = source)
div = Div(text = '<div id="tooltip" style="position: absolute; display: none"></div>', name = 'tooltip')

code = '''  if (cb_data.source.selected.indices.length > 0){
                var selected_index = cb_data.source.selected.indices[0];
                var tooltip = document.getElementById("tooltip");

                tooltip.style.display = 'block';
                tooltip.style.left = Number(cb_data.geometries.sx) + Number(20) + 'px';
                tooltip.style.top = Number(cb_data.geometries.sy) - Number(20) + 'px';

                tp = tp.replace('@imgs', cb_data.source.data.imgs[selected_index]);
                tp = tp.replace('@desc', cb_data.source.data.desc[selected_index]);
                tp = tp.replace('@fonts{safe}', cb_data.source.data.fonts[selected_index]);
                tp = tp.replace('$index', selected_index);
                tp = tp.replace('$x', Math.round(cb_data.geometries.x));
                tp = tp.replace('$y', Math.round(cb_data.geometries.y));
                tooltip.innerHTML = tp;
          } '''
p.select(TapTool).callback = CustomJS(args = {'circles': circles, 'plot': p, 'tp': TOOLTIPS}, code = code)
source.selected.js_on_change('indices', CustomJS(code = 'if (cb_obj.indices.length == 0) document.getElementById("tooltip").style.display = \"none\"'))
layout = Row(p, div)
show(layout)

结果: