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

本文介绍了如何将外部JavaScript库导入Bokeh生成的html的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想使用一个JavaScript库(特别是此)在我的Bokeh javascript回调中.如何指定此javascript库的导入，以便可以从Bokeh的js回调函数访问该库?

I would like to make use of a javascript library (specifically this one) in my Bokeh javascript callback. How can I specify importing of this javascript library such that the library is accessible from Bokeh's js callback functions?

示例位于:

https://docs.bokeh.org/en/latest/docs/user_guide/extensions.html

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

mainly talk about creating a custom Bokeh Model. I am not particularly interested in creating a new Model, just want to use the library functions in a callback to modify the data that is plotted.

推荐答案

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

You can create a Bokeh server directory structure.

创建一个名为myapp的目录
将您的Python脚本命名为main.py并放在其中
在此处创建一个名为模板的子目录
创建index.html，main.js和可选的styles.css文件，并将它们放在模板子目录中
打开终端，导航到比myapp目录更高一级的目录，然后使用以下命令启动您的应用程序:bokeh serve --show myapp

create a directory called myapp
name your Python script main.py and put it there
create a subdirectory there called templates
create index.html, main.js and optional styles.css files and put them in templates subdirectory
open terminal, navigate to directory one level higher than myapp directory and start your app with this command: bokeh serve --show myapp

以下示例适用于Bokeh v1.0.4.

The following example works for 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库或样式表，也可以远程.

Please note that this way you can include local, but also remote JS libraries or style sheets.

main.js

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

styles.css

body { background: #111122; }

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("external_js.html")

这篇关于如何将外部JavaScript库导入Bokeh生成的html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！