Как выровнять заголовки в Bokeh TableColumn - PullRequest
Новая
       9

Как выровнять заголовки в Bokeh TableColumn

0 голосов
/ 26 июня 2019

Я использую Bokeh TableColumn для создания таблицы данных в интерактивной панели.Я хотел бы выровнять три числовых столбца вправо.Однако заголовки остаются выровненными по левому краю и не совпадают с числами в столбце.

Есть ли способ выравнивания заголовков по правому краю в Bokeh TableColumn?

У меня есть поиск переполнения стека ине верьте, что у этого есть решение.Ниже приведен минимальный рабочий пример того, что я пытаюсь сделать (с использованием синтетических данных). 

import pandas as pd
import numpy as np
from bokeh.plotting import figure, show, output_file, curdoc
from bokeh.layouts import layout, row, column, Spacer, widgetbox
from bokeh.models import ColumnDataSource, DataTable, TableColumn, DateRangeSlider, Slider, BoxAnnotation, HoverTool
from bokeh.models.widgets import NumberFormatter, DateFormatter, RangeSlider, Toggle, Button, CheckboxButtonGroup, Div

np.random.seed(10)
data = pd.DataFrame({
    'date':pd.date_range(start='1/1/2000', periods=200, freq='Q'),
    'x': np.random.choice(range(100),200)
})

data['qrtly'] = round(data['x'].pct_change(),4)
data['tty'] = round(data['x'].pct_change(periods=4),4)
source = ColumnDataSource(data)

columns = [
    TableColumn(field='date', title='', formatter=DateFormatter(format='%b-%Y')),
    TableColumn(field='x', title='levels', formatter=NumberFormatter(text_align='right')),
    TableColumn(field='qrtly', title='qrtly', formatter=NumberFormatter(format='0.00%',text_align='right')),
    TableColumn(field='tty', title='tty', formatter=NumberFormatter(format='0.00%',text_align='right'))
]

table = DataTable(source=source, columns=columns, width=635)

curdoc().add_root(table)

1 Ответ

0 голосов
/ 26 июня 2019

Вот метод, который использует css для этого:

присвойте таблице класс css: 

table = DataTable(source=source, columns=columns, width=635, css_classes=["my-table"])

, затем используйте следующий стиль для выравнивания столбцов уровней по правому краю: 

.my-table .slick-header-column:nth-child(3) .slick-column-name{
    float:right !important;
}

Вы можете добавить стиль, используя Div 

from bokeh.models.widgets import Div
table = DataTable(source=source, columns=columns, width=635, css_classes=["my-table"])
style = Div(text="""
<style>
.my-table .slick-header-column:nth-child(3) .slick-column-name{
    float:right !important;
}
</style>
""")
show(column(table, style))
...