html 파일의 여러 위치에 하나의 문서에서 bokeh 서버를 포함시키는 방법

Question

여러 개의 "bokeh"플롯을 만드는 응용 프로그램이 있습니다. 그 그림들은 모두 동일한 문서에 속해 있으므로 링크 된 패닝/확대/축소를 사용할 수 있습니다. 플롯은 "bokeh"서버에서 제공됩니다. 모든 플롯은 하나의 웹 사이트에 표시되지만 플롯 간에는 일부 HTML 컨텐츠가 있습니다. 그 모두는 장고 앱의 일부입니다. 플롯이 서로를 통해 해당 페이지의 콘텐츠를 통해 나타납니다 ...

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 %} 

을하지만 페이지가 imporperly 렌더링됩니다 :로 보일 것이다 템플릿에 그런 보케 - 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)) 

을 사용하면 다음과 . documentation은 html로 embedd하는 방법을 언급하지 않습니다. 그렇다면 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 파일을 참조하십시오.

Answer 2

autoload_server에 <div class="bk-root">이 표시되지 않도록하는 0.12.1에 문제가 있습니다. 이 문제는 0.12.2에서 수정되었으므로 업그레이드하거나 다른 문제로 입증 할 수 있습니다.