Python Bokeh表格列和标题不排列

时间:2016-09-27 19:29:22

标签: python ipython jupyter bokeh

我正在尝试使用python和可视化库Bokeh在jupyter笔记本中显示一个表。我使用以下代码在jupyter笔记本中显示我的表格,其中结果是一个数据框:

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笔记本版本更新后发生的。无论我设置宽度如何,我的列标题都没有排列,并与表格有一个奇怪的重叠:

enter image description here

之前没有发生这种情况,我能够得到一张漂亮的桌子。即使我调整标题他们仍然不会排队。当我将表保存为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 bit)
  • Bokeh 0.12.2

1 个答案:

答案 0 :(得分:2)

Jupyter笔记本的Bokeh小部件的CSS样式位于http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.0.min.css,其中元素height:16px的{​​{1}}是硬编码的。所以如果不改变css就无法改变。

它可以通过.bk-root .bk-slick-header-column.bk-ui-state-default函数

设置为adhock
HTML

对于持久性更改,可以将css添加到Jupyter配置中的from IPython.core.display import HTML HTML(""" <style> .bk-root .bk-slick-header-column.bk-ui-state-default { height: 25px!important; } </style> """) 目录中。您可以通过调用

来确定它的位置
custom

默认情况下为jupyter --config-dir 新的css需要在~/.jupyter之后。

enter image description here

enter image description here