Question

我创建了一个散景数据表，并想知道如何将列标题格式化为蓝色背景，任何帮助都表示赞赏。

感谢

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

如果您正在使用bokeh服务器部署应用程序，则另一种解决方案是直接编辑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控制表的列。

滑动行控制表的行。

bk-cell-index控制表的索引值。

为bokeh数据表头添加颜色

2 个答案:

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