Как разместить виджеты Bokeh точно на HTML-странице - PullRequest
Новая
       10

Как разместить виджеты Bokeh точно на HTML-странице

0 голосов
/ 15 октября 2019

Я изо всех сил пытаюсь разместить виджеты Bokeh именно там, где я хочу, на HTML-странице, созданной с помощью Django. Например, мой views.py выглядит следующим образом: 

from bokeh.io import show
from bokeh.layouts import column, row
from bokeh.models import CustomJS, TextInput
from bokeh.plotting import figure

fig = figure(title='title')
fig.line(x=[1,2,3], y=[1,2,3])

text_input = TextInput(title="Add graph title", value='')
text_input.js_on_change('value', CustomJS(
    args={'title': fig.title, 'text_input': text_input},
    code="title.text = text_input.value"
))

widgets_layout = column(text_input)

figures_layout = row(fig)

#show(row(widgets_layout, fig))

# Set up page layout
page_layout = row(widgets_layout, figures_layout)

script, div = components(page_layout)
return render_to_response('app/test.html', {'script':script, 'div':div})

, а моя HTML-страница (test.html) выглядит следующим образом: 

<!--Test page-->

{% extends "base.html" %}
{% load static %}
{% load bootstrap4 %}
{% load i18n %}

{% block content %}

<!--Bokeh-->
<link href="http://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.pydata.org/bokeh/release/bokeh-tables-1.3.4.min.css" rel="stylesheet" type="text/css">

<script src="http://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script>
<script src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.js"></script>
<script src="http://cdn.pydata.org/bokeh/release/bokeh-tables-1.3.4.min.js"></script>

  <!--Figure-->
  <div class='col-lg'>
    <div class='card-lg bg-light' id='maincontent'>
      <h2> {% trans "Test" %}</h2>
      <hr>
      <div>
        {{ div | safe }}
        {{ script | safe  }}
      </div>
    </div>
  </div>

<br>

{% endblock content %}

Теперь, как мне переместить маленький виджет(text_input) в точную позицию? Подойдет любая позиция, я просто хочу разместить ее там, где хочу.

Спасибо,

1 Ответ

0 голосов
/ 16 октября 2019

Вы можете применить, например, spacing (что также может быть отрицательным) на Row и / или на Column, например: 

widgets_layout = column(Div(), row(Div(), text_input, spacing=300), spacing=300)
...