本文轉發來自：https://blog.csdn.net/KH_FC/article/details/118692677
一談到Web頁面，可能大家首先想到就是HTML，CSS或JavaScript。
本次小F就給大家介紹一下如何用Python製作一個資料視覺化網頁，使用到的是Streamlit庫。
輕鬆的將一個Excel資料檔案轉換為一個Web頁面，提供給所有人線上檢視。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713093622380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
每當你對Excel檔案進行更改儲存，Web頁面還能夠實時進行更新，確實挺不錯的。
Streamlit的文件和教程地址如下。
*https://docs.streamlit.io/en/stable/
https://streamlit.io/gallery*
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713093700630.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
相關的API使用可以去文件中檢視，都有詳細的解釋。
專案一共有三個檔案，程式、圖片、Excel表格資料。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713093716203.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
資料情況如下，某公司年底問卷調查(虛構資料)，各相關部門對生產部門在工作協作上的打分情況。
![](https://img-blog.csdnimg.cn/20210713093745738.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
有效資料總計約676條，匿名問卷，包含問卷填寫人所屬部門，年齡，評分。
最後對各部門參與人數進行彙總計數(右側資料)。
首先來安裝一下相關的Python庫，使用百度源。
```python
# 安裝streamlit
pip install streamlit -i https://mirror.baidu.com/pypi/simple/

# 安裝Plotly Express
pip install plotly_express==0.4.0 -i https://mirror.baidu.com/pypi/simple/

# 安裝xlrd
pip install xlrd==1.2.0 -i https://mirror.baidu.com/pypi/simple/
```
因為我們的資料檔案是xlsx格式，最新版的xlrd，只支援xls檔案。
所以需要指定xlrd版本為1.2.0，這樣pandas才能成功讀取資料。
命令列終端啟動網頁。
```python
# 命令列終端開啟檔案所在路徑
cd Excel_Webapp

# 執行網頁
streamlit run app.py
```
成功以後會有提示，並且瀏覽器會自動彈出網頁。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713093917921.png)
如果沒有自動彈出，可以直接訪問上圖中的地址。
得到結果如下，一個資料視覺化網頁出來了。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713093933655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
目前只能在本地訪問檢視，如果你想放在網上，可以透過伺服器部署，需要自行去研究～

下面我們來看看具體的程式碼吧。
```python
import pandas as pd
import streamlit as st
import plotly.express as px
from PIL import Image

# 設定網頁名稱
st.set_page_config(page_title='調查結果')
# 設定網頁標題
st.header('2020年調查問卷')
# 設定網頁子標題
st.subheader('2020年各部門對生產部的評分情況')
```
匯入相關的Python包，pandas處理資料，streamlit用來生成網頁，plotly.express則是生成圖表，PIL讀取圖片。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713094023476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
設定了網頁名稱，以及網頁裡的標題和子標題。
```python
# 讀取資料
excel_file = '各部門對生產部的評分情況.xlsx'
sheet_name = 'DATA'

df = pd.read_excel(excel_file,
                   sheet_name=sheet_name,
                   usecols='B:D',
                   header=3)

# 此處為各部門參加問卷調查人數
df_participants = pd.read_excel(excel_file,
                                sheet_name=sheet_name,
                                usecols='F:G',
                                header=3)
df_participants.dropna(inplace=True)

# streamlit的多重選擇(選項資料)
department = df['部門'].unique().tolist()
# streamlit的滑動條(年齡資料)
ages = df['年齡'].unique().tolist()
```
讀取Excel表格資料，並且得出年齡分佈以及部門情況，一共是有5個部門。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713094106163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
新增滑動條和多重選擇的資料選項。
```python
# 滑動條, 最大值、最小值、區間值
age_selection = st.slider('年齡:',
                          min_value=min(ages),
                          max_value=max(ages),
                          value=(min(ages), max(ages)))

# 多重選擇, 預設全選
department_selection = st.multiselect('部門:',
                                      department,
                                      default=department)
```
結果如下。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713094139564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
年齡是從23至65，部門則是市場、物流、採購、銷售、財務這幾個。
由於滑動條和多重選擇是可變的，需要根據過濾條件得出最終資料。
```python
# 根據選擇過濾資料
mask = (df['年齡'].between(*age_selection)) & (df['部門'].isin(department_selection))
number_of_result = df[mask].shape[0]

# 根據篩選條件, 得到有效資料
st.markdown(f'*有效資料: {number_of_result}*')

# 根據選擇分組資料
df_grouped = df[mask].groupby(by=['評分']).count()[['年齡']]
df_grouped = df_grouped.rename(columns={'年齡': '計數'})
df_grouped = df_grouped.reset_index()
```
得到資料便可以繪製柱狀圖了。
```python
# 繪製柱狀圖, 配置相關引數
bar_chart = px.bar(df_grouped,
                   x='評分',
                   y='計數',
                   text='計數',
                   color_discrete_sequence=['#F63366']*len(df_grouped),
                   template='plotly_white')
st.plotly_chart(bar_chart)
```
使用plotly繪製柱狀圖。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2021071309422815.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
當我們在網頁調整選項時，有效資料和柱狀圖也會隨之變化。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713094237810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
此外streamlit還可以給網頁新增圖片和互動式表格。
```python
# 新增圖片和互動式表格
col1, col2 = st.beta_columns(2)
image = Image.open('survey.jpg')
col1.image(image,
           caption='Designed by 小F / 法納斯特',
           use_column_width=True)
col2.dataframe(df[mask], width=300)
```
得到結果如下。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713094305714.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
可以看到表格有一個滑動條，可以使用滑鼠滾輪滾動檢視。

最後便是繪製一個餅圖啦！
```python
# 繪製餅圖
pie_chart = px.pie(df_participants,
                   title='總的參加人數',
                   values='人數',
                   names='公司部門')
st.plotly_chart(pie_chart)
```
結果如下。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713094332993.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
各部門參加問卷調查的人數，也是一個可以互動的圖表。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210713094340416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tIX0ZD,size_16,color_FFFFFF,t_70)
將銷售、市場、物流取消掉，我們就能看出財務和採購參加問卷調查的人數佔比情況。
好了，本期的分享就到此結束了，有興趣的小夥伴可以自行去實踐學習。****

沒想到，Python 還可以製作 Web 視覺化頁面！

相關文章