Python 向bokeh数据表标题添加颜色_Python_Bokeh

Python 向bokeh数据表标题添加颜色

python

Python 向bokeh数据表标题添加颜色,python,bokeh,Python,Bokeh,我创建了一个bokeh数据表，想知道如何将列标题格式化为蓝色背景，非常感谢您的帮助谢谢不幸的是，这并不是一件小事。SlickGrid（它是DataTable的基础）有许多CSS可配置属性，因此在Bokeh模型上公开它们作为Python属性是禁止的。因此，您必须在模板中直接以SlickGrid CSS为目标。根据您未提供的详细信息，情况会有所不同（这是一个独立的HTML文档吗？由带有组件的web应用程序提供服务吗？是一个Bokeh服务器应用程序吗？），因此这里有一个完整的使用文件\u HTML的

我创建了一个bokeh数据表，想知道如何将列标题格式化为蓝色背景，非常感谢您的帮助

谢谢

不幸的是，这并不是一件小事。SlickGrid（它是

DataTable

的基础）有许多CSS可配置属性，因此在Bokeh模型上公开它们作为Python属性是禁止的。因此，您必须在模板中直接以SlickGrid CSS为目标。根据您未提供的详细信息，情况会有所不同（这是一个独立的HTML文档吗？由带有

组件的web应用程序提供服务吗？是一个Bokeh服务器应用程序吗？），因此这里有一个完整的使用文件\u HTML
的最小示例，您可以将其用作适应其他情况的基础：
import jinja2

from bokeh.document import Document
from bokeh.embed import file_html
from bokeh.resources import CDN
from bokeh.util.browser import view
from bokeh.models import ColumnDataSource, DataTable, TableColumn
from bokeh.sampledata.autompg2 import autompg2 as mpg

source = ColumnDataSource(data=mpg)
columns = [
    TableColumn(field="manufacturer", title="Manufacturer"),
    TableColumn(field="model", title="Model"),
    TableColumn(field="displ", title="Displacement"),
    TableColumn(field="year", title="Year"),
    TableColumn(field="cyl", title="Cylinders"),
    TableColumn(field="cty", title="City MPG"),
    TableColumn(field="hwy", title="Highway MPG"),
]
table = DataTable(source=source, columns=columns, width=800, css_classes=["mycustom"])

doc = Document()
doc.add_root(table)

template = jinja2.Template("""
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{ title|e if title else "Bokeh Plot" }}</title>
        {{ bokeh_css }}
        {{ bokeh_js }}
        <style>
          .slick-header-column {
            background-color: lightblue !important;
            background-image: none !important;
          }
        </style>
    </head>
    <body>
        {{ plot_div|indent(8) }}
        {{ plot_script|indent(8) }}
    </body>
</html>
""")

if __name__ == "__main__":
    filename = "widgets.html"
    with open(filename, "w") as f:
        f.write(file_html(doc, CDN, "Table", template=template))
    view(filename)

importjinja2
从bokeh.document导入文档
从bokeh.embed导入文件\u html
从bokeh.resources导入CDN
从bokeh.util.browser导入视图
从bokeh.models导入ColumnDataSource、DataTable、TableColumn
从bokeh.sampledata.autompg2将autompg2导入为mpg
source=ColumnDataSource（数据=mpg）
列=[
TableColumn（field=“manufacturer”，title=“manufacturer”），
TableColumn（field=“model”，title=“model”），
TableColumn（field=“displ”，title=“Displacement”），
TableColumn（field=“year”，title=“year”），
TableColumn（field=“cyl”，title=“圆柱体”），
TableColumn（field=“cty”，title=“City MPG”），
表列（field=“hwy”，title=“公路MPG”），
]
table=DataTable（source=source，columns=columns，width=800，css_classes=[“mycustom”]）
doc=文件（）
添加文档根（表）
模板=jinja2。模板（“”）
{{title | e如果title else“Bokeh Plot”}
{{bokeh_css}}
{{bokeh_js}
.光滑集管柱{
背景色：浅蓝色！重要；
背景图像：无！重要；
}
{{plot_div | indent（8）}
{{plot_script}缩进（8）}
""")
如果名称=“\uuuuu main\uuuuuuuu”：
filename=“widgets.html”
打开（文件名为“w”）作为f：
f、 写入（文件\ html（文档，CDN，“表格”，模板=模板））
视图（文件名）

如果您使用bokeh server部署应用程序，另一种解决方案是直接编辑CSS样式文件。
样式CSS文件位于Bokeh应用程序目录（见下文）的静态文件夹中，是一个可选文件，如果您愿意，可以将其包含在目录中

我的应用程序

资料

things.csv

main.py
静止的

css

styles.css




为了覆盖SlickGrid的CSS文件，您可以在styles.CSS文件中使用以下类，只要您使用！重要标签
例如：
.slick标题列{
背景色：浅蓝色！重要；
背景图像：无！重要；
}
.光滑划船{
背景色：白色！重要；
背景图像：无！重要；
颜色：黑色！重要；
}
.bk细胞指数{
背景色：白色！重要；
背景图像：无！重要；
颜色：黑色！重要；
}

slick header列控制表格的列
slick row控制表中的行
bk单元索引控制表的索引值