python - Bokeh 小部件 CSS

标签 python css bokeh

我在使用 Bokeh (0.12.4) 时发现了以下问题: 当我设置“选择”元素的宽度时,它不能 不再完整显示其内容 Bokeh 将调整大小。

这往往会破坏我心中的布局(请注意,我不是很好 在这)。 我当前的“解决方法”是实际定义以下 HTML 模板:

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
            body {
              font-family: 'Noto Sans', sans-serif;
              -webkit-font-smoothing: antialiased;
              text-rendering: optimizeLegibility;
              color: #fff;
              background: #2F2F2F;
             }

            .selector select{
                width: 97%;
                overflow: hidden;
            }
        </style>
        <meta charset="utf-8">
        <title>Bokeh Crossfilter Example</title>
        {{ bokeh_css }}
        {{ bokeh_js }}
    </head>
    <body>
        {{ plot_script|indent(8) }}
        {{ plot_div|indent(8) }}
    </body>
</html>

(注意,这是改编自 Bokeh 示例)并在中硬编码 css 类 脚本,因为显然,Bokeh 不接受相同的设置,如果它是通过 主题.yaml

# -*- coding: utf-8 -*-
from bokeh.layouts import row
from bokeh.models import Select
from bokeh.plotting import curdoc, figure

def plot_placeholder():
    p = figure( tools='pan,box_zoom,reset',responsive=True);
    return p

############################################
#options
Data = ['Supercalifragilisticexpialidocious', 'dumb', 'example']
sel = Select(title='Option 1', value = 'None', options = ['None'] + Data, name='OptionSelector', css_classes=['selector'])

#############################################################################
layout = row([sel, plot_placeholder()], sizing_mode='fixed', width=400)

curdoc().add_root(layout)
curdoc().title = "Statistical Plots"

这行得通,但我想知道是否可以使用纯 Python 来做到这一点 执行。 例如。我想知道是否可以不定义模板并且 将属性强制给所有选择器。

此外,作为此问题的扩展,我如何在不借助模板的情况下将 CSS 文件传递​​给 Bokeh。我试过 CSSResources,但没有得到任何结果,因为虽然它会产生一个 CSS 文件列表,但该列表似乎不是可变的。

最佳答案

关于你的最后一个问题,你可以有这样的布局: (为简单起见,我只是将 styles.css 放在与 index.html 相同的目录中,但如果您愿意,可以将其放在 static/css/styles.css 中)。

   <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title> Title here </title>
            {{ bokeh_css }}
            {{ bokeh_js }}
            <style>      
                {% include 'styles.css' %}
            </style>

关于python - Bokeh 小部件 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42413618/

相关文章:

python - Lua脚本不会执行python脚本

php - Laravel Bootstrap 响应式主题导航栏在减少时重叠内容

javascript - 在 Firefox/IE 上隐藏元素,仅在 chrome 上显示

python - 我们可以指定 Bokeh 导出的 png 文件大小/分辨率吗?

Python [pydantic] - 日期验证

python - if、elif、else 条件

python - 对二维数组进行排序时出现问题

css - 无法阻止 css 动画在最后一个关键帧后消失

python - 如何为 Bokeh 网格图设置默认/事件工具?

python - HoverTool 的背景