更改散景按钮的颜色？答案

【问题标题】：Change colour of Bokeh buttons?更改散景按钮的颜色？
【发布时间】：2017-03-27 22:11:55
【问题描述】：

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

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

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

【问题讨论】：

标签： python button bokeh

【解决方案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 你最终得到：

【讨论】：

谢谢！我认为也可以像 IMDB 电影示例一样在 box.models.Div 中定义样式，但我可能错了。谢谢！

【解决方案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>

这里是按钮Bokeh/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 目录中运行它： bokeh serve --allow-websocket-origin=ip_address:xxxx buttonBokeh --port xxxx

【讨论】：

谢谢！我最初的想法是，这不是你的错，改变按钮颜色需要很多代码。

【解决方案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>

【讨论】：

【解决方案4】：

您可以使用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

【讨论】：

AFAIK，'link' in not a valid button_type
确实，可能已经删除了。我记得它对我有用。