目錄
概述
1 認識Bokeh
1.1 Bokeh介紹
1.2 安裝Bokeh
1.3 范例介紹
2 Bokeh的應用
2.1 Bokeh應用的框架結構
2.2 實時性數據核心原理
3 具體案例
3.1 代碼實現
3.2 部署和運行
概述
Bokeh是一個用于創建交互式可視化的Python庫,特別適合在Web瀏覽器中展示。它能夠生成各種類型的圖表,并且支持高度交互性,如平移、縮放、選擇、懸停提示等。以下是一個簡單的Bokeh示例,展示如何創建一個帶有交互功能的折線圖。
1 認識Bokeh
1.1 Bokeh介紹
Bokeh?是一個強大的交互式可視化庫,專為現代 Web 瀏覽器設計。它支持創建高性能、可交互的圖表和儀表盤,適用于大規模數據集。
核心優勢:
交互性強:支持平移、縮放、懸停提示、選擇等
輸出靈活:生成 HTML 文件、嵌入 Jupyter Notebook 或部署為 Web 應用
流式數據支持:實時更新圖表(如金融數據流)
多種渲染器:Canvas、SVG、WebGL 支持
1.2 安裝Bokeh
官方網站地址:
https://docs.bokeh.org/en/latest/index.html#
打開網站其頁面如下,目前其最新版本已經更新至:v3.7.3
該packet對Python要求其版本必須升級至Python 3.10,安裝命令源代碼:
pip install bokeh
1.3 范例介紹
官網提供了許多冠以Bokeh的使用案例,程序員可參考這些Demo實現自己感興趣的功能,基礎案例如下:
2 Bokeh的應用
2.1 Bokeh應用的框架結構
2.2 實時性數據核心原理
實時數據可視化核心原理,Bokeh 通過?ColumnDataSource
?和回調機制實現實時數據更新:
數據源對象:
ColumnDataSource
?存儲可視化數據流式更新:
stream()
?方法增量添加新數據回調函數:周期性更新數據源
Bokeh 服務器:維護應用狀態和處理實時更新
3 具體案例
3.1 代碼實現
應用Bokeh模擬傳感器實時更新數據的特性?
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
# @Time : 2020/4/9 13:05
# @Author : ming fei.tang
# @File : debug tools
# ---------------------
from bokeh.plotting import figure, curdoc
from bokeh.models import ColumnDataSource, Range1d, HoverTool
from bokeh.layouts import column
from bokeh.models.widgets import Div
import random
import datetime
import numpy as np# 創建數據源
source = ColumnDataSource(data={'time': [],'temperature': [],'humidity': []
})# 創建圖表
temp_plot = figure(title='溫度傳感器實時數據',x_axis_type='datetime',width=1000, height=300,tools="pan,wheel_zoom,box_zoom,reset"
)
temp_plot.line('time', 'temperature', source=source, line_width=2, color='red', legend_label="溫度(℃)")
temp_plot.y_range = Range1d(15, 35)humidity_plot = figure(title='濕度傳感器實時數據',x_axis_type='datetime',width=1000, height=300,x_range=temp_plot.x_range # 共享X軸范圍
)
humidity_plot.line('time', 'humidity', source=source, line_width=2, color='blue', legend_label="濕度(%)")
humidity_plot.y_range = Range1d(0, 100)# 狀態面板
stats_div = Div(text="<h3>傳感器狀態: <span style='color:green'>運行中</span></h3>", width=200)# 模擬數據生成
def generate_sensor_data():current_time = datetime.datetime.now()# 模擬溫度(帶有小幅波動)base_temp = 25 + 5 * np.sin(current_time.minute / 30 * np.pi)temperature = base_temp + random.uniform(-0.5, 0.5)# 模擬濕度(與溫度反向變化)humidity = 50 - 0.8 * (temperature - 25) + random.uniform(-2, 2)return {'time': [current_time],'temperature': [temperature],'humidity': [max(0, min(100, humidity))] # 限制在0-100范圍}# 更新函數
def update():new_data = generate_sensor_data()# 流式更新source.stream(new_data, rollover=300) # 保留300個最新數據點# 更新狀態面板stats_div.text = f"""<div style="background:#f9f9f9; padding:10px; border-radius:5px"><h3>傳感器狀態: <span style='color:green'>? 運行中</span></h3><p>最后更新時間: {datetime.datetime.now().strftime('%H:%M:%S')}</p><p>當前溫度: <b>{new_data['temperature'][0]:.1f}℃</b></p><p>當前濕度: <b>{new_data['humidity'][0]:.1f}%</b></p><p>數據點數: {len(source.data['time'])}</p></div>"""# 添加懸停工具
hover = HoverTool(tooltips=[("時間", "@time{%F %T}"),("溫度", "@temperature{0.0}℃"),("濕度", "@humidity{0}%")
], formatters={'@time': 'datetime'})temp_plot.add_tools(hover)# 設置布局和更新頻率
layout = column(stats_div, temp_plot, humidity_plot)
curdoc().add_root(layout)
curdoc().add_periodic_callback(update, 1000) # 每秒更新一次
curdoc().title = "實時傳感器監控"
3.2 部署和運行
具體方法如下:
部署與運行方法
保存為 Python 文件:
xxx.py
啟動 Bokeh 服務器:
bash
bokeh serve --show xxx.py瀏覽器訪問:
http://localhost:5006/xxx
筆者創建的項目結構如下:
在終端運行該代碼,運行方法如下:
在該.py文件所在目錄下運行該命令:
bokeh serve --show Bokeh_stud.py
終端上顯示如下信息,說明系統已經正常啟動:
在瀏覽器上會顯示頁面: