Streamlit 的學習從 2023 年初到現在已停頓兩年了, 之後資料科學與 LangChain 學習方便, 打算花點時間把 Streamlit 仔細的測試完.
本系列之前的文章參考 :
本篇旨在展示 Streamlit 輸出 DataFrame 的方法. DataFrame 是 Pandas 的二維資料結構, 功能類似 Excel 試算表 (spreadsheet) 中的一張工作表 (worksheet), 基本上就是加上欄 (column) 與列 (row) 索引標籤功能的 Numpy 矩陣.
建立 DataFrame 的方法有很多, 最常用的是呼叫 DataFrame 類別的建構式 DataFrame() 並傳入一個二維串列建立 DataFrame 物件, 可以同時傳入 index 與 columns 參數 (都是串列) 設定列與欄索引標籤, 例如 :
>>> import pandas as pd
>>> score=[[78, 34, 65, 87, 99],
[100, 99, 89, 92, 100],
[88, 72, 95, 81, 100],
[67, 85, 73, 100, 56]] # 二維串列
>>> index=['張三', '李四', '王五', '趙六'] # 列索引標籤
>>> columns=['國文', '英文', '數學', '自然', '社會'] # 欄索引標籤
>>> df=pd.DataFrame(score, index=index, columns=columns) # 建立 DataFrame 物件
>>> df
國文 英文 數學 自然 社會
張三 78 34 65 87 99
李四 100 99 89 92 100
王五 88 72 95 81 100
趙六 67 85 73 100 56
也可以只傳入資料建立物件後再用 index 與 columns 屬性設定 :
>>> df=pd.DataFrame(score)
>>> df
0 1 2 3 4
0 78 34 65 87 99
1 100 99 89 92 100
2 88 72 95 81 100
3 67 85 73 100 56
可見若未傳入 index 與 column 參數預設會用整數當索引標籤.
>>> df.index=index
>>> df.columns=columns
>>> df
國文 英文 數學 自然 社會
張三 78 34 65 87 99
李四 100 99 89 92 100
王五 88 72 95 81 100
趙六 67 85 73 100 56
接下來就可以用 Streamlit 來輸出此 DataFrame 了. Streamlit 提供如下表所示之四種函式來顯示 DataFrame 資料 :
| 常用函式 | 說明 |
|---|---|
| st.dataframe(df) | 以互動式表格顯示 DataFrame, 支援排序與捲動, 適合展示大筆資料. |
| st.table(df) | 以靜態表格顯示 DataFrame (無互動功能), 適合簡報用途. |
| st.write(df) | 自動判斷並以互動式表格顯示 DataFrame, 支援排序與捲動 |
| st.data_editor(df) | 將資料輸出維可編輯的互動表格, 適合需要用戶輸入或調整資料的場景. |
注意, 在 Streamlit v1.30 之前 write() 會輸出靜態表格, 但 v1.30+ 後改為輸出與呼叫 dataframe() 一樣的互動式表格.
首先測試 dataframe() 函式, 它會輸出一個互動式的網頁表格, 例如可以按欄名進行升冪/降冪排序, 或者隱藏欄位等, 例如 :
測試 1 : 呼叫 dataframe() [看原始碼]
# dataframe-1.py
import pandas as pd
import streamlit as st
score=[[78, 34, 65, 87, 99],
[100, 99, 89, 92, 100],
[88, 72, 95, 81, 100],
[67, 85, 73, 100, 56]]
index=['張三', '李四', '王五', '趙六']
columns=['國文', '英文', '數學', '自然', '社會']
df=pd.DataFrame(score, index=index, columns=columns)
st.subheader("成績單")
st.dataframe(df)
在命令提示字元視窗用 streamlit run <app.py> 執行此程式 (注意, 舊版 Streamlit 不用 run, 新版改成要用 run 了) :
D:\python\test>streamlit run dataframe-1.py
You can now view your Streamlit app in your browser.
Local URL: http://localhost:8501
Network URL: http://192.168.77.135:8501
一般會自動開啟預設瀏覽器連線 http://localhost:850 顯示結果 :
按 '英文' 欄位, 點選 "Sort descending" 對此欄位內容進行降冪排序 :
注意, 停止程式執行要先在命令提示字元視窗按 Ctrl+ C, 再關掉瀏覽器網頁, 如果先關掉網頁的話, 在命令提示字元視窗按 Ctrl+ C 會陰找不到目標網頁而無反應.
# dataframe-2.py
import pandas as pd
import streamlit as st
score=[[78, 34, 65, 87, 99],
[100, 99, 89, 92, 100],
[88, 72, 95, 81, 100],
[67, 85, 73, 100, 56]]
index=['張三', '李四', '王五', '趙六']
columns=['國文', '英文', '數學', '自然', '社會']
df=pd.DataFrame(score, index=index, columns=columns)
st.subheader("成績單")
st.table(df)
結果如下 :
呼叫萬用函式 write() 時它會判斷來源資料是 DataFrame 而自動呼叫 dataframe() 結果會跟 table() 一樣輸出一個互動式表格, 例如 :
測試 3 : 呼叫 write() [看原始碼]
# dataframe-3.py
import pandas as pd
import streamlit as st
score=[[78, 34, 65, 87, 99],
[100, 99, 89, 92, 100],
[88, 72, 95, 81, 100],
[67, 85, 73, 100, 56]]
index=['張三', '李四', '王五', '趙六']
columns=['國文', '英文', '數學', '自然', '社會']
df=pd.DataFrame(score, index=index, columns=columns)
st.subheader("成績單")
st.write(df)
結果如下 :
# dataframe-4.py
import pandas as pd
import streamlit as st
score=[[78, 34, 65, 87, 99],
[100, 99, 89, 92, 100],
[88, 72, 95, 81, 100],
[67, 85, 73, 100, 56]]
index=['張三', '李四', '王五', '趙六']
columns=['國文', '英文', '數學', '自然', '社會']
df=pd.DataFrame(score, index=index, columns=columns)
st.subheader("成績單")
st.data_editor(df)
點任一儲存格可修改其內容, 例如將李四的英文成績由 99 改成 76 :
data_editor() 函式會傳回被編輯過的 DataFrame 內容, 在下面範例中我們用一個 edited_df 來取得此傳回值, 然後丟給 dataframe() 顯示 :
測試 5 : 取得 data_editor() 的傳回值 [看原始碼]
# dataframe-5.py
import pandas as pd
import streamlit as st
score=[[78, 34, 65, 87, 99],
[100, 99, 89, 92, 100],
[88, 72, 95, 81, 100],
[67, 85, 73, 100, 56]]
index=['張三', '李四', '王五', '趙六']
columns=['國文', '英文', '數學', '自然', '社會']
df=pd.DataFrame(score, index=index, columns=columns)
st.subheader("成績單")
edited_df=st.data_editor(df) # 取得編輯過之內容
st.subheader("編輯過的成績單")
st.dataframe(edited_df)
結果如下 :
可見上面表格中李四的英文成績被改成 76 後也顯示在底下的表格中, 任何更改都會即時顯示在下方的表格中.
沒有留言 :
張貼留言