快捷導(dǎo)航

Django上使用數(shù)據(jù)可視化利器Bokeh解析

更新時(shí)間：2019年07月31日 10:54:15 作者：柴柴土

這篇文章主要介紹了Django上使用數(shù)據(jù)可視化利器Bokeh解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

最近在實(shí)驗(yàn)室做的一個(gè)項(xiàng)目中，需要把大量的數(shù)據(jù)在 web 端進(jìn)行可視化，需要繪制各類(lèi)圖表。數(shù)據(jù)都是以 csv 文件的形式保存在服務(wù)器中。本來(lái)是想使用 D3.js 這個(gè)數(shù)據(jù)可視化前端庫(kù)來(lái)畫(huà)圖，但是需要編寫(xiě)大量的 js 代碼。后來(lái)發(fā)現(xiàn)了 Bokeh 這個(gè)框架，只需要在后端編寫(xiě)及少量的 Python 代碼生成對(duì)應(yīng)的 html 與 js，再傳送到前端讓瀏覽器解析，大大的減少了工作量。

1. 波形圖

這里繪制一個(gè)包含了數(shù)千個(gè)數(shù)據(jù)點(diǎn)的信號(hào)波形圖，繪制方法和 Matlab 如出一轍。學(xué)習(xí)成本為零。

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 個(gè)點(diǎn)。上面這段腳本是直接生成了一個(gè) html 文件，show(picture)語(yǔ)句打開(kāi)了這個(gè) html 文件。效果如下：

右側(cè)的工具欄是通過(guò)TOOLS = 'hover,crosshair,pan,wheel_zoom,box_zoom,reset,save,box_select'設(shè)置的。包含了常見(jiàn)的一些功能，包括縮放，保存，重置等等。由于簡(jiǎn)書(shū)的 markdown 不支持直接插入 div 塊和 js 腳本，所以只能截取一個(gè)圖放在這里，不能體驗(yàn)到右側(cè)的工具欄的使用感受。

2. 集成到 Django 中

上面的例子是直接生成了一個(gè) html 文件，但在正常的使用中，只應(yīng)該生成對(duì)應(yīng)的 div 和 js 就行了。
在 Django 的 view.py 中，定義一個(gè) 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})

這樣就把對(duì)應(yīng)的 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>

這里有一個(gè)不太好的地方，把 script 放到了 head 里面。

然而要是放在底部。就不能正確畫(huà)出圖了。（求大神解答）

3. 時(shí)頻圖

在經(jīng)過(guò)短時(shí)傅里葉變換輸出的結(jié)果，可以用 image 來(lái)顯示時(shí)頻分布圖。與 Matlab 畫(huà)出來(lái)的也是如出一轍。

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)

結(jié)果如下：

如果是使用 D3.js 來(lái)繪制這個(gè)圖形的話(huà)，就比較費(fèi)勁了。

4. 小結(jié)

Bokeh 這個(gè)框架，比起 D3.js，它的可視化選項(xiàng)相對(duì)較少。因此，目前來(lái)看 Bokeh 無(wú)法挑戰(zhàn) D3.js 的霸主地位。而且 Bokeh 過(guò)于依賴(lài) python 的數(shù)值計(jì)算庫(kù)，并非一個(gè)純前端的框架，使得它的使用范圍也小于 D3.js。

而在純 python 的數(shù)值計(jì)算領(lǐng)域，也已經(jīng)有 matplotlib 這種提供了與 Matlab 一模一樣的接口的數(shù)據(jù)可視化庫(kù)，Bokeh 的適用場(chǎng)景也并不多。
但是，它非常適合嵌入 Flask 或者 Django 的程序中，非常好用，速度也很快。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: