Python 向Bokeh stackedbarchart添加图片

我已经在Bokeh创建了一个堆叠条形图，现在想向hoverTool添加图片，正如我在这里看到的：

我当前的代码如下所示：

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']    
    ))

如何将图像添加到鼠标悬停工具？例如，如果我想将此图片添加到所有3种树类型中：

编辑如下： 在阅读了一条评论之后，我已经更改了代码，因此现在我有了一个源代码，并且我已经更改了工具提示以满足我的需要

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>
"""

我在图中添加了tooltips=tooltips，并在渲染器中更改了source=source

---

在源代码中，我为三种树类型添加了三张图片，但目前我实际上是在为每个bydelsnavn而不是三种类型添加一张图像，我如何控制这一点？

由于每个渲染器都必须有自己的图像，因此无法将图像数据合并到数据源中。但是，由于已经为每个渲染器使用了单独的悬停工具，因此可以直接将图像URL嵌入工具提示HTML模板中

下面的代码通过使用当您将元组列表传递给HoverTool时Bokeh为工具提示生成的HTML来演示它。但它可以适应你的需要

来自bokeh.io导入展 从bokeh.models导入ColumnDataSource，HoverTool 从bokeh.plotting导入图形 source=ColumnDataSourcedata=dict bydelsnavn=['Amager背心'、'AmagerØst'、'Bispebjerg'、'Brønshøj-Husum'， “因德雷比”、“Nørrebro”、“Valby”、“Vanløse”、“Vesterbro”、“Østerbro”]， 桤木=[53,21,1,9,4,2,3,44,46,59]， Alderm=[63,32,49,13,45,55,104,0,50,4]， 苹果=[94,109,115,12,22,81,41,3,132,51] p=figurex\u range=sortedsetsource.data['bydelsnavn'，绘图宽度=700，绘图高度=400， title='Tree pr.district'，toolbar\u sticky=False， 工具=“平移、滚轮\缩放、重置” colornames=['c6a5c1'，'77c6ba'，'90318e'] 树名=['Alder'，'Alderm'，'Apple'] 图像={'Alder'：'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'} renderers=p.vbar\u stackers=treeName，x='bydelsnavn'，source=source， 宽度=0.8，颜色=颜色名称 对于渲染器中的r： tree=r.name hover=hovertooltips=f\ {tree} @{{{tree}}} ，renderers=[r] p、 添加工具铲 p、 xgrid.grid\u line\u color=无 p、 ygrid.grid\u line\u color=无 p、 y_range.start=0 p、 yaxis.visible=False p、 轮廓线颜色=无 p、 xaxis.major_标签_方向=0.5 p、 toolbar.logo=无 移动左侧的边框以显示图像 p、 最小边界左=30 炫耀

---

谢谢你的回答！我已经尽我最大的努力去实现它，但是我不明白我怎样才能把一个图像传递给每一种树，而不是传递给每一个城区？我已经编辑了上面的文章，所以它也包括了我的新资料。可以肯定的是，你想为阿尔德、阿尔德姆和苹果各拍一张照片吗？是的，当然：-老兄，你太棒了，非常感谢！这个阴谋现在会很糟糕！

# 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)

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>
"""