为散景数据表添加颜色 header

Question

我创建了一个散景数据表，想知道如何将列 header 格式化为蓝色背景，感谢您的帮助。

谢谢

Answer 1

不幸的是，这并不是一件容易的事。 SlickGrid（它是 DataTable 的基础）有许多 CSS 可配置属性，因此在 Bokeh 模型上将它们全部公开为 Python 属性是令人望而却步的。因此，您必须直接在模板中定位 SlickGrid CSS。根据您未提供的详细信息，情况会有所不同（这是一个独立的 HTML 文档吗？由具有 components 的 Web 应用程序提供服务？Bokeh 服务器应用程序？）所以这里是一个完整的最小示例，使用 file_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)

Answer 2

如果您使用散景服务器部署应用程序，另一种解决方案是直接编辑您的 CSS 样式文件。

样式 CSS 文件位于 Bokeh 应用程序目录（见下文）的静态文件夹中，并且是一个可选文件，您可以根据需要将其包含在目录中。

my_app
- 数据
  - things.csv
- main.py
- 静态
  - css
    - styles.css

为了覆盖 SlickGrid 的 CSS 文件，您可以在 styles.css 文件中使用以下类，只要您使用 !important 标签即可。

示例：

.slick-header-column {
            background-color: lightblue !important;
            background-image: none !important;
            }

.slick-row {
            background-color: white !important;
            background-image: none !important;
            color:black !important;
}

.bk-cell-index {
            background-color: white !important;
            background-image: none !important;
            color:black !important;
}

slick-header-column 控制 table.

的列

slick-row 控制 table.

的行数

bk-cell-index 控制 table.

的索引值

为散景数据表添加颜色 header

Adding color to bokeh datatable header

python

bokeh

如果您使用散景服务器部署应用程序，另一种解决方案是直接编辑您的 CSS 样式文件。