Python 修复了在录制Bokeh绘图元素时的鼠标悬停工具提示_Python_Python 3.x_Bokeh

Python 修复了在录制Bokeh绘图元素时的鼠标悬停工具提示

python python-3.x

Python 修复了在录制Bokeh绘图元素时的鼠标悬停工具提示,python,python-3.x,bokeh,Python,Python 3.x,Bokeh,与鼠标悬停工具类似，我希望当我点击绘图的某个元素（在本例中是一个圆圈）时，会弹出一个窗口，显示该元素的相关信息（见下图）。如果我在单击元素后移动鼠标，窗口将保持显示状态。是否有taptool的工具提示？我通过使用CustomJS非常努力地做到这一点，但是没有办法显示html内容。有人知道如何进行吗 from bokeh.plotting import figure, output_file, show, ColumnDataSource output_file("toolbar.html")

与鼠标悬停工具类似，我希望当我点击绘图的某个元素（在本例中是一个圆圈）时，会弹出一个窗口，显示该元素的相关信息（见下图）。如果我在单击元素后移动鼠标，窗口将保持显示状态。是否有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)

从bokeh.plotting导入图形，输出_文件，显示，ColumnDataSource
输出文件（“toolbar.html”）
source=ColumnDataSource（数据=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'
],
字体=[
'斜体'，
"前",，
“粗体”，
"小",，
“德尔”
]
))
工具提示=“”
@描述
[$index]
@字体{safe}
位置
（$x，$y）
"""
p=图形（绘图宽度=400，绘图高度=400，工具提示=工具提示，
title=“鼠标悬停在点上”）
p、 圆（'x'，'y'，大小=20，震源=震源）
表演（p）

从显示器上获取的代码

您可以像下面的代码一样使用

TapTool

回调。单击圆将显示工具提示。单击绘图上的其他位置或单击

ResetTool

隐藏工具提示。

TapTool

回调使用与示例中相同的

HoverTool

工具提示，您可以根据需要进一步自定义它

另请参见使用迷你打印作为工具提示的

此代码适用于Bokeh v1.0.4

从bokeh.plotting导入图形，输出_文件，显示，ColumnDataSource
从bokeh.models导入TapTool、CustomJS、HoverTool、Div、Row
输出文件（“toolbar.html”）
source=ColumnDataSource（数据=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'],
字体=['斜体'，
"前",，
“粗体”，
"小",，
“del']））
工具提示=“”
@描述
[$index]
@字体{safe}
位置
（$x，$y）
"""
p=图形（绘图宽度=400，绘图高度=400，x范围=（0,6），y范围=（1,9），
title=“鼠标悬停在点上”，工具='平移、旋转\缩放、保存、重置、点击'）
圆=p.圆（'x'，'y'，大小=20，源=源）
div=div（文本=''，名称='工具提示'）
代码=''如果（cb_data.source.selected.index.length>0）{
var selected_index=cb_data.source.selected.index[0]；
var tooltip=document.getElementById（“工具提示”）；
tooltip.style.display='block'；
tooltip.style.left=数字（cb_data.geometries.sx）+数字（20）+“px”；
tooltip.style.top=编号（cb_data.geometries.sy）-编号（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.替换（“$index”，所选索引）；
tp=tp.replace（'x'，Math.round（cb_data.geometries.x））；
tp=tp.replace（'$y'，Math.round（cb_data.geometrics.y））；
tooltip.innerHTML=tp；
} '''
p、 选择（TapTool）.callback=CustomJS（args={'circles'：circles，'plot'：p，'tp'：TOOLTIPS}，code=code）
source.selected.js_on_change（'index'，CustomJS（code='if（cb_obj.index.length==0）document.getElementById（“工具提示”）.style.display=\'none\'）
布局=行（p，div）
显示（布局）

结果:

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)