bokeh是否可以动态更新网格图中的列数?

问题描述

我有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