Bokeh布局的背景颜色

Question

Bokeh布局的背景颜色

11

我正在尝试使用Bokeh的滑块演示（源代码在这里），并且我想要改变整个页面的背景颜色。虽然使用background_fill_color和border_fill_color很容易改变图形的颜色，但是其余的布局仍然出现在白色背景上。是否有一个属性可以添加到主题中，以便我可以通过curdoc().theme设置颜色？

- nbubis

5个回答

3

对我来说，更改.bk-root样式起作用了：

from bokeh.resources import Resources
from bokeh.io.state import curstate
from bokeh.io import curdoc, output_file, save
from bokeh.util.browser import view
from bokeh.models.widgets import Panel, Tabs
from bokeh.plotting import figure 

class MyResources(Resources):
    @property
    def css_raw(self):
        return super().css_raw + [
            """.bk-root {
                    background-color: #000000;
                    border-color: #000000;
                    }
            """
        ]

f = figure(height=200, width=200)
f.line([1,2,3], [1,2,3])

tabs = Tabs( tabs=[ Panel( child=f, title="TabTitle" ) ], height=500 )

output_file("BlackBG.html")
curstate().file['resources'] = MyResources(mode='cdn')
save(tabs)
view("./BlackBG.html")

- Chris

2

如果您正在使用row或column在文档中显示多个图形，则可以通过以下方式设置background属性来解决问题：curdoc().add_root(row(fig1, fig2, background="beige"))。

- dduque

0

我知道这不是最干净的方法，但一个解决方法是修改bokeh模板文件夹中的file.html文件

文件路径

代码片段

- MBS

-1

来自Bokeh文档：

The background fill style is controlled by the background_fill_color and background_fill_alpha properties of the Plot object:
from bokeh.plotting import figure, output_file, show

output_file("background.html")

p = figure(plot_width=400, plot_height=400)
p.background_fill_color = "beige"
p.background_fill_alpha = 0.5

p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)

show(p)

plot with non-white background

- harabat

1

这并不会改变整个图形的背景颜色，例如刻度仍然在白色背景上。 - pfincent

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bigreddot · Accepted Answer

目前没有Python属性可以控制HTML背景颜色。 HTML和CSS是广阔的领域，因此，Bokeh提供了一种通用机制来提供您自己的HMTL模板，以便应用任何标准熟悉的CSS。最简单的方法是将templates/index.html文件添加到Directory-style Bokeh App中。模板应该是Jinja2 template。在<head>中需要定义两个替换项：

{{ bokeh_css }}
{{ bokeh_js }}

在<body>中还需要定义两个替换项：

{{ plot_div }}
{{ plot_script }}

应用程序将出现在模板中出现plot_script的位置。除此之外，您可以应用任何所需的HTML和CSS。您可以在此处查看具体示例：

https://github.com/bokeh/bokeh/blob/master/examples/app/crossfilter

一个简化的改变页面背景的模板可能如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            body { background: #2F2F2F; }
        </style>
        <meta charset="utf-8">
        {{ bokeh_css }}
        {{ bokeh_js }}
    </head>
    <body>
        {{ plot_div|indent(8) }}
        {{ plot_script|indent(8) }}
    </body>
</html>