问题描述
我有2个bokeh行。第一行包含一个DataTable
和一个TextInput
,两者都可以stretch_width
以适合浏览器的宽度。最下面的行包含gridplot
, 能够stretch_width
,但只能通过扭曲图像的比例来实现。理想情况下,我希望gridplot
根据浏览器的大小来更新显示的列数。
请考虑以下示例:
import pandas as pd
from bokeh.models.widgets import DataTable,TableColumn
from bokeh.models import ColumnDataSource,TextInput
from bokeh.plotting import figure,output_file,save
from bokeh.layouts import row,column,gridplot
def get_datatable():
"""this can stretch width without issue"""
df = pd.DataFrame({'a': [0,1,2],'b': [2,3,4]})
source = ColumnDataSource(df)
Columns = [TableColumn(field=i,title=i) for i in df.columns]
data_table = DataTable(columns=Columns,source=source,sizing_mode='stretch_width',max_width=9999)
return data_table
def get_text_input():
"""this can stretch width without issue"""
return TextInput(value='Example',title='Title',sizing_mode="stretch_width",max_width=9999)
def get_gridplot():
"""
this requires columns to be hard-coded
stretch_width is an option,but only distorts the images if enabled
"""
figs = []
for _ in range(30):
fig = figure(x_range=(0,10),y_range=(0,10))
_ = fig.image_rgba(image=[],x=0,y=0)
figs.append(fig)
return gridplot(children=figs,ncols=2)
top_row = row([get_datatable(),get_text_input()],max_width=9999,sizing_mode='stretch_width')
bottom_row = row(get_gridplot())
col = column(top_row,bottom_row,sizing_mode="stretch_width")
output_file("example.html")
save(col)
我的最终目标是让gridplot
根据浏览器的宽度自动更新列数。有没有办法在bokeh中原生执行此操作?如果没有,是否可以通过CustomJs
JavaScript回调来实现?
解决方法
解决方案
在调用图形时,请考虑使用sizing_mode=“scale_width”
。
fig = figure(x_range=(0,10),y_range=(0,sizing_mode=“scale_width”)
注意
可能更可取的是使用scale_width
而不是更普遍的stretch_width
。
Bokeh Doc示例:https://docs.bokeh.org/en/latest/docs/user_guide/layout.html#multiple-objects