极客教程Bokeh Flask 中渲染模板后更新 Jinja 元素
在本文中，我们将介绍如何在使用 Flask 渲染模板后，更新 Jinja 元素中的 Bokeh 图表。
阅读更多：Bokeh 教程
1. 引言
Flask 是一个使用 Python 编写的轻量级 Web 框架，常用于开发小型 Web 应用程序。在使用 Flask 构建 Web 应用程序的过程中，经常需要使用模板引擎来生成动态内容。而 Bokeh 是一个用于构建交互式数据可视化的 Python 库，可以生成各种美观而强大的图表。
然而，在 Flask 中使用 Bokeh 渲染模板后，如果需要对 Jinja 模板中的 Bokeh 图表进行更新，就需要一些额外的操作。接下来，我们将详细介绍这个过程，并提供示例代码。
2. Bokeh 渲染模板
首先，我们需要在 Flask 中配置好 Bokeh，并将生成的图表作为上下文变量传递给模板。可以使用 bokeh.embed.components 函数将 Bokeh 图表转换为 HTML 片段，然后将这些片段作为字典传给模板。
from flask import Flask, render_template
from bokeh.embed import components
from bokeh.plotting import figure
app = Flask(__name__)
@app.route('/')
def index():
# 生成 Bokeh 图表
plot = figure()
plot.circle([1, 2, 3], [4, 5, 6])
# 将 Bokeh 图表转换为 HTML 片段
script, div = components(plot)
# 将 HTML 片段传递给模板
return render_template('index.html', script=script, div=div)
if __name__ == '__main__':
app.run()
在上述示例中，plot 是使用 Bokeh 创建的图表对象。然后，通过 bokeh.embed.components 函数将 plot 转换为 HTML 片段，分别保存在 script 和 div 中。最后，通过 render_template 方法将 script 和 div 传递给模板。
3. 更新 Jinja 元素中的 Bokeh 图表
一旦模板中的 Bokeh 图表被创建和渲染，如果我们需要更新这些图表，就需要进行一些额外的步骤。下面，我们将详细说明如何实现这一点。
3.1 使用 Ajax 请求更新数据
一种常用的方式是使用 Ajax 请求获取新数据，并使用这些数据来更新图表。首先，在模板中添加一个按钮和一个空的 <div> 元素用于显示图表：
<!DOCTYPE html>
<html>
<head>
<title>Bokeh Flask</title>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.2.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.2.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.2.min.js"></script>
</head>
<body>
<button onclick="updateChart()">Update Chart</button>
<div id="chart_div"></div>
<script>
function updateChart() {
// 发送 Ajax 请求获取新数据
// 这里使用 jQuery 发送请求，需要在前端引入 jQuery 库
$.ajax({
url: '/update',
dataType: 'json',
success: function(data) {
// 更新图表
var bokehScript = data['bokeh_script'];
var bokehDiv = data['bokeh_div'];
document.getElementById('chart_div').innerHTML = bokehDiv;
eval(bokehScript);
}
});
}
</script>
</body>
</html>
在上面的示例中，我们添加了一个按钮，并为按钮的点击事件绑定了一个 JavaScript 函数 updateChart()。在该函数中，我们使用 Ajax 发送一个 GET 请求到 /update 路由，该路由将返回新的 Bokeh 图表数据。
3.2 后端处理 Ajax 请求
在 Flask 的后端，我们需要为 /update 路由添加处理函数，并在该函数中生成新的 Bokeh 图表，并将其转换为 HTML 片段。然后，将这些片段作为 JSON 响应返回给前端。
from flask import Flask, render_template, jsonify
from bokeh.embed import components
from bokeh.plotting import figure
import random
app = Flask(__name__)
@app.route('/')
def index():
# 生成 Bokeh 图表
plot = figure()
plot.circle([1, 2, 3], [4, 5, 6])
# 将 Bokeh 图表转换为 HTML 片段
script, div = components(plot)
# 将 HTML 片段传递给模板
return render_template('index.html', script=script, div=div)
@app.route('/update')
def update():
# 生成新的 Bokeh 图表
plot = figure()
plot.circle([random.randint(1, 10) for _ in range(3)], [random.randint(1, 10) for _ in range(3)])
# 将 Bokeh 图表转换为 HTML 片段
script, div = components(plot)
# 将 HTML 片段作为 JSON 响应返回
return jsonify(bokeh_script=script, bokeh_div=div)
if __name__ == '__main__':
app.run()
在上述示例中，我们为 /update 路由添加了处理函数 update()。在该函数中，我们生成了一个新的 Bokeh 图表，并将其转换为 HTML 片段。然后，使用 jsonify 方法将 HTML 片段作为 JSON 格式返回到前端。
3.3 更新图表
最后，我们使用生成的新的 Bokeh 图表 HTML 片段，通过 JavaScript 代码将其插入到模板中的指定 <div> 元素中。在前文的模板代码中，我们已经为 <div> 元素指定了 id="chart_div" 属性，因此我们可以通过 document.getElementById() 方法找到该元素，并使用 innerHTML 属性将新的 HTML 片段插入到该元素中。
总结
本文介绍了如何在 Flask 中渲染模板后，更新 Jinja 元素中的 Bokeh 图表。我们首先使用 Bokeh 将图表转换为 HTML 片段，并将其传递给模板渲染。然后，我们介绍了一种使用 Ajax 请求更新图表的方法，并提供了相应的示例代码。通过这些步骤，我们可以实现在 Flask 应用程序中动态更新 Jinja 元素中的 Bokeh 图表。
通过本文的介绍，希望读者能够掌握在 Flask 应用程序中使用 Bokeh 渲染模板并更新图表的方法，从而构建出更加动态和交互式的 Web 应用程序。