Django集成Bokeh实现高效Web数据可视化

Mia

发布时间：2026-10-13| 6人浏览过

原创

本文介绍如何在Django项目中利用Bokeh框架实现高效的数据可视化。相比前端D3.js，Bokeh允许通过少量Python代码生成HTML和JS，直接在服务器端处理CSV数据并渲染波形图与时频图。文章详细演示了集成步骤、模板嵌入方法及工具栏配置，适用于需要快速部署可视化功能的Python后端场景。

前言

Bokeh简介与Django集成优势

近期在实验室的一个项目中，我们需要在Web端展示大量数据的可视化图表，所有数据均以CSV格式存储于服务器。起初考虑使用前端库D3.js，但发现需要编写大量JavaScript代码。随后发现Bokeh框架，只需在后端编写少量Python代码即可生成对应的HTML与JS文件，由浏览器解析渲染，从而大幅降低了开发工作量。

波形图绘制与工具栏配置

1. 波形图绘制

此处绘制包含数千个数据点的信号波形图，其操作逻辑与Matlab相似，学习成本极低。


import pandas as pd
from bokeh.plotting import figure
from bokeh.io import output_file, show

csv_file = 'points.csv'
data = pd.read_csv(csv_file)
TOOLS = 'hover,crosshair,pan,wheel_zoom,box_zoom,reset,save,box_select'
picture = figure(width=1000, height=400, tools=TOOLS)
picture.line(data['order'], data['value'], color='blue', alpha=0.5)
output_file('waveform.html', title='waveform')
show(picture)

points.csv文件包含2048个数据点。上述脚本直接生成了一个HTML文件，执行show(picture)语句即可打开查看效果。

右侧工具栏通过TOOLS = 'hover,crosshair,pan,wheel_zoom,box_zoom,reset,save,box_select'进行配置，涵盖了缩放、保存、重置等常用功能。由于当前平台Markdown不支持直接插入div块和JS脚本，此处仅展示静态截图，无法体验工具栏的交互效果。

Django视图集成与模板嵌入

2. 集成至Django框架

前述示例直接生成HTML文件，但在实际应用中，通常只需生成对应的div和script片段。在Django的view.py中定义视图函数如下。


def waveform(request):
  csv_file = 'your file'
  data = pd.read_csv(csv_file) 
  TOOLS = "hover,crosshair,pan,wheel_zoom,box_zoom,reset,save,box_select"
  picture = figure(width=1200, height=400, tools=TOOLS) 
  picture.line(data['order'], data['value'], color='blue', alpha=0.5)
  script, div = components(picture, CDN)
  return render(request, 'waveform.html', {'script': script, 'div': div})

随后在对应的template waveform.html模板中引入生成的内容。


{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Experiment with Bokeh</title>
  <link href="{% static 'bokeh-0.12.4.min.css' %}" rel="stylesheet" type="text/css">
  <link href="{% static 'bokeh-widgets-0.12.4.min.css' %}" rel="stylesheet" type="text/css">
  <script src="{% static 'bokeh-0.12.4.min.js' %}"></script>
  <script src="{% static 'bokeh-widgets-0.12.4.min.js' %}"></script>
  {{ script |safe }}
</head>
<body>
{{ div |safe }}
</body>
</html>

此处存在一个不足之处，script标签被放置在了head部分。

若将script移至页面底部，则无法正确渲染图表（此处有待进一步探讨）。

时频图绘制与总结

3. 时频图展示

对于短时傅里叶变换（STFT）的输出结果，可使用image组件显示时频分布图，其效果与Matlab生成的图像类似。


import numpy as np
import pandas as pd
from bokeh.io import output_file, show
from bokeh.plotting import figure
data = pd.read_csv('tf_stft.csv')
value = np.array(data['value'])
d = np.reshape(value, (338, 124))
d = np.transpose(d)
TOOLS = "hover,crosshair,pan,wheel_zoom,box_zoom,reset,save,box_select"
p = figure(x_range=(0, 62), y_range=(0, 169), tools=TOOLS)
p.image(image=[d], x=0, y=0, dw=62, dh=169, palette="Viridis256")
output_file("image.html", title="image.py example")
show(p)

最终显示效果如下。