将Bokeh生成的html文件嵌入Flask的“template.html”文件

Question

将Bokeh生成的html文件嵌入Flask的“template.html”文件

6

我有一个使用 Python - Flask 编写的 Web 应用程序。当用户在页面中填写某些设置 (POST 请求) 时，我的控制器会使用以下命令计算一些函数并使用 Bokeh 绘制输出，然后我将重定向到 Bokeh 创建的 HTML 页面。

output_file("templates\\" + idx[j]['name'] + ".html", title = "line plots")
TOOLS="resize,crosshair,pan,wheel_zoom,box_zoom,reset,box_select,lasso_select"
p = figure(tools=TOOLS, x_axis_label = 'time', y_axis_label = 'L', plot_width = 1400, plot_height = 900)

除了Bokeh生成的页面外，我的所有HTML页面都扩展了我的“Template.HTML”文件。我的问题是如何自动修改Bokeh生成的HTML文件，以便它们也可以扩展我的template.html文件？这样我就可以在Bokeh HTML文件的顶部拥有所有的导航栏和jumbotron。

  {% extends "template.html" %}
  {% block content %}

  <Bokeh.html file>

  {% endblock %}

- Hamid K

创建了一个名为test.html的文件，其中包含以下内容：{% extends "template.html" %}{% block content %}{{ script }}{{ div }} {% endblock %}。在我的控制器中：添加了return render_template('test.html', script = script, div = div)语句，其中script和div等于components(p)。还在我的template.html文件中添加了正确的<link stylesheet>和<script javascript>以供Bokeh使用。不幸的是，它无法正常工作。根据指南，<Script>应该放在模板的<head>部分。然而，我的设置使其强制放置在<body>部分的{% block content %}{% endblock %}之间。 - Hamid K

请不要把相关信息放在注释中。您可以使用 [编辑] 将其添加到您的问题中。 - Jongware

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bigreddot · Accepted Answer

在这种情况下，您不需要使用output_file。Bokeh有一个专门用于嵌入到Web应用程序中的HTML模板的功能bokeh.embed.component，在快速入门和教程中进行了演示。

from bokeh.embed import components
script, div = components(plot)
return render_template('page.html', script=script, div=div)

<body>
{{ div|safe }}
{{ script|safe }}
</body>

这里有一个完整可运行的示例，展示如何在 Flask 中使用此功能。