Как импортировать внешнюю библиотеку JavaScript в сгенерированный Bokeh HTML - PullRequest
Новая
       81

Как импортировать внешнюю библиотеку JavaScript в сгенерированный Bokeh HTML

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

Я хотел бы использовать библиотеку javascript (в частности, https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix.js) в моем обратном вызове Bokeh javascript. Как я могу указать импорт этой библиотеки javascript таким образом, чтобы библиотека была доступна из функций обратного вызова Bokeh js?

Примеры на примере https://bokeh.pydata.org/en/latest/docs/user_guide/extensions.html в основном говорят о создании пользовательской модели Bokeh. Меня не особенно интересует создание новой модели, я просто хочу использовать библиотечные функции в обратном вызове для изменения данных, которыестроится.

1 Ответ

0 голосов
/ 07 марта 2019

Вы можете создать структуру каталогов сервера Bokeh.

  1. создайте каталог с именем myapp
  2. , назовите свой скрипт Python main.py и поместите его туда
  3. создайте там подкаталог с именем templates
  4. createindex.html, main.js и необязательные файлы styles.css и поместите их в подкаталог шаблонов
  5. , откройте терминал, перейдите в каталог на один уровень выше каталога myapp и запустите ваше приложение с помощью этой команды: bokeh serve --show myapp

Следующий пример работает для Bokeh v1.0.4.

Структура каталогов: 

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

main.py 

from bokeh.plotting import curdoc
from bokeh.models import Button, CustomJS

button = Button(label = 'Click Me')
button.callback = CustomJS(code = """ alert($) """)

curdoc().add_root(button)

index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <meta charset="utf-8">
    {{ bokeh_css }}
    {{ bokeh_js }}
    <style>
    {% include 'styles.css' %}
    </style>    
  </head>
  <body>
    <script>
    {% include 'main.js' %}
    </script>
    {{ plot_div|indent(8) }}
    {{ plot_script|indent(8) }}
  </body>
</html>

Обратите внимание, что таким образом вы можете включать как локальные, так и удаленные JS-библиотеки или таблицы стилей.

main.js 

$(document).ready(function() {
    alert('jQuery succesfully loaded !') 
});

styles.css 

body { background: #111122; }
...