Question

我正在使用bokeh服务器应用程序。我需要添加一些自定义的html和CSS样式。有人请建议我如何将该图嵌入到html div中并应用一些CSS。

此应用程序具有目录结构

myapp

   |
   +---main.py
   +---static
   +---css
        +---style.css
   +---templates
        +---index.html

`

plats = ("IOS", "Android", "OSX", "Windows", "Other")
values = (35, 22, 13, 26, 4)
platform = figure(plot_height=350, toolbar_location=None, outline_line_color=None, sizing_mode="scale_both", name="platform",
                  y_range=list(reversed(plats)), x_axis_location="above")
platform.x_range.start = 0
platform.ygrid.grid_line_color = None
platform.axis.minor_tick_line_color = None
platform.outline_line_color = None

platform.hbar(left=0, right=values, y=plats, height=0.8)

curdoc().add_root(platform)



{% from macros import embed %} 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    {{ bokeh_css }}
    {{ bokeh_js }}
    <link rel="stylesheet" href="myapp/static/css/styles.css"/>
  </head>
  <body>
  {{ embed(roots.pTotalVbar) }}
  {{ plot_script|indent(8) }}
  </body>
</html>

Answer 1

请参见下面的文件结构。运行方式（经过Bokeh v0.12.6测试）：

bokeh serve --show myapp

文件结构：

myapp
   |
   +---main.py
   +---theme.yaml
   +---templates
        +---index.html
        +---styles.css

main.py

from bokeh.models import Button
from bokeh.plotting import figure, curdoc
from bokeh.layouts import gridplot
import numpy as np

plots = [figure(title = 'Styles Demo {i}'.format(i = i + 1), plot_width = 200, plot_height = 200, tools = '') for i in range(9)]
[plot.line(np.arange(10), np.random.random(10)) for plot in plots]

button_bokeh = Button(label = "Custom Style: Bokeh Button", css_classes = ['custom_button_bokeh'])
curdoc().add_root(button_bokeh)
curdoc().add_root(gridplot(children = [plot for plot in plots], ncols = 3))

theme.yaml

attrs:    
    Figure:
        background_fill_color: "#111122"
        border_fill_color: "#111122"
        outline_line_color: "#111122"
        plot_width: 950
        toolbar_location: "right"
        min_border_bottom: 0
        min_border_top: 0

    Line:
        line_width: 5

    Axis:
        axis_line_color: "#AAAAAA"
        axis_label_text_color: "#AAAAAA"
        major_label_text_color: "#AAAAAA"
        major_tick_line_color: "#AAAAAA"
        minor_tick_line_color: "#AAAAAA"

    Grid:
        grid_line_dash: [6, 4]
        grid_line_alpha: .3
        band_fill_color: "#AAAAAA"
        grid_line_color: "#AAAAAA"

    Title:
        text_color: "#BBBBBB"
        text_font_size: "14pt"

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) }}

    <button class="custom_button_html">Custom Style: HTML Button</button>
  </body>
</html>

styles.css

body { background-color: #111122 }
.custom_button_bokeh { width: 600px; }
.custom_button_html { width: 300px; }
.custom_button_bokeh button.bk-bs-btn.bk-bs-btn-default {
 background-color: #5577DD;
  border-radius: 15px;
  border: 2px solid #f5f5f5;
  color:#FFFFFF;
  font-size:16px;
  text-align: center;
  font-family: sans-serif;
  box-shadow: 5px 5px 5px grey;
  height: 36px;
  padding-top: 3px; 
}
.custom_button_bokeh:hover, button.bk-bs-btn.bk-bs-btn-default:hover {
    background: #223399;
    cursor: pointer;
}
.custom_button_bokeh:active , button.bk-bs-btn.bk-bs-btn-default:active {
    position: relative;
    top: 2px;
}
.custom_button_html {
 background-color: #5577DD;
  border-radius: 15px;
  border: 2px solid #f5f5f5;
  color:#FFFFFF;
  font-size:16px;
  text-align: center;
  font-family: sans-serif;
  box-shadow: 5px 5px 5px grey;
  height: 36px;
  padding-top: 3px; 
}
.custom_button_html:hover {
    background: #223399;
    cursor: pointer;
}
.custom_button_html:active {
    position: relative;
    top: 2px;
}

结果是：

如何将bokeh服务器图嵌入到html和css templete中-python

1 个答案: