如何在 at html 文件中的多个位置嵌入来自一个文档的散景服务器绘图

Question

我有一个创建多个 "bokeh" 图的应用程序。这些图都属于同一个文档，因此我可以使用链接的平移/缩放。这些地块由 "bokeh" 服务器提供服务。所有情节都出现在一个网站上，但情节之间有一些 html 内容。所有这些都是 django 应用程序的一部分。使用 bokeh-0.12.1

#view.py
plots = []
plot1 = figure()
plot1.line([1,2,3],[5,4,2])
plot2 = figure()
plot3.line([1,2,3],[5,4,2])

script_tags = []
bokeh_document = curdoc()
session = push_session(bokeh_document)
script.tags.append(autoload_server(model=plot1, session_id=session.id))
script.tags.append(autoload_server(model=plot2, session_id=session.id))

然后在模板中将如下所示：

template.html
<h1>These are the embedded server plots</h1>
{% for script in script_tags %}
<pre>{{ subgroup_plot.script }}</pre>
<h1>Here comes a plot</h1>
some Text

<div>
{{script | safe }}
</div>
{% endfor %}

但是随后页面呈现不当...这些图相互叠加并覆盖页面内容。 documentation 没有提到如何将它嵌入到 html 中。那么必须如何完成才能使 css 正常工作？

Answer 1

好像少了一些 CSS 类，即 bk-root 和 plotdiv。请尝试以下操作：

<h1>These are the embedded server plots</h1>
{% for script in script_tags %}
<pre>{{ subgroup_plot.script }}</pre>
<h1>Here comes a plot</h1>
some Text
<div class=“bk-root">
<div class=“plotdiv">
{{script | safe }}
</div>
</div>
{% endfor %}

另请参阅 CSS 文件以查看类的正确 order/nesting。

Answer 2

autoload_server 在 0.12.1 中有一个问题阻止了正确的封闭 <div class="bk-root"> 出现。此问题已在 0.12.2 中修复，您可以升级，也可以按照其他问题的说明手动添加。

如何在 at html 文件中的多个位置嵌入来自一个文档的散景服务器绘图

How embed bokeh server plots from one document in several places in at html file

django-templates

bokeh