将bokeh绘图插入主导脚本

Question

我想知道是否有任何简单的方法将Bokeh图嵌入到一个主导模板中。

我的目标是这样的：

import dominate
from dominate.tags import *
from bokeh.plotting import figure
from bokeh.embed import components
from bokeh.io import output_file, save

# Create a simple Bokeh figure

output_file(filename="test_plot.html", title="Static HTML file")
plot = figure()
plot.circle([1,2], [3,4])
save(plot)

plot_script, plot_div= components(plot)

doc = dominate.document(title='Report')
doc.add(body()).add(div(id='content'))

with doc.body:
    with table(cls='main_table'):
        with tr():
            td().add(raw(plot_div))

doc.head.add(raw(plot_script))

with open('test.html', 'w') as f:
    f.write(doc.render())

当我用浏览器打开test.html文件时，我看不到情节，但当我打开test_plot.html文件时，我可以清楚地看到情节在那里。因此，我想知道这种做法是否有问题，还是根本不可能。

Answer 1

好吧，我想我找到了我问题的答案。基本上，有必要将CDN资源添加到HTML文件中。这样做是可能的，因为：

doc.head.add(raw('''
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-x.y.z.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-x.y.z.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-x.y.z.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-x.y.z.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-x.y.z.min.js" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
    <script type="text/javascript">
        Bokeh.set_log_level("info");
    </script>
'''))