Question

Bokeh支持按钮小部件： http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/widgets.html#button

这些按钮的颜色可以改为蓝色吗？

我在列中排列了一组Checkbox Groups，我需要它们用标题/按钮或其他东西分开。但它不能是一个绿色按钮。因此我的问题。

Answer 1

这是我目前造型小部件等的方式...... 似乎没有办法直接在python脚本中更改这些。

您需要一个单独的.css文件来设置小部件的样式。这也意味着您需要运行bokeh serve --show myappfolder 而不是 bokeh serve --show myapp.py。

创建一个名为myapp

的文件夹

结构应该是：

myapp
|
+--main.py
+--Templates
   |
   +--index.html
   +--styles.css

index.html文件：

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      {{ bokeh_css }}
      {{ bokeh_js }}
        <style>
             {% include 'styles.css' %}
        </style>
    </head>
    <body>
      {{ plot_div|indent(8) }}
      {{ plot_script|indent(8) }}
    </body>
</html>

styles.css：

.bk-root .bk-bs-btn-success {
color: #FDFEFE;
background-color: #21618C;
border-color: #21618C;
}
.bk-root .bk-bs-btn-success:focus {
color: #FDFEFE;
background-color: #21618C;
border-color: #21618C;
}
.bk-root .bk-bs-btn-success:active {
color: #FDFEFE;
background-color: #21618C;
border-color: #21618C;
}
.bk-root .bk-bs-btn-success:hover {
color: #FDFEFE;
background-color: #5DADE2;
border-color: #5DADE2;
}

main.py：

from bokeh.layouts import layout
from bokeh.plotting import curdoc
from bokeh.models import Button

button = Button(label="Test Button", button_type="success")
layout = layout([[button]])
curdoc().add_root(layout)

现在运行bokeh serve --show myapp并最终得到：

Answer 2

对Bokeh 1.1.0的布局进行了许多更改，因此我想我将与我分享如何使用CSS编辑bokeh按钮。

我的文件结构是：buttonBokeh / templates

这是我的buttonBokeh / main.py代码：

from bokeh.layouts import layout
from bokeh.plotting import curdoc
from bokeh.models import Button

button = Button(label = "Test Button", css_classes =['custom_button_bokeh'])
layout = layout([[button]])
curdoc().add_root(layout)

这是buttonBokeh / templates / index.html

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      {{ bokeh_css }}
      {{ bokeh_js }}
      <style type="text/css">{% include 'styles.css' %}</style>
    </head>
    <body>
      {{ plot_div|indent(8) }}
      {{ plot_script|indent(8) }}
    </body>
</html>

这是buttonBokeh / templates / styles.css

.custom_button_bokeh button.bk.bk-btn.bk-btn-default {
    color: black;
    font-size:12pt;
    background-color: #05b7ff;
    border-color: #05b7ff;
}

我在buttonBokeh目录上使用以下命令运行它：散景服务--allow-websocket-origin = ip_address：xxxx buttonBokeh --port xxxx

Answer 3

您可以使用button_type参数。选项：'默认'，'主要'，'成功'，'警告'，'危险'，'链接'

nextMonthButton = Button(label='next month', button_type="primary")

＆＃39; primary＆＃39;是蓝色的。

https://bokeh.pydata.org/en/latest/docs/reference/core/enums.html#bokeh.core.enums.ButtonType

Answer 4

创建bokeh按钮（或任何其他小部件）时，请设置css_classes属性，然后添加样式部分以设置按钮的颜色。例如，

Button(label="PLAY", width=100, css_classes=['b_play'])

将其添加到页面的样式部分，

<style>.b_play button { background-color: #98FB98 !important; }</style>

此方法可用于设置其他属性，例如字体大小。根据页面状态，您甚至可以禁用按钮...

<style>.b_stop button { background-color: #A9A9A9 !important; pointer-events: None !important; }</style>

改变散景按钮的颜色？

4 个答案: