如何将外部JavaScript库导入Bokeh生成的html [英] How to import external javascript library into Bokeh generated html
问题描述
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.
推荐答案
服务器应用程序:
Server app:
您可以创建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
myappdirectory 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
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
styles.css
body { background: #111122; }
独立HTML应用程序:
Standalone HTML app:
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
