Django 在 Django 中使用交互控件创建 bokeh 图表

在本文中，我们将介绍如何在 Django 中使用交互控件创建 bokeh 图表。Bokeh 是一个用于生成交互式数据可视化的 Python 库，而 Django 是一个流行的 Python Web 框架，它提供了强大的工具来构建具有复杂交互功能的 Web 应用程序。

Bokeh 提供了丰富的图表类型和交互控件，可以让用户在网页上动态地探索和操作数据。通过与 Django 结合使用，我们可以将 Bokeh 图表嵌入到我们的网站中，并通过 Django 的模型和视图来实现交互控制的功能。

下面我们将一步步介绍如何在 Django 中创建 bokeh 图表，并添加交互控件。

阅读更多：Django 教程

准备工作

首先，我们需要安装 Bokeh 和 Django。可以使用 pip 命令来安装它们：

pip install bokeh
pip install django

安装完成后，我们可以创建一个新的 Django 项目，并进入该项目的根目录。接下来，我们可以创建一个 Django 应用程序，用于处理我们的图表和视图逻辑：

python manage.py startapp charts

接下来，我们需要在 settings.py 文件中注册我们的应用程序，并指定 Bokeh 的静态文件路径。在 INSTALLED_APPS 列表中添加 ‘charts’：

INSTALLED_APPS = [
    ...
    'charts',
    ...
]

然后添加以下代码到 settings.py 文件的末尾：

BOKEH_RESOURCES = CDN

这样我们就完成了 Django 和 Bokeh 的准备工作。

创建一个简单的 bokeh 图表

在我们的图表应用程序中，我们将创建一个简单的 bokeh 图表来展示一些随机数据。在 charts 文件夹中，创建一个名为 views.py 的文件，并添加以下代码：

from django.shortcuts import render
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import components
import random

def bokeh_chart(request):
    x = list(range(1, 11))
    y = [random.randint(1, 100) for _ in range(10)]

    p = figure(title='Random Data', x_axis_label='X', y_axis_label='Y')
    p.line(x, y, legend_label='Random', line_width=2)

    script, div = components(p, CDN)

    return render(request, 'chart.html', {'script': script, 'div': div})

在上面的代码中，我们导入了必要的 Bokeh 函数和 Django 函数。然后，我们创建了一些随机数据，用于绘制折线图。我们使用 figure 函数创建一个图表对象，设置标题和轴标签，并使用 line 函数绘制折线。

接下来，我们使用 components 函数将图表转换为 HTML 的 JavaScript 和 HTML 片段。然后，我们使用 render 函数将结果传递给一个名为 chart.html 的模板文件，该文件负责渲染图表。

现在，我们需要创建 chart.html 模板文件。在 charts 文件夹中，创建一个名为 templates 的文件夹，在其中创建一个名为 chart.html 的文件，并添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bokeh Chart</title>
    {{ script|safe }}
</head>
<body>
    <h1>Bokeh Chart</h1>
    <div>
        {{ div|safe }}
    </div>
</body>
</html>

上面的代码定义了一个基本的 HTML 页面结构，并包含了我们从 views.py 中传递的 JavaScript 片段和图表的 HTML 片段。

我们还需要在 urls.py 文件中定义一个 URL 映射，将我们的视图函数与一个 URL 路径关联起来。在项目的根目录下的 urls.py 文件中，添加以下代码：

from django.urls import path
from charts.views import bokeh_chart

urlpatterns = [
    path('chart/', bokeh_chart, name='chart'),
]

现在，我们的 bokeh 图表已经准备好在 Django 中使用了。

启动服务器并查看图表

现在，我们可以启动 Django 开发服务器，并在浏览器中查看我们的图表。在命令行中运行以下命令启动服务器：

python manage.py runserver

在浏览器中打开 http://localhost:8000/chart/，即可看到我们的 bokeh 图表。

添加交互控件

接下来，我们将添加一些交互式控件来增强我们的图表。我们将添加一个滑块控件，用于调整数据的范围。在 views.py 文件中，修改 bokeh_chart 函数如下：

from bokeh.models import Slider

def bokeh_chart(request):
    x = list(range(1, 11))
    y = [random.randint(1, 100) for _ in range(10)]

    p = figure(title='Random Data', x_axis_label='X', y_axis_label='Y')

    range_slider = Slider(start=0, end=100, value=(0, 100), step=5, title='Range')
    p.line(x, y, legend_label='Random', line_width=2)
    p.add_tools(range_slider)

    script, div = components(p, CDN)

    return render(request, 'chart.html', {'script': script, 'div': div})

在上面的代码中，我们引入了 Slider 控件，并通过 add_tools 函数将其添加到图表中。这个滑块控件允许用户通过拖动滑块来调整数据范围。

现在我们可以重新启动服务器，并在浏览器中查看更新后的图表。滑动滑块以更改数据的范围，观察图表的变化。