在Bokeh堆栈式图表中添加图片。

问题描述 投票：0回答：1

我在Bokeh中创建了一个叠加的barch图，现在想在hoverTool中添加图片，因为我看到这里已经完成了。https:/docs.bokeh.orgenlatestdocsuser_guidetools.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.orgwikipediacommons551Apfelbaum_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>
"""

我还添加了 tooltips=TOOLTIPS在 figure并改变了 source=source 在 renderers.

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

python bokeh
1个回答
1
投票

由于每个渲染器都必须有自己的图像，你不能在数据源中加入图像数据。但由于你已经为每个渲染器使用了单独的悬停工具，所以你可以直接在工具提示HTML模板中嵌入图片URL。

下面的代码通过使用Bokeh为tooltips生成的HTML来演示，当你传递一个tuple列表给 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)
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.