极客笔记Bokeh：将多个Bokeh HTML图表嵌入到Flask中
在本文中，我们将介绍如何将多个Bokeh HTML图表嵌入到Flask应用程序中。Bokeh是一个用于在Python中创建交互式数据可视化的强大工具。Flask是一个轻量级的Web框架，适用于构建简单的网站和Web应用程序。通过将Bokeh图表嵌入到Flask中，我们可以创建美观且功能强大的数据可视化应用程序。
阅读更多：Bokeh 教程
安装和设定
在开始之前，我们首先需要安装Bokeh和Flask库。您可以使用以下命令在Python环境中安装这两个库：
pip install bokeh flask
安装完成后，我们可以开始创建Flask应用程序并嵌入Bokeh图表。
创建Flask应用程序
首先，我们需要创建一个名为app.py的Python文件，并编写以下代码：
from flask import Flask, render_template
from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.resources import CDN
app = Flask(__name__)
@app.route("/")
def index():
# 创建Bokeh图表
plot1 = figure(title="Plot 1")
plot1.line([1, 2, 3], [1, 2, 3])
plot2 = figure(title="Plot 2")
plot2.circle([1, 2, 3], [1, 2, 3])
# 将图表转换为HTML代码和js脚本
script1, div1 = components(plot1)
script2, div2 = components(plot2)
# 渲染index.html模板并传递图表的HTML代码和js脚本
return render_template("index.html", script1=script1, div1=div1, script2=script2, div2=div2)
if __name__ == "__main__":
app.run(debug=True)
在上面的代码中，我们首先导入所需要的库。然后，我们创建了一个Flask应用程序对象，并在根路径上定义了一个路由函数index()。在index()函数中，我们创建了两个Bokeh图表plot1和plot2，然后将它们转换为HTML代码和js脚本。最后，我们渲染了名为index.html的模板，并将图表的HTML代码和js脚本传递给模板。
创建模板
接下来，我们需要创建一个名为index.html的模板文件，并编写以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bokeh Plots</title>
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.2.min.css" type="text/css" />
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.2.min.js"></script>
</head>
<body>
<h1>Bokeh Plots</h1>
<h2>Plot 1</h2>
{{ div1 | safe }}
{{ script1 | safe }}
<h2>Plot 2</h2>
{{ div2 | safe }}
{{ script2 | safe }}
</body>
</html>
在上面的代码中，我们首先导入所需的Bokeh资源，即CSS和JavaScript文件。然后，我们在<body>标签中使用{{ div1 | safe }}和{{ script1 | safe }}将第一个图表的HTML代码和js脚本插入到模板中。类似地，我们也在模板中插入第二个图表的HTML代码和js脚本。
运行应用程序
当完成了上述步骤后，我们可以运行Flask应用程序了。在终端中执行以下命令：
python app.py
然后打开浏览器，访问http://localhost:5000，您将在页面上看到两个Bokeh图表。
总结
本文介绍了如何将多个Bokeh HTML图表嵌入到Flask应用程序中。通过使用Flask和Bokeh，我们可以创建具有交互性和美观性的数据可视化应用程序。我们首先安装了必要的库，并创建了一个Flask应用程序。然后，我们定义了一个路由函数来渲染一个包含Bokeh图表的模板。最后，我们运行了Flask应用程序，并在浏览器中查看了嵌入的Bokeh图表。
希望本文能对您理解如何将多个Bokeh HTML图表嵌入到Flask中有所帮助。让我们充分利用Bokeh和Flask的强大功能来创建令人惊叹的数据可视化应用程序！