如何将小部件放置在面板上 HoloViews 动态地图

Question

我正在尝试在绘图上显示 HoloViews 动态绘图的小部件（Select、滑块等）。我所能找到的只是 widget_location 参数，它采用相对于绘图的位置（‘left’、‘right’，……）。但我希望它被放置在地块上，而不是旁边。我想知道是否有办法做到这一点？

P.S。例如有 opts(colorbar_opts={'location':(float,float)}) 可用于将颜色条放置在您想要的位置。为小部件提供类似的选项将非常有用。

Answer 1

好的，我找到了解决方案！我必须使用自定义 CSS。下面的代码展示了如何做到这一点。

import holoviews as hv
import panel as pn
pn.extension('ace')
hv.extension("bokeh")


plots = {}
for i in range(5,10):
    data = {
        "x": list(range(0,i)), "y": [i]*i
    }
    plots[i]=hv.Curve(data).opts(width=500)
hvmap = hv.HoloMap(plots)

left_pos = pn.widgets.IntSlider(value=5, step=1, start=-1000, end=5, name="x")
top_pos = pn.widgets.IntSlider(value=5, step=1, start=5, end=200, name="y")
style = pn.pane.HTML(height=0, width=0, sizing_mode="fixed", margin=0)
css = pn.widgets.Ace(height=150)

@pn.depends(left_pos=left_pos, top_pos=top_pos, watch=True)
def _update_css(left_pos, top_pos):
    value = f"""
.bk.panel-widget-box {{
    left: {left_pos}px !important;
    top: {top_pos}px !important;
}}
"""
    css.value = value
    style.object = "<style>" + value + "</style>"

pn.Column("""# How to overlay widgets on HoloViews Map?

We will be using css to overlay and Panel to create the this tool""",
    hvmap,
    "## Settings",
    left_pos,
    top_pos,
    css,
    style,
).servable()

所有功劳归功于 Marc Skov Madsen。原回答here

如何将小部件放置在面板上 HoloViews 动态地图

How to place a widget over a panel HoloViews dynamic map

panel

matplotlib

bokeh

holoviews