如何將外部 javascript 庫導入 Bokeh 生成的 html

Question

我想在我的 Bokeh javascript 回調中使用一個 javascript 庫（特別是這個庫）。 如何指定此 javascript 庫的導入，以便可以從 Bokeh 的 js 回調函數訪問該庫？

示例在：

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

主要講創建自定義Bokeh Model。 我對創建新模型並不是特別感興趣，只是想在回調中使用庫函數來修改繪制的數據。

Answer 1

有兩種方式：

服務器應用
獨立的 HTML 應用程序

方法如下：

服務器應用程序：

您可以創建 Bokeh 服務器目錄結構。

創建一個名為 myapp 的目錄
將您的 Python 腳本命名為 main.py 並將其放在那里
在那里創建一個名為模板的子目錄
創建 index.html、main.js 和可選的 style.css 文件並將它們放在 templates 子目錄中
打開終端，導航到比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)

索引.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 庫或樣式表。

主文件

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

樣式文件

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")

如何將外部 javascript 庫導入 Bokeh 生成的 html

問題描述

1 個解決方案

解決方案1
4 2019-03-07 12:19:05

如何將外部 javascript 庫導入 Bokeh 生成的 html

問題描述

1 個解決方案

解決方案1 4 2019-03-07 12:19:05

解決方案1
4 2019-03-07 12:19:05