散景布局的背景色 [英] Background color of bokeh layout

查看:46
本文介绍了散景布局的背景色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在玩散景幻灯片演示(源代码

I'm playing around with the Bokeh sliders demo (source code here), and I'm trying to change the background color of the entire page. Though changing the color of the figure is easy using background_fill_color and border_fill_color, the rest of the layout still appears on top of a white background. Is there an attribute I can add to the theme that will allow me to set the color via curdoc().theme?

推荐答案

当前没有任何可以控制HTML背景颜色的Python属性.HTML和CSS的领域非常广泛,因此Bokeh并没有尝试为每个可能的样式选项创建相应的Python属性,而是提供了一种通用的机制来提供您自己的HMTL模板,以便可以应用任何标准的熟悉的CSS.

There's not currently any Python property that would control the HTML background color. HTML and CSS is vast territory, so instead of trying to make a corresponding Python property for every possible style option, Bokeh provides a general mechanism for supplying your own HMTL templates so that any standard familiar CSS can be applied.

最简单的方法是将 templates/index.html 文件添加到 Jinja2模板.在< head> 中需要定义两个替换项:

This is most easily accomplished by adding a templates/index.html file to a Directory-style Bokeh App. The template should be Jinja2 template. There are two substitutions required to be defined in the <head>:

  • {{bokeh_css}}
  • {{bokeh_js}}

以及< body> 中需要的两个:

  • {{plot_div}}
  • {{plot_script}}

该应用程序将出现在模板中 plot_script 出现的任何位置.除此之外,您还可以应用所需的任何HTML和CSS.您可以在此处看到一个具体示例:

The app will appear wherever the plot_script appears in the template. Apart from this, you can apply whatever HTML and CSS you need. You can see a concrete example here:

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

用于更改页面背景的精简模板可能如下所示:

A boiled down template that changes the page background might look like this:

<!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>

这篇关于散景布局的背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

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