Python Bokeh表格的列和标题不对齐

Question

Python Bokeh表格的列和标题不对齐

8

我想在Jupyter笔记本中使用Python和可视化库Bokeh来显示一个表格。我使用下面的代码在Jupyter笔记本中显示我的表格，其中result是一个数据框：

source = ColumnDataSource(result)

columns = [
        TableColumn(field="ts", title="Timestamp"),
        TableColumn(field="bid_qty", title="Bid Quantity"),
        TableColumn(field="bid_prc", title="Bid Price"),
        TableColumn(field="ask_prc", title="Ask Price"),
        TableColumn(field="ask_qty", title="Ask Quantity"),
    ]

data_table = DataTable(source=source, columns=columns, fit_columns=True, width=1300, height=800)
show(widgetbox([data_table], sizing_mode = 'scale_both'))

之前我在使用vform，但现在它似乎已经过时了，并且也不再像预期的那样工作。这是在我的jupyter笔记本版本更新后发生的。无论我设置什么宽度，我的列标题都不对齐，并且与表格有奇怪的重叠：

这种情况以前从未发生过，我能够得到一个漂亮的表格，其中所有内容都对齐。即使我调整标题，它们仍然不会对齐。如果我将表格保存为html文件而不是直接在Jupyter笔记本中调用show()，就不会出现这种情况。我需要改变什么？有更好的方法吗？ 完整示例

from bokeh.io import show, output_notebook
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import TableColumn, DataTable
import pandas as pd

output_notebook()

d = {'one' : pd.Series([1., 2., 3.], index=['a', 'b', 'c']), 
 'two' : pd.Series([1., 2., 3., 4.], index=['a', 'b', 'c', 'd'])}
df = pd.DataFrame(d)

source = ColumnDataSource(df)

columns = [
    TableColumn(field="one", title="One"),
    TableColumn(field="two", title=" Two"),
]

data_table = DataTable(source=source, columns=columns, 
    fit_columns=True, width=800, height=800)
show(widgetbox([data_table], sizing_mode = 'scale_both'))

这是在以下版本的系统上运行：

Jupyter 4.2.0
Python 2.7.12 (Anaconda 2.3.0 64位)
Bokeh 0.12.2

- klib

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jackdaw · Accepted Answer

Bokeh小部件在Jupyter笔记本中的CSS样式位于http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.0.min.css中，其中对于元素.bk-root .bk-slick-header-column.bk-ui-state-default的height:16px是硬编码的。因此，如果不更改CSS，则无法更改它。

可以通过HTML函数进行临时样式设置。

from IPython.core.display import HTML
HTML("""
<style>
.bk-root .bk-slick-header-column.bk-ui-state-default {
height: 25px!important;
}
</style>
""")

对于持久的更改，可以将 CSS 添加到 Jupyter 配置中的 custom 目录中。您可以通过调用来找出它在哪里。

jupyter --config-dir

默认情况下是 ~/.jupyter。新的 CSS 需要放在 ~/.jupyter/custom/custom.css 中。

之前

之后