python - 如何使 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()
关于如何解决这个问题的任何想法?
解决方案
您可以尝试通过在浏览器中检查 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)
推荐阅读
- c# - 如何在 .Net Core MVC 中为 Azure SignalR 调用 CosmosDBTrigger 和 HttpResponseMessage?
- javascript - 在 PREM Dynamics CRM 2016 JavaScript 上相当于我的 C# QueryExpression
- typo3 - 如何通过 Typoscript 正确实例化 tx_news
- php - 打印特定数组数据时出现问题
- java - 使用 gradle 创建可执行 jar
- c# - 当另一个窗口关闭时需要更新一个窗口。需要再次实例化关闭的窗口
- html - 将用 Papaparse 解析的 CSV 渲染成 HTML
- r - 让动画滑块向后(从右到左)模拟倒计时?
- groovy - 更改/选择下拉框中的值.. 使用 Geb
- android - 我的预览在 android studio 中显示为空白