Django上使用数据可视化利器Bokeh解析
前言
最近在实验室做的一个项目中，需要把大量的数据在 web 端进行可视化，需要绘制各类图表。数据都是以 csv 文件的形式保存在服务器中。本来是想使用 D3.js 这个数据可视化前端库来画图，但是需要编写大量的 js 代码。后来发现了 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)语句打开了这个 html 文件。效果如下：
右侧的工具栏是通过TOOLS = 'hover,crosshair,pan,wheel_zoom,box_zoom,reset,save,box_select'设置的。包含了常见的一些功能，包括缩放，保存，重置等等。由于简书的 markdown 不支持直接插入 div 块和 js 脚本，所以只能截取一个图放在这里，不能体验到右侧的工具栏的使用感受。
2. 集成到 Django 中
上面的例子是直接生成了一个 html 文件，但在正常的使用中，只应该生成对应的 div 和 js 就行了。
在 Django 的 view.py 中，定义一个 view。
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 里面。
然而要是放在底部。就不能正确画出图了。（求大神解答）
3. 时频图
在经过短时傅里叶变换输出的结果，可以用 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)
结果如下：
如果是使用 D3.js 来绘制这个图形的话，就比较费劲了。
4. 小结
Bokeh 这个框架，比起 D3.js，它的可视化选项相对较少。因此，目前来看 Bokeh 无法挑战 D3.js 的霸主地位。而且 Bokeh 过于依赖 python 的数值计算库，并非一个纯前端的框架，使得它的使用范围也小于 D3.js。
而在纯 python 的数值计算领域，也已经有 matplotlib 这种提供了与 Matlab 一模一样的接口的数据可视化库，Bokeh 的适用场景也并不多。
但是，它非常适合嵌入 Flask 或者 Django 的程序中，非常好用，速度也很快。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Python sklearn转换器估计器和K-近邻算法，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
在Python的Django框架中用流响应生成CSV文件的教程
这篇文章主要介绍了在Python的Django框架中用流响应生成CSV文件的教程,作者特别讲到了防止CSV文件中的中文避免出现乱码等问题,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了Python3列表内置方法大全及示例代码小结,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了用python如何爬取小姐姐私房照，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-08
这篇文章主要介绍了使用Python编写类UNIX系统的命令行工具的教程,本文来自于IBM官方网站技术文档,需要的朋友可以参考下2015-04-04
平时在远程连接服务器,大多数都是使用 Xshell,其实对于经常写python的小伙伴,我们还有一个使用起来更加方便,就是常用的python集成IED工具Pycharm,这篇文章主要给大家介绍了关于如何利用Pycharm连接服务器的相关资料,需要的朋友可以参考下2021-07-07
matploglib能够绘制出精美的图表,有时候我们希望把一组图放在一起进行比较,就需要用到matplotlib中提供的subplot了,这篇文章主要给大家介绍了关于python中subplot大小的设置方法,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了python实现遗传算法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
解决Tkinter中button按钮未按却主动执行command函数的问题
这篇文章主要介绍了解决Tkinter中button按钮未按却主动执行command函数的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-05-05
这篇文章主要介绍了Python selenium 三种等待方式详解(必会)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
最新评论