向bokeh数据表标题添加颜色 [英] Adding color to bokeh datatable header

查看:103
本文介绍了向bokeh数据表标题添加颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我创建了一个bokeh数据表,想知道如何格式化列标题以使其具有蓝色背景,希望能对您有所帮助.

I created a bokeh datatable and was wondering how can I format the column header to have a blue background, any help is appreciated.

谢谢

推荐答案

不幸的是,这并不是一件容易的事. SlickGrid(DataTable的基础)具有许多CSS可配置属性,因此将它们全部作为Bokeh模型上的Python属性公开是禁止的.因此,您将必须直接在模板中定位SlickGrid CSS.事情因未提供的详细信息而有所不同(这是一个独立的HTML文档吗?由带components的Web应用程序提供服务吗?还是Bokeh服务器应用程序?),因此这是使用file_html的完整的最小示例,您可以将其用作一个适应其他情况的基础:

Unfortunately this is not completely non-trivial to do. SlickGrid (which is the basis of DataTable) has many dozens of CSS configurable properties, so exposing them all as Python properties on Bokeh models is prohibitive. So, you will have to target the SlickGrid CSS directly in a template. Things vary somewhat depending on details you have not provided (is this a standalone HTML doc? Served by a web app with components? A Bokeh server application?) so here is a complete minimal example using file_html that you could use as a basis adapt to other situations:

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)

这篇关于向bokeh数据表标题添加颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆