散景图标签渲染问题 [英] Bokeh plot tag rendering issue
问题描述
我正在使用bokeh网站上提供的embed .html示例: http://docs.bokeh.org/en/latest/docs/user_guide/embed.html .注意我正在使用bokeh 12.3.绘图显示得很好，但是文本正好是脚本功能的精确呈现-包括'{'和'\ n'字符.
I am using the embed .html example given on the bokeh site: http://docs.bokeh.org/en/latest/docs/user_guide/embed.html. Note I am using bokeh 12.3. The plots are displaying fine but the text is rendering as the exact output from the script function - including '{' and '\n' characters.
分散功能:
from bokeh.plotting import figure
from bokeh.models import Range1d
from bokeh.embed import components
def scatter():
# create some data
x1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y1 = [0, 8, 2, 4, 6, 9, 5, 6, 25, 28, 4, 7]
x2 = [2, 5, 7, 15, 18, 19, 25, 28, 9, 10, 4]
y2 = [2, 4, 6, 9, 15, 18, 0, 8, 2, 25, 28]
x3 = [0, 1, 0, 8, 2, 4, 6, 9, 7, 8, 9]
y3 = [0, 8, 4, 6, 9, 15, 18, 19, 19, 25, 28]
# select the tools we want
TOOLS="pan,wheel_zoom,box_zoom,reset,save"
# the red and blue graphs will share this data range
xr1 = Range1d(start=0, end=30)
yr1 = Range1d(start=0, end=30)
# only the green will use this data range
xr2 = Range1d(start=0, end=30)
yr2 = Range1d(start=0, end=30)
# build our figures
p1 = figure(x_range=xr1, y_range=yr1, tools=TOOLS, plot_width=300, plot_height=300)
p1.scatter(x1, y1, size=12, color="red", alpha=0.5)
p2 = figure(x_range=xr1, y_range=yr1, tools=TOOLS, plot_width=300, plot_height=300)
p2.scatter(x2, y2, size=12, color="blue", alpha=0.5)
p3 = figure(x_range=xr2, y_range=yr2, tools=TOOLS, plot_width=300, plot_height=300)
p3.scatter(x3, y3, size=12, color="green", alpha=0.5)
# plots can be a single Bokeh Model, a list/tuple, or even a dictionary
plots = {'Red': p1, 'Blue': p2, 'Green': p3}
script, div = components(plots)
return script, div
我的烧瓶代码是:
script, div = scatter()
return self.render_template('bokeh_example.html', script=script, div=div)
bokeh_example.html:
bokeh_example.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.3.min.css" type="text/css" />
<script type="text/javascript" src="http://cdn.bokeh*emphasized text*.org/bokeh/release/bokeh-0.12.3.min.js"></script>
{{ script | safe }}
</head>
<body>
<div class='bokeh'>
<h1>Scatter Example</h1>
{{ div | safe }}
</div>
</body>
</html>
这些图显示良好，但div文本呈现为文字:
The plots display fine but the div text renders as literals:
{'Red': '\n #this text displays instead of just the string 'Red'
\n #this displays on next line in smaller font
#plot displays fine here
\n #this text displays after the plot instead of creating a blank line.
有任何线索吗?
推荐答案
您正在将图的字典传递给components:
You are passing a dictionary of plots to components:
plots = {'Red': p1, 'Blue': p2, 'Green': p3}
script, div = components(plots)
return script, div
这意味着(根据文档)结果不是单个脚本和单个div.相反，它是一个脚本和一个字典，将您的原始名称映射到多个div:
This means (per the documentation) that the result is not a single script and a single div. Rather, it's a single script and a dictionary mapping your original names to multiple divs:
components({"Red": p1, "Blue": p2, "Green": p3})
#=> (script, {"Red": p1_div, "Blue": p2_div, "Green": p3_div})
现在，您正在尝试将dict本身模板化为HTML.大概Jinja只是在字典上调用str将其转换为字符串，而浏览器不知道该怎么做.您需要分别对components返回的dict中的每个div进行模板化.
Right now you are trying to template the dict itself into your HTML. Presumably Jinja just calls str on the dict to turn it into a string, and the browser doesn't know what to do with that. You need to template each one of the divs in the dict returned by components, individually.
对于适当更新的模板，可能类似于:
For a suitably updated template, that might look like:
script, divs = scatter() # notice plural: divS
return self.render_template(
'bokeh_example.html',
script=script,
div_red=divs['Red'],
div_blue=divs['Blue'],
div_green=divs['Green'],
)
或者，您也可以使用Jinja2的某些功能来更新模板以直接在divs上进行迭代，以对作为集合的模板参数进行迭代.
Or alternatively you might update the template to iterate over divs directly using some of Jinja2's capabilities for iterating over template arguments that are collections.
这篇关于散景图标签渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
