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

问题描述 投票：0回答：1

我想在我的Bokeh javascript回调中使用javascript库（特别是https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix.js）。如何指定导入此javascript库，以便可以从Bokeh的js回调函数访问该库？

https://bokeh.pydata.org/en/latest/docs/user_guide/extensions.html示例中的示例主要讨论创建自定义Bokeh模型。我对创建新模型并不特别感兴趣，只是想在回调中使用库函数来修改绘制的数据。

javascript bokeh bokehjs
1个回答
1
投票

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

  1. 创建一个名为myapp的目录
  2. 将您的Python脚本命名为main.py并将其放在那里
  3. 创建一个名为templates的子目录
  4. 创建index.html，main.js和可选的styles.css文件，并将它们放在templates子目录中
  5. 打开终端，导航到比myapp目录高一级的目录，并使用以下命令启动您的应用程序：bokeh serve --show myapp

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

目录结构：

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

卖弄.朋友

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; }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.