更改散景按钮的颜色？

Question

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

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

我有一组Checkbox Groups排成一列，我需要用header/button之类的东西把它们分开。但它不能是绿色按钮。因此我的问题。

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

您可以使用 button_type 参数。选项：“默认”、“主要”、“成功”、“警告”、“危险”

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

“primary”是蓝色的。

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

Answer 3

创建散景按钮（或任何其他小部件）时，设置 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>

Answer 4

Bokeh 1.1.0 的布局发生了许多变化，所以我想我会分享我是如何使用 css 编辑散景按钮的。

我的文件结构是：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

更改散景按钮的颜色？

Change colour of Bokeh buttons?

python

button

bokeh