【发布时间】：2020-05-13 08:15:36
【问题描述】：
我在 Bokeh 中创建了一个堆叠条形图，现在想将图片添加到 hoverTool，因为我在这里看到它已经完成：https://docs.bokeh.org/en/latest/docs/user_guide/tools.html
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)
但是我正在努力使它适用于我的代码。例如，我添加了一部分数据框：
temp=pd.DataFrame( {'bydelsnavn': {0: 'Amager Vest', 1: 'Amager Øst', 2: 'Bispebjerg', 3: 'Brønshøj-Husum', 4: 'Indre By', 5: 'Nørrebro', 6: 'Valby', 7: 'Vanløse', 8: 'Vesterbro', 9: 'Østerbro'}, 'Alder': {0: 53.0, 1: 21.0, 2: 1.0, 3: 9.0, 4: 4.0, 5: 2.0, 6: 3.0, 7: 44.0, 8: 46.0, 9: 59.0}, 'Alderm': {0: 63.0, 1: 32.0, 2: 49.0, 3: 13.0, 4: 45.0, 5: 55.0, 6: 104.0, 7: 0.0, 8: 50.0, 9: 4.0}, 'Apple': {0: 94.0, 1: 109.0, 2: 115.0, 3: 12.0, 4: 22.0, 5: 81.0, 6: 41.0, 7: 3.0, 8: 132.0, 9: 51.0}, 'Alder_p': {0: 21.9, 1: 8.68, 2: 0.41, 3: 3.72, 4: 1.65, 5: 0.83, 6: 1.24, 7: 18.18, 8: 19.01, 9: 24.38}, 'Alderm_p': {0: 15.18, 1: 7.71, 2: 11.81, 3: 3.13, 4: 10.84, 5: 13.25, 6: 25.06, 7: 0.0, 8: 12.05, 9: 0.96}, 'Apple_p': {0: 14.24, 1: 16.52, 2: 17.42, 3: 1.82, 4: 3.33, 5: 12.27, 6: 6.21, 7: 0.45, 8: 20.0, 9: 7.73}})
我当前的代码如下所示：
# Create an empty figure
p = figure(x_range = temp['bydelsnavn'].values,plot_width = 700, plot_height=400,
title='Tree pr. district', toolbar_sticky = False,
tools = 'pan,wheel_zoom,reset')
colornames = ['#c6a5c1','#77c6ba','#90318e']
treeName = temp.columns[1:4]
# Stacked bar chart
renderers = p.vbar_stack(stackers=treeName,x='bydelsnavn',source=temp,
width=0.8, color = colornames)
# Add the hover tool
for r in renderers:
tree = r.name
hover = HoverTool(tooltips=[
("%s" % tree, "@{%s}" % tree)
], renderers = [r])
p.add_tools(hover)
# remove the grid
p.xgrid.grid_line_color=None
p.ygrid.grid_line_color=None
# Make sure bars stat at 0
p.y_range.start = 0
# remove - y-axis
p.yaxis.visible = False
# Remove the grey box around the plot
p.outline_line_color = None
# Turn the x-labels
p.xaxis.major_label_orientation = 0.5
# Remove tool bar logo
p.toolbar.logo = None
# Move the border of the left side to show "Amager"
p.min_border_left = 30
show(p)
如何将图像添加到 HoverTool？例如，如果我想将此图片添加到所有 3 种树类型：https://upload.wikimedia.org/wikipedia/commons/5/51/Apfelbaum_Winterrambour_Hochstamm.jpg
在下面编辑：
阅读评论后，我更改了我的代码，因此我现在有了一个源代码，并且我更改了工具提示以满足我的需要。
source = ColumnDataSource(data=dict(
bydelsnavn=['Amager Vest', 'Amager Øst', 'Bispebjerg', 'Brønshøj-Husum',
'Indre By', 'Nørrebro', 'Valby', 'Vanløse', 'Vesterbro','Østerbro'],
Alder = [53., 21., 1., 9., 4., 2., 3., 44., 46., 59.],
Alderm = [ 63., 32., 49., 13., 45., 55., 104., 0., 50., 4.],
Apple = [ 94., 109., 115., 12., 22., 81., 41., 3., 132., 51.],
imgs = ['https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/CopalmeDAmerique.jpg/800px-CopalmeDAmerique.jpg',
'https://docs.bokeh.org/static/snakebite.jpg',
'https://upload.wikimedia.org/wikipedia/commons/5/51/Apfelbaum_Winterrambour_Hochstamm.jpg']
))
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>
"""
我在figure中添加了tooltips=TOOLTIPS，并在renderers中更改了source=source。
在源代码中我为三种树类型添加了三张图片，但是目前我实际上是为每个bydelsnavn而不是三种类型添加一张图片，我该如何控制呢？
【问题讨论】：