python - 如何使用 Bokeh 更改列名、字体、大小并使其在数据表中居中

问题描述

我正在使用散景库，我想更改数据表列名称字体和大小，并使用散景将其放在数据表的中心。以下是根据以下代码的输出

我使用了以下代码：

 template="""
<div style="background:<%= 
    (function colorfromint(){
        if(value < 0){
            return("red")}
        else{return("#51c2d5")}
        }()) %>; 
    color: white";
   > 
<div style="font-size: 20px;">
<%= value.toFixed(1) %>
</div>

<%= value.toFixed(1) %></div>
"""


template2="""
<div style="background:<%= 
    (function colorfromint(){
        if(value > 0){
            return("#f9dfdc")}
        else{return("#f9dfdc")}
        }()) %>; 
    color: black";
   > 
<div style="font-size: 20px;">
<%= value.toFixed(1) %>
</div>

<%= value.toFixed(1) %></div>
"""

template3="""
<div style="font-size: 20px;">
<%= value %>
</div>
"""

template4="""
<div style="background:<%= 
    (function colorfromint(){
        if(value > 0){
            return("#e1e5ea")}
        else{return("#e1e5ea")}
        }()) %>; 
    color: black";
   > 
<div style="font-size: 20px;">
<%= value.toFixed(1) %>
</div>

<%= value.toFixed(1) %></div>
"""

template5="""
<div style="background:<%= 
    (function colorfromint(){
        if(value > 0){
            return("#f9dfdc")}
        else{return("#f9dfdc")}
        }()) %>; 
    color: black";
   > 
<div style="font-size: 20px;">
<%= value.toFixed(1) %>
</div>

<%= value.toFixed(1) %></div>
"""


template6="""
<div style="background:<%= 
    (function colorfromint(){
        if(value > 0){
            return("#fff5b7")}
        else{return("#fff5b7")}
        }()) %>; 
    color: black";
   > 
<div style="font-size: 20px;">
<%= value.toFixed(1) %>
</div>

<%= value.toFixed(1) %></div>
"""



style = Div(text="""
<style>
.my-table .slick-header-column:nth-child(3) .slick-column-name{
    float:left !important;
}
</style>
""")

#formatter=NumberFormatter(format='0,0[.]00',text_align='center')
#formatter=NumberFormatter(format='0,0[.]00',text_align='center',font_style="bold")
#,formatter=StringFormatter(font_style="bold")
formater =  HTMLTemplateFormatter(template=template)
formater2 =  HTMLTemplateFormatter(template=template2)

formater3 =  HTMLTemplateFormatter(template=template3)
formater4 =  HTMLTemplateFormatter(template=template4)
formater5 =  HTMLTemplateFormatter(template=template5)
formater6 =  HTMLTemplateFormatter(template=template6)
columns = [
    TableColumn(field='Phase', title='Phase',formatter=formater3),
    TableColumn(field=' RW ', title='Weight Factor',formatter=formater6),
    TableColumn(field='Plan_Prev_Week', title='Plan Last Week',formatter=formater2),
    TableColumn(field='Actual_Prev_Week', title='Actual Last Week',formatter=formater2),
    TableColumn(field='Diff_Prev_Week', title='Difficiency Last Week',formatter=formater),
    TableColumn(field='Plan_This_Week', title='Plan This Week',formatter=formater4),
    TableColumn(field='Actual_This_Week', title='Actual This Week',formatter=formater4),
    TableColumn(field='Diff_This_Week', title='Difficiency This Week',formatter=formater),
    TableColumn(field='Plan_To_Date', title='Plan To Date',formatter=formater5),
    TableColumn(field='Actual_To_Date', title='Actual To Date',formatter=formater5),
    TableColumn(field='Diff_To_Date', title='Difficiency To Date',formatter=formater)
    ]

columns2 = [
    TableColumn(field='Camp', title='Camp',formatter=formater3),
    TableColumn(field=' RW ', title='Weight Factor',formatter=formater6),
    TableColumn(field='Plan_Prev_Week', title='Plan Last Week',formatter=formater2),
    TableColumn(field='Actual_Prev_Week', title='Actual Last Week',formatter=formater2),
    TableColumn(field='Diff_Prev_Week', title='Difficiency Last Week',formatter=formater),
    TableColumn(field='Plan_This_Week', title='Plan This Week',formatter=formater4),
    TableColumn(field='Actual_This_Week', title='Actual This Week',formatter=formater4),
    TableColumn(field='Diff_This_Week', title='Difficiency This Week',formatter=formater),
    TableColumn(field='Plan_To_Date', title='Plan To Date',formatter=formater5),
    TableColumn(field='Actual_To_Date', title='Actual To Date',formatter=formater5),
    TableColumn(field='Diff_To_Date', title='Difficiency To Date',formatter=formater)
    ]






myTable = DataTable(source=source, columns=columns, sizing_mode='stretch_width',fit_columns=True)
myTable2 = DataTable(source=source2, columns=columns2, sizing_mode='stretch_width',fit_columns=True)
myTable3 = DataTable(source=source3, columns=columns2, sizing_mode='stretch_width',fit_columns=True)

div_article = Div(text="<h1 style=text-align:center> Progress report as of 2-June 21 </h1>",sizing_mode='stretch_width')
div_article2 = Div(text="<h2 style=text-align:center> Construction Progress Per Camp </h2>",sizing_mode='stretch_width')
div_article3 = Div(text="<h2 style=text-align:center> Progress Per Discipline </h2>",sizing_mode='stretch_width')
div_article4 = Div(text="<h2 style=text-align:center> Procurement Progress Per Camp </h2>",sizing_mode='stretch_width')

div_article.style={'color': '#0269A4', 'font-family': 'Helvetica Neue, Helvetica, Arial, sans-serif;','margin-left': '50em', 'font-size': '1.1em'}
div_article3.style={'color': '#0269A4', 'font-family': 'Helvetica Neue, Helvetica, Arial, sans-serif;','font-size': '1.1em'}
div_article2.style={'color': '#0269A4', 'font-family': 'Helvetica Neue, Helvetica, Arial, sans-serif;','font-size': '1.1em'}
div_article4.style={'color': '#0269A4', 'font-family': 'Helvetica Neue, Helvetica, Arial, sans-serif;','font-size': '1.1em'}
#div_article.sizing_mode = "stretch_both"
div_article.margin = 30

l = layout([
  
    [div_article],
    [div_article3],
    [myTable],
    [div_article2],
    [myTable2],
    [div_article4],
    [myTable3]

])
l.sizing_mode = "scale_both"

curdoc().add_root(l)

output_file('result.html')
show(l)

我已经使用上述代码进行格式化但表格列名没有改变，表格数据的格式只改变了但表格标题没有改变。

我要求一个模板来允许我更改表格内容的格式和列的名称/标题。

标签： pythonhtmlcssbokeh

python - 如何使用 Bokeh 更改列名、字体、大小并使其在数据表中居中

问题描述

解决方案

推荐阅读