Html Bokeh绘图标记渲染问题_Html_Flask_Bokeh

Html Bokeh绘图标记渲染问题

html flask

Html Bokeh绘图标记渲染问题,html,flask,bokeh,Html,Flask,Bokeh,我正在使用bokeh站点上给出的embed.html示例：。注意我使用的是bokeh 12.3。绘图显示良好，但文本呈现为脚本函数的精确输出-包括“{”和“\n”字符散射函数： from bokeh.plotting import figure from bokeh.models import Range1d from bokeh.embed import components def scatter(): # create some data x1 = [0, 1, 2,

我正在使用bokeh站点上给出的embed.html示例：。注意我使用的是bokeh 12.3。绘图显示良好，但文本呈现为脚本函数的精确输出-包括“{”和“\n”字符

散射函数：

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：

<!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>

有什么线索吗？

您正在将绘图字典传递给

组件

：

plots = {'Red': p1, 'Blue': p2, 'Green': p3}

script, div = components(plots)
return script, div

这意味着（根据）结果不是一个脚本和一个div。而是一个脚本和一个字典，将您的原始名称映射到多个div：

components({"Red": p1, "Blue": p2, "Green": p3})
#=> (script, {"Red": p1_div, "Blue": p2_div, "Green": p3_div})

现在，您正在尝试将dict本身模板化为HTML。可能Jinja只是调用dict上的

str

，将其转换为字符串，而浏览器不知道如何处理。您需要分别对

组件返回的dict中的每个div进行模板化
对于经过适当更新的模板，它可能如下所示：
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
。
我有一个（可能的）线索，但您遗漏了最相关的部分，即您实际传递给Bokeh的组件函数的内容。请用这些信息更新您的问题。@bigreddot我添加了分散函数。干杯
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'],
)