前言
資料分析的必經之路，通常就是先爬爬蟲，然後把資料畫成圖表，然後分析，網路上分享文一推，然而我在這邊也做相同的事情，不同的是使用Streamlit做個簡易的Dashboard。
Streamlit 簡易開發的程度差不多就跟味精一樣，不用什麼努力，只需簡單幾個code，就可以達成不錯的成果，是個迷人的工具。
但是，額外話，如果需要圖表跟圖表之間的互動，例如篩選圖表的內容再去另外一個圖表即時呈現，那樣的話我就會使用Dash。畢竟不同目的使用不同工具麻，炒飯就該拿鍋子，不要用什麼平底鍋，嗨壓…..
Streamlit的官方網頁-> https://www.streamlit.io/
成品
這是我用steamlit 做的簡易Stock Dashboard，但是我在這邊並不會細部說明這程式怎麼寫的， 因為內部我還有自己簡單寫一個股票爬蟲，還有牽扯到plotly，所以我先把streamlit概念介紹完，再大致說明我怎麼寫的與概念。
Code (github)
https://github.com/neutron0916/Streamlit_stock_chartStreamlit
Streamlit 概念
基本上就是import streamlit as st 之後，用st…去做元件的添加。
例如想要在
● 網頁上添加一個名為Streamlit的標題 → st.title(“Streamlit”)
● 網頁加入一個輸入數字的元件，並指派到input變數內 → input = st.number_input(“num”)
● 網頁上添加圖表(我這邊用plotly) →st.plotly_chart(plotly圖表物件)
● 更多詳見 https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py
概念大致上是這樣，非常簡單。然後，只要輸入元件有值的變更，整個程式就會重跑一次，並重新呈現，就是因為如此，才可以做到圖表隨著輸入的參數變化。
Streamlit 簡易說明
Start:
Terminal 內:
Step1 → pip install streamlit
Step2 → 寫好你的code
Step3 → streamlit run “你的程式.py”
然後就會出現以下畫面，再連上去網址就好。
有趣的是，你可以直接編輯你的程式，存檔之後，再去網頁重新整理(或是直接對網頁按R)，就可以重新跑你編輯好的程式。不需要用terminal 重新啟動
Streamlit 元件添加
基本上官網上的cheatsheet → https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py
已經跟你說明所有可以添加的元件了。
但是我就說明幾個常用的就好，
st.title(‘添加標題’)
#在網頁呈現 h1 大小的文字
st.header('副標題')
#在網頁呈現 h2 大小的文字st.write(‘寫上一些文字’)
#在網頁呈現文字a = st.number_input(label = '輸入一些數字', value = 預設值, step = 步數, max_value = 最大值, min_value = 最小值)
#在網頁創建數字輸入框，然後將輸入值指派到a變數內b = st.text_input('輸入一些文字')
#在網頁創建文字輸入框，然後將輸入值指派到b變數內c = st.selectbox('請選擇',options = ['A','B','C'])
#在網頁創建選擇框，然後將輸入值指派到c變數內st.dataframe(dataframe)
#在網頁將pandas的DF顯示出來
輸入元件error的出現
這邊要提一下如果兩個輸入框完全一模一樣會出錯
a = st.number_input(label = '請輸入數字')
b = st.number_input(label = '請輸入數字')這樣就會出錯，所以至少要改一下
a = st.number_input('請輸入數字1')
b = st.number_input('請輸入數字2')sidebar 元件
如果要將元件添加到就好網頁旁邊sidebar的話，很簡單，多加一個sidebar就好。例如
import streamlit as st
st.sidebar.header('在sidebar添加標題')
a = st.sidebar.number_input(label = '在sidebar輸入一些數字')
b = st.sidebar.text_input(label = '在sidebar輸入一些文字', value= '請在此輸入文字')
加入 if 運算
可以用if確定有一些輸入值之後再去做運算或是呈現。
因為只要輸入值有改變，程式就會重跑，所以a跟b 剛開始是0, 0 所以對python來說是a or b 是false，但輸入值改變之後，a跟 b 都不等於 0 的時候就是True了 ，也因為如此if 後面就有作用，就會出現在網頁上了。
import streamlit as stst.title('相加')
a = st.number_input(label = '請輸入數字1', step =1, value=0)
b = st.number_input(label = '請輸入數字2', step =1, value=0)# 確定a b 都有值之後 在輸出值
if a or b:
st.write('相加結果')
st.write(a+b)
圖表元件的加入
有很多種方式，但是st 自己內建的比較陽春。所以我是用plotly，然後再去用streamlit顯示。
import plotly.express as px
import streamlit as stdf = px.data.iris()st.dataframe(df)
#在網頁上呈現DFfig = px.scatter(df, x="sepal_width", y="sepal_length", color="species", size='petal_length', hover_data=['petal_width'])
#創造一個px scatter chart的物件st.plotly_chart(fig)
#在網頁上呈現plotly chart
快取的使用
因為每次只要有輸入值的改變，網頁都必須要重新跑，所以可以利用@st.cache() 的裝飾器，就可以將之前讀取過的資料放快取，然後下次如果輸入值沒變的情況下，就可以直接將之前的data讀取出來，速度會快上取多，尤其是如果你資料的讀取非常耗時的話。
但是這個裝飾器只能用在function上，所以就必須把拿取資料的方式改成def
import plotly.express as pximport streamlit as st@st.cache()
def get_data():
df = px.data.iris()
return df
#將讀取資料的方式變成function
#再利用st.cache()將資料放進快取內df = get_data()st.dataframe(df)fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species",size='petal_length', hover_data=['petal_width'])st.plotly_chart(fig)
整個streamlit 的簡介就到這邊。
Stock chart Dashboard開發的說明
經過以上的簡介應該streamlit都看得懂了，但是我就不說明plotly畫圖的部分，與爬蟲的使用了