整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者： 俊欣
來源：關(guān)于數(shù)據(jù)分析與可視化
今天小編來為大家安利另外一個(gè)用于繪制可視化圖表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基礎(chǔ)之上，在創(chuàng)建之出的目的是為了幫助前端知識匱乏的數(shù)據(jù)分析人員，以純Python編程的方式快速制作出交互特性強(qiáng)的數(shù)據(jù)可視化大屏，在經(jīng)過多年的迭代發(fā)展，如今不僅僅可以用來開發(fā)在線數(shù)據(jù)可視化作品，即便是輕量級的數(shù)據(jù)儀表盤、BI應(yīng)用甚至是博客或者是常規(guī)的網(wǎng)站都隨處可見Dash框架的影子，今天小編就先來介紹一下該框架的一些基礎(chǔ)知識，并且來制作一個(gè)簡單的數(shù)據(jù)可視化大屏。
我們先來了解一下Dash框架中的兩個(gè)基本概念
Layout顧名思義就是用來設(shè)計(jì)可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復(fù)選框、輸入框、文本框、滑動(dòng)條等組件，其中Dash框架對HTML標(biāo)簽也進(jìn)行了進(jìn)一步的封裝，使得我們直接可以通過Python代碼來生成和設(shè)計(jì)每一個(gè)網(wǎng)頁所需要的元素，例如
<div>
<h1>Hello World!!</h1>
<div>
<p>Dash converts Python classes into HTML</p>
</div>
</div>
我們轉(zhuǎn)化成Dash的Python結(jié)構(gòu)就是
html.Div([
html.H1('Hello Dash'),
html.Div([
html.P('Dash converts Python classes into HTML'),
])
])
Callbacks也就是回調(diào)函數(shù)，基本上是以裝飾器的形式來體現(xiàn)的，實(shí)現(xiàn)前后端異步通信的交互，例如我們在點(diǎn)擊按鈕或者下拉框之后出現(xiàn)的功能就是通過回調(diào)函數(shù)來實(shí)現(xiàn)的。
在導(dǎo)入模塊之前，我們先用pip命令來進(jìn)行安裝，
! pip install dash
! pip install dash-html-components
! pip install dash-core-components
! pip install plotly
然后我們導(dǎo)入這些剛剛安裝完的模塊，其中dash-html-components用來生成HTML標(biāo)簽，dash-core-components模塊用來生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因?yàn)槲覀冃枰玫降臄?shù)據(jù)來自該模塊，里面是一眾互聯(lián)網(wǎng)公司過去一段時(shí)間中股價(jià)的走勢
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
那么我們讀取數(shù)據(jù)并且用plotly來繪制折線圖，代碼如下
app = dash.Dash() #實(shí)例化Dash
df = px.data.stocks() #讀取股票數(shù)據(jù)
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='股價(jià)隨著時(shí)間的變幻',
xaxis_title='日期',
yaxis_title='價(jià)格'
)
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()
我們點(diǎn)擊運(yùn)行之后會(huì)按照提示將url復(fù)制到瀏覽器當(dāng)中便可以看到出來的結(jié)果了，如下所示
從代碼的邏輯上來看，我們通過Dash框架中的Div方法來進(jìn)行頁面的布局，其中有參數(shù)id來指定網(wǎng)頁中的元素，以及style參數(shù)來進(jìn)行樣式的設(shè)計(jì)，最后我們將會(huì)指出來的圖表放在dcc.Graph()函數(shù)當(dāng)中。
然后我們再添置一個(gè)下拉框，當(dāng)我們點(diǎn)擊這個(gè)下拉框的時(shí)候，可是根據(jù)我們的選擇展示不同公司的股價(jià)，代碼如下
dcc.Dropdown(id='dropdown',
options=[
{'label': '谷歌', 'value': 'GOOG'},
{'label': '蘋果', 'value': 'AAPL'},
{'label': '亞馬遜', 'value': 'AMZN'},
],
value='GOOG'),
output
options參數(shù)中的label對應(yīng)的是下拉框中的各個(gè)標(biāo)簽，而value對應(yīng)的是DataFrame當(dāng)中的列名
df.head()
output
最后我們將下拉框和繪制折線圖的函數(shù)給連接起來，我們點(diǎn)擊下拉框選中不同的選項(xiàng)的時(shí)候，折線圖也會(huì)相應(yīng)的產(chǎn)生變化，
@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='股價(jià)隨著時(shí)間的變幻',
xaxis_title='日期',
yaxis_title='價(jià)格'
)
return fig
我們看到callback()方法中指定輸入和輸出的媒介，其中Input參數(shù)，里面的component_id對應(yīng)的是下拉框的id也就是dropdown，而Output參數(shù)，當(dāng)中的component_id對應(yīng)的是折線圖的id也就是bar_plot，我們來看一下最后出來的結(jié)果如下
最后，全部的代碼如下所示
周刊由 Python貓 出品，精心篩選國內(nèi)外的 250+ 信息源，為你挑選最值得分享的文章、教程、開源項(xiàng)目、軟件工具、播客和視頻、熱門話題等內(nèi)容。愿景：幫助所有讀者精進(jìn) Python 技術(shù)，并增長職業(yè)和副業(yè)的收入。
分享了 10 篇文章，13 個(gè)開源項(xiàng)目，2 則熱門話題，全文 2100 字。
以下是本期摘要：
文章&教程
① 用 Vue 和 Django 開發(fā) Web 項(xiàng)目的終極指南（2024）
② 用 Pyodide 和 React 開發(fā)可視化的低/無代碼應(yīng)用
③ Python __all__的問題
④ 為什么“python -m json”沒用？為什么是“json.tool”？
⑤ tea-tasting：對 A/B 測試作統(tǒng)計(jì)分析的 Python 包
⑥ 獨(dú)立線程中的 Asyncio 事件循環(huán)
⑦ 使用 eBPF 檢測 Python GIL
⑧ 嵌入式 Python：MicroPython 太棒了
⑨ 用 git log 查看 Python 函數(shù)的變更記錄
⑩ OpenCV 和野生王國
?項(xiàng)目&資源
① fasthtml：最快開發(fā) HTML 應(yīng)用的方法
② datachain：使用本地 ML 和 LLM 來處理非結(jié)構(gòu)化數(shù)據(jù)
③ 《數(shù)據(jù)科學(xué)的要素》在線電子書
④ treescope：IPython 筆記本中將 HTML 內(nèi)容作交互式查看
⑤ cardie：開源的名片設(shè)計(jì)和分享平臺
⑥ PyDPainter：好用的像素藝術(shù)繪畫工具
⑦ cloudflare-noip：免費(fèi)替代付費(fèi)的動(dòng)態(tài) DNS 服務(wù)
⑧ peerfetch：基于 WebRTC 的點(diǎn)對點(diǎn) HTTP
⑨ yark：讓 YouTube 存檔變得簡單
⑩ patchwork：用 LLM 自動(dòng)審查代碼、改 BUG 和寫文檔
? RestrictedPython：運(yùn)行不可信 Python 代碼的受限執(zhí)行環(huán)境
? metahuman-stream：實(shí)時(shí)互動(dòng)的流媒體數(shù)字人
? Chenyme-AAVT：全自動(dòng)音視頻翻譯項(xiàng)目
討論&問題
① 為什么“顯性優(yōu)于隱性”原則不管用了？
② 有哪些小眾但好用的 Python 庫？
目前周刊實(shí)行付費(fèi)訂閱制，年費(fèi) 128 元，平均每天不到 4 毛錢，但絕對是一筆有眼光的投資。花錢學(xué)習(xí)知識，花錢提升自己，歡迎訂閱這個(gè)：你絕對不會(huì)后悔的專欄
訂閱后，可免費(fèi)查看 第 63 期周刊的全文
PS.本周刊前30期的合集永久免費(fèi)，已集結(jié)出了精美電子書（EPUB/PDF），請從該合集文章開頭獲取下載鏈接。
另外，付費(fèi)期數(shù)將在其 50 期后免費(fèi)開放，例如第 63 期將在第 113 期時(shí)免費(fèi)，敬請留意。
ython數(shù)據(jù)分析師工作拓展助手，在不用掌握復(fù)雜的HTML、JavaScript、CSS等前端技術(shù)的情況下，也能快速做出來一個(gè)炫酷的Web APP，把數(shù)據(jù)分析結(jié)果可視化呈現(xiàn)出來！本文推薦Python界新秀，高速發(fā)展的開源Web框架Streamlit，與Python界較優(yōu)秀交互式可視化工具Plotly，組合搭建的"Web數(shù)據(jù)可視化低代碼純python技術(shù)解決方案"。
Web數(shù)據(jù)可視化低代碼純python技術(shù)解決方案，是采用Streamlit Web框架，其可視化工具默認(rèn)使用Bokeh，可以同時(shí)兼容使用Plotly、Matplotlib等，前端底層為React.js框架，Web服務(wù)端底層為Tornado。
注：圖中灰色背景的終端層，Python數(shù)據(jù)分析師可以不必關(guān)心，已經(jīng)由Web框架Streamlit封裝成低代碼python開發(fā)接口實(shí)現(xiàn)。
Streamlit框架提供幾種界面布局模板，在這里使用常用的左右單頁面結(jié)構(gòu)，如下圖所示左側(cè)為Sidebar，對應(yīng)的API表示為：
st.sidebar.[element_name]其中，element_name是指交互組件名稱，包括：
如上圖所示，接下來將以此頁面布局開始開發(fā)。
使用單頁面結(jié)構(gòu)中的Sidebar為導(dǎo)航控制欄，
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('導(dǎo)航欄')
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()
# 補(bǔ)充表單
st.sidebar.button('基本數(shù)據(jù)表',on_click=Double_coordinates)
def main():
Layouts_plotly()
if __name__ == "__main__":
main()運(yùn)行程序：streamlit run Demo_plotly_Basic_Charts.py
輸入效果如下圖所示：
注：框架默認(rèn)執(zhí)行第一選項(xiàng)： Bubble()，將在后面補(bǔ)充代碼
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)數(shù)據(jù)表通過Pandas直接讀取（csv）數(shù)據(jù)為DataFrame，使用Streamlit的st.table直接顯示數(shù)據(jù)表，使用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('#### 數(shù)據(jù)表展示')
st.table(df)
st.markdown('#### 雙坐標(biāo)圖')
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="余額",
# 【步驟一】：使用這個(gè)參數(shù)yaxis="y2"，就是繪制雙y軸圖
yaxis="y2")
data = [trace0_1,trace0_2,trace1]
layout = go.Layout(title="客戶發(fā)展趨勢",
xaxis=dict(title="年月"),
yaxis=dict(title="客戶數(shù)量"),
# 【步驟二】：給第二個(gè)y軸，添加標(biāo)題，指定第二個(gè)y軸，在右側(cè)。
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 用于把數(shù)據(jù)加載到緩存，避免下次重復(fù)查詢加載。
通過低代碼Streamlit+Plotly的試用，感覺代碼挺優(yōu)雅，不用懂得任何前端技術(shù)，可以開發(fā)一個(gè)看起來還很美觀的Web App。
Python數(shù)據(jù)分析師可以用更多時(shí)間專注數(shù)據(jù)表現(xiàn)上，通過圖表為用戶講述數(shù)據(jù)的故事。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
