Django上使用数据可视化利器Bokeh解析


Posted in Python onJuly 31, 2019

前言

最近在实验室做的一个项目中,需要把大量的数据在 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 文件。效果如下:

Django上使用数据可视化利器Bokeh解析

右侧的工具栏是通过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)

结果如下:

Django上使用数据可视化利器Bokeh解析

如果是使用 D3.js 来绘制这个图形的话,就比较费劲了。

4. 小结

Bokeh 这个框架,比起 D3.js,它的可视化选项相对较少。因此,目前来看 Bokeh 无法挑战 D3.js 的霸主地位。而且 Bokeh 过于依赖 python 的数值计算库,并非一个纯前端的框架,使得它的使用范围也小于 D3.js。

而在纯 python 的数值计算领域,也已经有 matplotlib 这种提供了与 Matlab 一模一样的接口的数据可视化库,Bokeh 的适用场景也并不多。
但是,它非常适合嵌入 Flask 或者 Django 的程序中,非常好用,速度也很快。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python获取文件版本信息、公司名和产品名的方法
Oct 05 Python
Python映射拆分操作符用法实例
May 19 Python
Python基于xlrd模块操作Excel的方法示例
Jun 21 Python
详解Python 装饰器执行顺序迷思
Aug 08 Python
win10 64bit下python NLTK安装教程
Sep 19 Python
python3 爬取图片的实例代码
Nov 06 Python
对python中dict和json的区别详解
Dec 18 Python
Python任意字符串转16, 32, 64进制的方法
Jun 12 Python
python scipy卷积运算的实现方法
Sep 16 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
Mar 14 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
Jun 10 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
Dec 04 Python
Flask框架单例模式实现方法详解
Jul 31 #Python
pycharm配置当鼠标悬停时快速提示方法参数
Jul 31 #Python
详细介绍Python进度条tqdm的使用
Jul 31 #Python
处理Selenium3+python3定位鼠标悬停才显示的元素
Jul 31 #Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
Jul 31 #Python
django解决订单并发问题【推荐】
Jul 31 #Python
python opencv将图片转为灰度图的方法示例
Jul 31 #Python
You might like
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python获取中文字符串长度的方法
2018/11/14 Python
python实现求特征选择的信息增益
2018/12/18 Python
python实现二维数组的对角线遍历
2019/03/02 Python
详解用python写一个抽奖程序
2019/05/10 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
大家检讨书5000字
2014/02/03 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
技术合作协议书范本
2014/04/18 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
四大名著读书笔记
2015/06/25 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis