向Bokeh stackedbarchart添加图片

Question

我已经在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添加了一张图片，而不是这三种类型，我如何控制这一点呢？

Answer 1

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

下面的代码通过使用Bokeh在将元组列表传递给HoverTool时为工具提示生成的超文本标记语言演示了这一点。但它可以根据您的需要进行调整。

from bokeh.io import show
from bokeh.models import ColumnDataSource, HoverTool
from bokeh.plotting import figure

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

p = figure(x_range=sorted(set(source.data['bydelsnavn'])), plot_width=700, plot_height=400,
           title='Tree pr. district', toolbar_sticky=False,
           tools='pan,wheel_zoom,reset')

colornames = ['#c6a5c1', '#77c6ba', '#90318e']

treeName = ['Alder', 'Alderm', 'Apple']
images = {'Alder': 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/CopalmeDAmerique.jpg/800px-CopalmeDAmerique.jpg',
          'Alderm': 'https://docs.bokeh.org/static/snakebite.jpg',
          'Apple': 'https://upload.wikimedia.org/wikipedia/commons/5/51/Apfelbaum_Winterrambour_Hochstamm.jpg'}

renderers = p.vbar_stack(stackers=treeName, x='bydelsnavn', source=source,
                         width=0.8, color=colornames)

for r in renderers:
    tree = r.name
    hover = HoverTool(tooltips=f"""\
    <div style="display: table; border-spacing: 2px;">
      <div style="display: table-row;">
        <div style="display: table-cell;" class="bk-tooltip-row-label">
          {tree}
        </div>
        <div style="display: table-cell;" class="bk-tooltip-row-value">
          @{{{tree}}}
        </div>
        <div style="display: table-cell;" class="bk-tooltip-row-value">
          <img style="max-width: 100px; max-height: 100px;" src="{images[tree]}">
        </div>
      </div>
    </div>
    """, renderers=[r])
    p.add_tools(hover)

p.xgrid.grid_line_color = None
p.ygrid.grid_line_color = None
p.y_range.start = 0
p.yaxis.visible = False
p.outline_line_color = None
p.xaxis.major_label_orientation = 0.5
p.toolbar.logo = None
# Move the border of the left side to show "Amager"
p.min_border_left = 30

show(p)