如何将外部javascript库导入Bokeh生成的html_Javascript_Bokeh_Bokehjs

如何将外部javascript库导入Bokeh生成的html

javascript

如何将外部javascript库导入Bokeh生成的html,javascript,bokeh,bokehjs,Javascript,Bokeh,Bokehjs,我想在我的Bokeh javascript回调中使用javascript库（特别是）。如何指定该javascript库的导入，以便可以从Bokeh的js回调函数访问该库例如：主要讨论如何创建自定义Bokeh模型。我对创建新模型并不特别感兴趣，只想在回调中使用库函数修改绘制的数据。有两种方法：服务器应用程序独立HTML应用程序以下是如何：服务器应用程序：您可以创建一个Bokeh服务器目录结构创建一个名为myapp的目录将Python脚本命名为main.py并将其放在那里

我想在我的Bokeh javascript回调中使用javascript库（特别是）。如何指定该javascript库的导入，以便可以从Bokeh的js回调函数访问该库

例如：

主要讨论如何创建自定义Bokeh模型。我对创建新模型并不特别感兴趣，只想在回调中使用库函数修改绘制的数据。

有两种方法：

服务器应用程序
独立HTML应用程序

以下是如何：

服务器应用程序：

您可以创建一个Bokeh服务器目录结构

创建一个名为myapp的目录

将Python脚本命名为main.py并将其放在那里

在那里创建一个名为templates的子目录

创建index.html、main.js和可选的styles.css文件，并将它们放在templates子目录中

打开终端，导航到比

myapp

目录高一级的目录，并使用以下命令启动您的应用程序：

bokeh serve--show myapp

以下示例适用于BokehV1.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>

styles.css

body { background: #111122; }

>独立HTML应用程序：

import os
from bokeh.io import save
from bokeh.models import Slider
from bokeh.util.browser import view

template = """
{% block postamble %}
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var slider = Bokeh.documents[0].get_model_by_name('my_slider')
            alert('slider value: ' + slider.value)
        });
    </script>
{% endblock %} """

slider = Slider(start=0, end=10, value=5, name='my_slider')

save(slider, template=template)
view(os.path.join(os.path.dirname(__file__), os.path.basename(__file__)).replace('.py', ".html")

导入操作系统
从bokeh.io导入保存
从bokeh.models导入滑块
从bokeh.util.browser导入视图
模板=“”“
{%block postamble%}
$（文档）.ready（函数（）{
var slider=Bokeh.documents[0]。按名称获取模型（“我的滑块”）
警报（'滑块值：'+滑块值）
});
{%endblock%}”“”
slider=slider（开始=0，结束=10，值=5，name='my_slider'）
保存（滑块，模板=模板）
视图（os.path.join（os.path.dirname（_文件），os.path.basename（_文件））.replace（'.py'，.html”）

import os
from bokeh.io import save
from bokeh.models import Slider
from bokeh.util.browser import view

template = """
{% block postamble %}
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var slider = Bokeh.documents[0].get_model_by_name('my_slider')
            alert('slider value: ' + slider.value)
        });
    </script>
{% endblock %} """

slider = Slider(start=0, end=10, value=5, name='my_slider')

save(slider, template=template)
view(os.path.join(os.path.dirname(__file__), os.path.basename(__file__)).replace('.py', ".html")