在 Web App 中设置 Bokeh Charts 的绝对屏幕位置答案

【问题标题】：Setting absolute screen position of Bokeh Charts in Web App在 Web App 中设置 Bokeh Charts 的绝对屏幕位置
【发布时间】：2019-03-21 08:16:47
【问题描述】：

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

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)

结果会是这样的：

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

怎样才能达到这个结果？

谢谢！

【问题讨论】：

标签： python web-applications bokeh

【解决方案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))

结果：

【讨论】：