Bokeh 如何使用 Bokeh 和 Flask 结合来创建动态交互式数据可视化

在本文中，我们将介绍如何使用 Bokeh 和 Flask 结合来创建动态交互式数据可视化，特别是使用 Bokeh 的 AjaxDataSource 功能。

阅读更多：Bokeh 教程

Bokeh 和 Flask

Bokeh 是一个用于 Python 的交互式数据可视化库，它能够生成漂亮且交互式的图表、统计图和仪表盘。而 Flask 则是一个简洁而强大的 Python web 框架，用于构建 Web 应用程序。

结合 Bokeh 和 Flask 可以创建动态的数据可视化应用，可以通过用户的交互实时地更新图表。其中一个强大的功能是使用 Bokeh 的 AjaxDataSource 来实现实时数据更新。

Bokeh AjaxDataSource

AjaxDataSource 是 Bokeh 中的一个数据源，它可以从远程服务器实时获取数据并更新图表。使用 AjaxDataSource 需要定义一个远程服务器端应用程序，该应用程序根据客户端请求实时生成数据。

在 Flask 中，我们可以使用 Flask 的路由来定义不同的 URL，每个 URL 对应一个数据点或一组数据点。当客户端请求某个 URL 时，Flask 会生成相应的数据并返回给客户端。

下面我们来看一个简单的示例，假设我们要实时绘制一个折线图，展示股票的实时价格。我们可以先创建一个简单的 Flask 应用程序：

from flask import Flask, jsonify, render_template
import random

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/stock_price')
def stock_price():
    price = random.randint(1, 100)
    return jsonify(price=price)

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

在上面的代码中，我们定义了两个路由。'/' 路由返回一个 HTML 模板，用于展示图表。'/stock_price' 路由返回一个随机生成的股票价格。

然后，在 index.html 模板中，我们可以使用 Bokeh 来绘制折线图，并使用 AjaxDataSource 获取实时数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bokeh AjaxDataSource Example</title>
    <link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.0.min.css">
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.0.min.js"></script>
    <script>
        var source = new Bokeh.AjaxDataSource({
            data_url: "/stock_price",
            polling_interval: 1000
        });

        var plot = Bokeh.Plotting.figure();

        var line = plot.line({field: "price"}, {source: source});

        Bokeh.Plotting.show(plot);
    </script>
</head>
<body>
</body>
</html>

在上面的 HTML 代码中，我们创建了一个 AjaxDataSource 实例，设置数据源的 URL 和轮询时间间隔。然后使用 Bokeh 绘制了一个折线图，使用 AjaxDataSource 获取实时的股票价格数据，并将折线图与数据源关联起来。

最后，使用 Bokeh.Plotting.show(plot) 将图表显示在页面上。

启动 Flask 应用程序后，打开浏览器访问 http://localhost:5000 ，即可看到一个实时更新的股票价格折线图。