在 Web App 中设置散景图的绝对屏幕位置

Question

我试图在布局内设置散景图的绝对位置，以便其中一个图显示在另一个图的顶部。现在当我在绘制这样的东西时：

from bokeh.io import curdoc 
from bokeh.plotting import figure 
from bokeh.layouts import layout 
import numpy as np

x = np.arange(1,10.1,0.1) 
y = [i**2 for i in x]

categories = ['A', 'B'] 
values = [1000, 1500]

fig1 = figure(width=600,plot_height=600, title="First Plot")
fig1.line(x=x, y=y)

fig2 = figure(width=200,plot_height=250,x_range=categories,
title="Second Plot") fig2.vbar(x=categories, top=values, width=0.2)

l = layout([[fig1,fig2]]) 
curdoc().add_root(l)

结果将是这样的：

我正在寻找的是某种使它看起来像这样的方法：

怎样才能达到这个结果？

谢谢！

Answer 1

这是我想出的（适用于 Bokeh v1.0.4）。您需要将鼠标移到绘图上才能让另一处跳转到内部，但您也可以从回调中复制 JS 代码，然后手动将其添加到 Bokeh 生成的 HTML 中，以便获得相同的结果。

from bokeh.plotting import figure, show
from bokeh.layouts import Row
from bokeh.models import ColumnDataSource, CDSView, BooleanFilter, CustomJS, BoxSelectTool, HoverTool
import pandas as pd

plot = figure(tools = 'hover', tooltips = [("x", "@x"), ("y", "@y")])
circles = plot.circle('x', 'y', size = 20, source = ColumnDataSource({'x': [1, 2, 3], 'y':[1, 2, 3]}))

inner_plot = figure(name = 'inner_plot', plot_width = 200, plot_height = 200)
lines = inner_plot.line('x', 'y', source = ColumnDataSource({'x': [8, 9, 10], 'y':[8, 6, 8]}))

code = """  div = document.getElementsByClassName('bk-root')[0];            
            tooltip_plot = div.children[0].children[1]
            tooltip_plot.style = "position:absolute; left: 340px; top: 350px;"; """

callback = CustomJS(code = code)
plot.js_on_event('mousemove', callback)

show(Row(plot, inner_plot))

结果：