首页 > 解决方案 > 如何使 Bokeh Datatable 响应式地适应

问题描述

我正在尝试使我的数据表适合全宽,但我正在努力实现这一目标。

我想避免给桌子一个固定的。

这是表格的代码。我正在使用 get_table 函数来生成它,并使用 componnets_web 函数来获取 div 和 script 标签。然后使用 bokeh.layouts.layout 将其显示在其他地方。

def get_table(self):
    '''
    creates a bokeh table widget from provided dataframe.
    :param dataframe: A pandas dataframe
    :return: data_table: A Bokeh widget
    '''

    from bokeh.models.widgets import DataTable, TableColumn

    source = ColumnDataSource(self.dataframe)
    columns = [TableColumn(field=f, title=f) for f in self.headers]
    data_table = DataTable(source=source, columns=columns)

    return data_table

def components_web(plot):
    '''
    Generates html components for web display.
    :param plot: A bokeh plot
    :return: script: A html <script> tag with render javascript, div a <div> tag with html to display a bokeh plot,
    resources: A <script> tag with javascript to render bokeh plots.
    '''

    from bokeh.resources import CDN
    from bokeh.embed import components

    script, div = components(plot, CDN)

    return script, div

然后实际显示它并获得布局:

    table = br.get_table()
    script, div = br.components_web(layout([table], sizing_mode='stretch_both'))
    resource = br.bokeh_web_resources()

关于如何解决这个问题的任何想法?

标签: pythonbokeh

解决方案


您可以尝试通过在浏览器中检查 Bokeh 表 css 类来覆盖 Bokeh CSS 样式,并创建自己的具有不同宽度属性的样式,而不是将其放在外部 style.css 文件中,并通过向css_classes = ["my_class"]TableColumn 和 DataTable 添加属性来引用它. 然而,这可能非常困难,因为有很多类,而且您不知道要定位哪些类。

相反,我建议使用以下解决方案,您可以允许用户使用滑块设置自定义表格宽度。同样的想法也可以应用于桌子高度。

from bokeh.io import curdoc, show
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource, Slider, DataTable, TableColumn

def get_square(n):
    return dict(x = list(range(n)), y = [x ** 2 for x in range(n)])

source = ColumnDataSource(get_square(15))
columns = [TableColumn(field = "x", title = "x"), TableColumn(field = "y", title = "x**2")]

table = DataTable(source = source, columns = columns, width = 300, css_classes = ['my_class'])
slider = Slider(start = 1, end = 200, value = 15, step = 1, title = "i", width = 300)

def update_data(attrname, old, new):
    table.source.data = get_square(slider.value)
    table.width = 300 + slider.value * 25
    table.update()

slider.on_change('value', update_data)

layout = widgetbox(slider, table)
curdoc().add_root(layout)

推荐阅读