python - 在 Web App 中设置 Bokeh 图的绝对屏幕位置

Question

我正在尝试在布局中设置 Bokeh 图的绝对位置，以便其中一个图显示在另一个图的顶部。现在，当我正在策划这样的事情时:

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

结果: