Как встраивать графики сервера Bokeh в HTML и CSS шаблон - Python - PullRequest
Новая
       33

Как встраивать графики сервера Bokeh в HTML и CSS шаблон - Python

0 голосов
/ 03 февраля 2019

У меня приложение на сервере 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>

1 Ответ

0 голосов
/ 14 февраля 2019

См. Структуру файла ниже.Запуск от имени (протестировано с 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;
}

Результат: enter image description here

...