整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者： 俊欣
來源：關于數據分析與可視化
今天小編來為大家安利另外一個用于繪制可視化圖表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基礎之上，在創建之出的目的是為了幫助前端知識匱乏的數據分析人員，以純Python編程的方式快速制作出交互特性強的數據可視化大屏，在經過多年的迭代發展，如今不僅僅可以用來開發在線數據可視化作品，即便是輕量級的數據儀表盤、BI應用甚至是博客或者是常規的網站都隨處可見Dash框架的影子，今天小編就先來介紹一下該框架的一些基礎知識，并且來制作一個簡單的數據可視化大屏。
我們先來了解一下Dash框架中的兩個基本概念
Layout顧名思義就是用來設計可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復選框、輸入框、文本框、滑動條等組件，其中Dash框架對HTML標簽也進行了進一步的封裝，使得我們直接可以通過Python代碼來生成和設計每一個網頁所需要的元素，例如
<div>
<h1>Hello World!!</h1>
<div>
<p>Dash converts Python classes into HTML</p>
</div>
</div>
我們轉化成Dash的Python結構就是
html.Div([
html.H1('Hello Dash'),
html.Div([
html.P('Dash converts Python classes into HTML'),
])
])
Callbacks也就是回調函數，基本上是以裝飾器的形式來體現的，實現前后端異步通信的交互，例如我們在點擊按鈕或者下拉框之后出現的功能就是通過回調函數來實現的。
在導入模塊之前，我們先用pip命令來進行安裝，
! pip install dash
! pip install dash-html-components
! pip install dash-core-components
! pip install plotly
然后我們導入這些剛剛安裝完的模塊，其中dash-html-components用來生成HTML標簽，dash-core-components模塊用來生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因為我們需要用到的數據來自該模塊，里面是一眾互聯網公司過去一段時間中股價的走勢
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px
那么我們讀取數據并且用plotly來繪制折線圖，代碼如下
app = dash.Dash() #實例化Dash
df = px.data.stocks() #讀取股票數據
def stock_prices():
# 繪制折線圖
fig = go.Figure([go.Scatter(x=df['date'], y=df['AAPL'],
line=dict(color='firebrick', width=4), name='Apple')
])
fig.update_layout(title='股價隨著時間的變幻',
xaxis_title='日期',
yaxis_title='價格'
)
return fig
app.layout = html.Div(id='parent', children=[
html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center',
'marginTop': 40, 'marginBottom': 40}),
dcc.Graph(id='line_plot', figure=stock_prices())
])
if __name__ == '__main__':
app.run_server()
我們點擊運行之后會按照提示將url復制到瀏覽器當中便可以看到出來的結果了，如下所示
從代碼的邏輯上來看，我們通過Dash框架中的Div方法來進行頁面的布局，其中有參數id來指定網頁中的元素，以及style參數來進行樣式的設計，最后我們將會指出來的圖表放在dcc.Graph()函數當中。
然后我們再添置一個下拉框，當我們點擊這個下拉框的時候，可是根據我們的選擇展示不同公司的股價，代碼如下
dcc.Dropdown(id='dropdown',
options=[
{'label': '谷歌', 'value': 'GOOG'},
{'label': '蘋果', 'value': 'AAPL'},
{'label': '亞馬遜', 'value': 'AMZN'},
],
value='GOOG'),
output
options參數中的label對應的是下拉框中的各個標簽，而value對應的是DataFrame當中的列名
df.head()
output
最后我們將下拉框和繪制折線圖的函數給連接起來，我們點擊下拉框選中不同的選項的時候，折線圖也會相應的產生變化，
@app.callback(Output(component_id='bar_plot', component_property='figure'),
[Input(component_id='dropdown', component_property='value')])
def graph_update(dropdown_value):
print(dropdown_value)
# Function for creating line chart showing Google stock prices over time
fig = go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)],
line=dict(color='firebrick', width=4))
])
fig.update_layout(title='股價隨著時間的變幻',
xaxis_title='日期',
yaxis_title='價格'
)
return fig
我們看到callback()方法中指定輸入和輸出的媒介，其中Input參數，里面的component_id對應的是下拉框的id也就是dropdown，而Output參數，當中的component_id對應的是折線圖的id也就是bar_plot，我們來看一下最后出來的結果如下
最后，全部的代碼如下所示
周刊由 Python貓 出品，精心篩選國內外的 250+ 信息源，為你挑選最值得分享的文章、教程、開源項目、軟件工具、播客和視頻、熱門話題等內容。愿景：幫助所有讀者精進 Python 技術，并增長職業和副業的收入。
分享了 10 篇文章，13 個開源項目，2 則熱門話題，全文 2100 字。
以下是本期摘要：
文章&教程
① 用 Vue 和 Django 開發 Web 項目的終極指南（2024）
② 用 Pyodide 和 React 開發可視化的低/無代碼應用
③ Python __all__的問題
④ 為什么“python -m json”沒用？為什么是“json.tool”？
⑤ tea-tasting：對 A/B 測試作統計分析的 Python 包
⑥ 獨立線程中的 Asyncio 事件循環
⑦ 使用 eBPF 檢測 Python GIL
⑧ 嵌入式 Python：MicroPython 太棒了
⑨ 用 git log 查看 Python 函數的變更記錄
⑩ OpenCV 和野生王國
?項目&資源
① fasthtml：最快開發 HTML 應用的方法
② datachain：使用本地 ML 和 LLM 來處理非結構化數據
③ 《數據科學的要素》在線電子書
④ treescope：IPython 筆記本中將 HTML 內容作交互式查看
⑤ cardie：開源的名片設計和分享平臺
⑥ PyDPainter：好用的像素藝術繪畫工具
⑦ cloudflare-noip：免費替代付費的動態 DNS 服務
⑧ peerfetch：基于 WebRTC 的點對點 HTTP
⑨ yark：讓 YouTube 存檔變得簡單
⑩ patchwork：用 LLM 自動審查代碼、改 BUG 和寫文檔
? RestrictedPython：運行不可信 Python 代碼的受限執行環境
? metahuman-stream：實時互動的流媒體數字人
? Chenyme-AAVT：全自動音視頻翻譯項目
討論&問題
① 為什么“顯性優于隱性”原則不管用了？
② 有哪些小眾但好用的 Python 庫？
目前周刊實行付費訂閱制，年費 128 元，平均每天不到 4 毛錢，但絕對是一筆有眼光的投資。花錢學習知識，花錢提升自己，歡迎訂閱這個：你絕對不會后悔的專欄
訂閱后，可免費查看 第 63 期周刊的全文
PS.本周刊前30期的合集永久免費，已集結出了精美電子書（EPUB/PDF），請從該合集文章開頭獲取下載鏈接。
另外，付費期數將在其 50 期后免費開放，例如第 63 期將在第 113 期時免費，敬請留意。
ython數據分析師工作拓展助手，在不用掌握復雜的HTML、JavaScript、CSS等前端技術的情況下，也能快速做出來一個炫酷的Web APP，把數據分析結果可視化呈現出來！本文推薦Python界新秀，高速發展的開源Web框架Streamlit，與Python界較優秀交互式可視化工具Plotly，組合搭建的"Web數據可視化低代碼純python技術解決方案"。
Web數據可視化低代碼純python技術解決方案，是采用Streamlit Web框架，其可視化工具默認使用Bokeh，可以同時兼容使用Plotly、Matplotlib等，前端底層為React.js框架，Web服務端底層為Tornado。
注：圖中灰色背景的終端層，Python數據分析師可以不必關心，已經由Web框架Streamlit封裝成低代碼python開發接口實現。
Streamlit框架提供幾種界面布局模板，在這里使用常用的左右單頁面結構，如下圖所示左側為Sidebar，對應的API表示為：
st.sidebar.[element_name]其中，element_name是指交互組件名稱，包括：
如上圖所示，接下來將以此頁面布局開始開發。
使用單頁面結構中的Sidebar為導航控制欄，
import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
def Layouts_plotly():
st.sidebar.write('導航欄')
add_selectbox = st.sidebar.radio(
"plotly基本圖",
("Bubble", "Scatter", "Line","aggregate_bar","bar_charts","pie","pulled_out")
)
if add_selectbox=="Bubble":
Bubble()
elif add_selectbox=="Scatter":
Scatter()
elif add_selectbox == "Line":
Line()
elif add_selectbox == "aggregate_bar":
aggregate_bar()
elif add_selectbox == "bar_charts":
bar_charts()
elif add_selectbox == "pie":
pie()
elif add_selectbox == "pulled_out":
pulled_out()
# 補充表單
st.sidebar.button('基本數據表',on_click=Double_coordinates)
def main():
Layouts_plotly()
if __name__ == "__main__":
main()運行程序：streamlit run Demo_plotly_Basic_Charts.py
輸入效果如下圖所示：
注：框架默認執行第一選項： Bubble()，將在后面補充代碼
def Bubble():
df = px.data.gapminder()
fig = px.scatter(df.query("year==2007"), x="gdpPercap", y="lifeExp",
size="pop", color="continent",
hover_name="country", log_x=True, size_max=60)
# Plot the data
st.plotly_chart(fig)
def Scatter():
fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
# Plot the data
st.plotly_chart(fig)
def Line():
df = px.data.stocks()
fig = px.line(df, x='date', y="GOOG")
st.plotly_chart(fig)
def aggregate_bar():
df = px.data.tips()
fig = px.histogram(df, x="sex", y="total_bill",
color='smoker', barmode='group',
histfunc='avg',
height=400)
st.plotly_chart(fig)
def bar_charts():
data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')
st.plotly_chart(fig)
def pie():
df = px.data.tips()
fig = px.pie(df, values='tip', names='day', color='day',
color_discrete_map={
'Thur':'lightcyan',
'Fri':'cyan',
'Sat':'royalblue',
'Sun':'darkblue'})
st.plotly_chart(fig)
def pulled_out():
labels = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen']
values = [4500, 2500, 1053, 500]
# pull is given as a fraction of the pie radius
fig = go.Figure(data=[go.Pie(labels=labels, values=values, pull=[0, 0.2, 0, 0])])
st.plotly_chart(fig)數據表通過Pandas直接讀取（csv）數據為DataFrame，使用Streamlit的st.table直接顯示數據表，使用plotly.graph_objects繪圖。
@st.cache
def load_data():
df = pd.read_csv('STAT202112.csv', encoding='gbk')
df['年月'] = df['年月'].astype("str")
return df
def Double_coordinates():
df = load_data()
st.markdown('#### 數據表展示')
st.table(df)
st.markdown('#### 雙坐標圖')
x = df["年月"]
y1_1 = df['流失客戶']
y1_2=df['新客戶']
y2 = df["余額"]
trace0_1 = go.Bar(x=x,y=y1_1,
marker=dict(color="red"),
opacity=0.5,
name="流失客戶")
trace0_2 = go.Bar(x=x,y=y1_2,
marker=dict(color="blue"),
opacity=0.5,
name="新客戶")
trace1 = go.Scatter(x=x,y=y2,
mode="lines",
name="余額",
# 【步驟一】：使用這個參數yaxis="y2"，就是繪制雙y軸圖
yaxis="y2")
data = [trace0_1,trace0_2,trace1]
layout = go.Layout(title="客戶發展趨勢",
xaxis=dict(title="年月"),
yaxis=dict(title="客戶數量"),
# 【步驟二】：給第二個y軸，添加標題，指定第二個y軸，在右側。
yaxis2=dict(title="金額",overlaying="y",side="right"),
legend=dict(x=0.78,y=0.98,font=dict(size=12,color="black")))
fig = go.Figure(data=data,layout=layout)
st.plotly_chart(fig)注：@st.cache 用于把數據加載到緩存，避免下次重復查詢加載。
通過低代碼Streamlit+Plotly的試用，感覺代碼挺優雅，不用懂得任何前端技術，可以開發一個看起來還很美觀的Web App。
Python數據分析師可以用更多時間專注數據表現上，通過圖表為用戶講述數據的故事。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
