Bokeh：将多个 Bokeh HTML 图表嵌入 Flask

在本文中，我们将介绍如何使用 Bokeh 将多个 Bokeh HTML 图表嵌入到 Flask Web 应用程序中。Bokeh 是一个 Python 的交互式数据可视化库，可以方便地创建漂亮而且交互性强的图表。

阅读更多：Bokeh 教程

Bokeh 简介

Bokeh 是一个功能强大的可视化库，用于构建交互式的数据可视化应用程序。它提供了丰富的绘图工具和交互功能，可以创建各种类型的图表，包括散点图、折线图、柱状图等。Bokeh 还支持动态更新和响应式交互，使得用户可以与图表进行交互并进行数据的实时更新。

Bokeh 提供了多种输出选项，包括生成静态的图像文件、生成 HTML 文件以及将图表嵌入到其他应用程序中。在本文中，我们将重点介绍如何将 Bokeh HTML 图表嵌入到基于 Flask 的 Web 应用程序中。

在 Flask 中嵌入 Bokeh HTML 图表

要在 Flask 中嵌入 Bokeh HTML 图表，我们首先需要创建一个 Flask 应用程序，并通过 Flask 提供的路由来处理对应的请求。然后，我们可以使用 Bokeh 来生成所需的图表，并将其保存为 HTML 文件。最后，将生成的 HTML 文件嵌入到 Flask 的模板中，以实现在 Web 页面上展示图表的功能。

下面是一个使用 Bokeh 和 Flask 实现的简单示例：

from flask import Flask, render_template
from bokeh.embed import file_html
from bokeh.plotting import figure
from bokeh.resources import CDN

app = Flask(__name__)

@app.route('/')
def index():
    # 创建 Bokeh 图表
    p1 = figure(title="Scatter Plot", x_axis_label='x', y_axis_label='y')
    p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5])

    p2 = figure(title="Line Plot", x_axis_label='x', y_axis_label='y')
    p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5])

    # 将图表保存为 HTML 文件
    html1 = file_html(p1, CDN, "Scatter Plot")
    html2 = file_html(p2, CDN, "Line Plot")

    # 将图表嵌入到 Flask 模板中
    return render_template('index.html', plot1=html1, plot2=html2)

if __name__ == '__main__':
    app.run(debug=True)

在上面的示例中，我们首先导入了必要的库，包括 Flask、Bokeh 的绘图工具和资源。然后，我们创建了一个 Flask 应用程序对象 app。通过 @app.route('/') 装饰器，我们定义了一个路由，当用户访问根路径时，将调用 index 函数。

在 index 函数中，我们使用 Bokeh 创建了两个图表 p1 和 p2。然后，通过 file_html 函数将图表转换为 HTML 文件，并保存到变量 html1 和 html2 中。

最后，我们将生成的 HTML 文件嵌入到 Flask 模板中，并返回给用户。在 Flask 模板中，我们可以使用 {{ plot1 | safe }} 的语法，将 plot1 变量中的 HTML 代码渲染到页面中。

总结

本文介绍了如何使用 Bokeh 将多个 Bokeh HTML 图表嵌入到 Flask Web 应用程序中。首先，我们创建了一个 Flask 应用程序，并通过路由处理对应的请求。然后，使用 Bokeh 创建图表，并将其转换为 HTML 文件。最后，将生成的 HTML 文件嵌入到 Flask 的模板中，实现在 Web 页面上展示图表的功能。

Bokeh 提供了丰富的绘图工具和交互功能，使得用户可以方便地创建漂亮而且具有交互性的图表。通过将 Bokeh 图表嵌入到 Flask Web 应用程序中，我们可以实现更灵活和功能丰富的数据可视化应用。希望本文对您理解如何在 Flask 中嵌入 Bokeh HTML 图表有所帮助。