在實(shí)現(xiàn)了基本的畫(huà)圖后，就可以開(kāi)始對(duì)圖像進(jìn)行更多的處理了，Matplotlib畫(huà)出來(lái)的原始圖像并不是很美觀，但是也足夠進(jìn)行觀察了（但是我就是想讓它高級(jí)一點(diǎn)，嘿嘿嘿）；側(cè)邊欄下方（橙線流程）就是通過(guò)其他的變量去對(duì)圖表的各種屬性進(jìn)行調(diào)整，從而達(dá)到交互式圖表的效果。

三、代碼部分

3.1 省流版（黃線流程）

首先導(dǎo)入庫(kù)

import numpy as np
import pandas as pd
import streamlit as st
from sklearn.datasets import load_iris
from sklearn.cluster import KMeans
import matplotlib.pyplot as plt
from sklearn.preprocessing import MinMaxScaler

然后在終端輸入? ? ? ? ?Streamlit run (你的文件名).py

我用的是pycharm，如果是使用Jupyter或者Spyder的小伙伴，可以通過(guò)Win + R打開(kāi)命令窗口，輸入 cmd，打開(kāi)小黑窗后，讀取你的Streamlit文件的路徑

比如你的.py文件在桌面，就在小黑窗輸入? ? cd?C:\Users\Desktop? ? ? ? （路徑因人而異）

然后再輸入? ?streamlit run?(你的文件名).py? ?就可以啦

接著開(kāi)始構(gòu)建頁(yè)面內(nèi)容（倒數(shù)兩行的賦值就是第1條黃線<接受模型參數(shù)>的操作）

# streamlit的頁(yè)面布局順序是與代碼位置一致的，因此我先在最前面加一個(gè)大標(biāo)題
st.title('K-Means交互式組件'.center(33, '-'))

# 設(shè)置側(cè)邊欄     Tips:所有側(cè)邊欄的元素都必須在前面加上 sidebar，不然會(huì)在主頁(yè)顯示
st.sidebar.expander('')     # expander必須接受一個(gè) label參數(shù)，我這里留了一個(gè)空白
st.sidebar.subheader('在下方調(diào)節(jié)你的參數(shù)')       # 副標(biāo)題
# st.selectbox:創(chuàng)造一個(gè)下拉選擇框的單選題，接收參數(shù): (題目名稱， 題目選項(xiàng))
cluster_class = st.sidebar.selectbox('1.聚類數(shù)量:', list(range(2, 10)))     # 選擇聚類中心，并賦值
minmaxscaler = st.sidebar.radio('2.是否歸一化:', ['是', '否'])         # 選擇是否標(biāo)準(zhǔn)化

?這樣網(wǎng)頁(yè)最原始的模樣就有了（????一定要賦值，不賦值的話，頁(yè)面選擇是不會(huì)返回結(jié)果的）

然后就是數(shù)據(jù)、模型的調(diào)用和訓(xùn)練

# 調(diào)用數(shù)據(jù)，經(jīng)典艾瑞斯
iris = load_iris()
data = iris['data']

if minmaxscaler == '是':                   # 根據(jù)頁(yè)面中的選擇進(jìn)行判斷是否歸一化
    model_mms = MinMaxScaler().fit(data)   # 調(diào)用歸一標(biāo)準(zhǔn)化方法（也可以自己寫(xiě)一個(gè)函數(shù)處理）
    data = model_mms.transform(data)       # 對(duì) data進(jìn)行標(biāo)準(zhǔn)化

# 調(diào)用模型，這里用K-Means
model = KMeans(n_clusters=cluster_class).fit(data)      # 這里的 cluster_class就是剛剛選框接收到的值（聚成幾類）
data_done = np.c_[data, model.labels_]     # 將結(jié)果和數(shù)據(jù)合并，model.lables:模型訓(xùn)練得到的標(biāo)簽

這時(shí)模型已經(jīng)訓(xùn)練好了，可以用st.dataframe(data_done)查看結(jié)果??（第“4”列就是聚類結(jié)果）

?最后通過(guò)matplotlib.pyplot畫(huà)圖

fig, ax = plt.subplots()            # 創(chuàng)建畫(huà)布與子圖
for i in set(model.labels_):        # 選中每一個(gè)聚出來(lái)的類
    index = data_done[:, -1] == i   # 得到每一個(gè)類對(duì)應(yīng)的布爾值索引
    x = data_done[index, 0]         # 第一特征：花瓣長(zhǎng)    Tips:iris有四個(gè)特征，自己手動(dòng)選兩個(gè)
    y = data_done[index, 1]         # 第二特征：花瓣寬
    ax.scatter(x, y)                # 做出散點(diǎn)圖
st.pyplot(fig)                      # 畫(huà)出來(lái)！

成功！

省流版完整代碼如下：

import numpy as np
import pandas as pd
import streamlit as st
from sklearn.datasets import load_iris
from sklearn.cluster import KMeans
import matplotlib.pyplot as plt
from sklearn.preprocessing import MinMaxScaler

# streamlit的頁(yè)面布局順序是與代碼位置一致的，因此我先在最前面加一個(gè)大標(biāo)題
st.title('K-Means交互式組件'.center(33, '-'))

# 調(diào)用數(shù)據(jù)，經(jīng)典艾瑞斯
iris = load_iris()
data = iris['data']

# ---------黃線第一步：接受模型參數(shù)----------
# 設(shè)置側(cè)邊欄     Tips:所有側(cè)邊欄的元素都必須在前面加上 sidebar，不然會(huì)在主頁(yè)顯示
st.sidebar.expander('')     # expander必須接受一個(gè) label參數(shù)，我這里留了一個(gè)空白
st.sidebar.subheader('在下方調(diào)節(jié)你的參數(shù)')       # 副標(biāo)題
# st.selectbox:創(chuàng)造一個(gè)下拉選擇框的單選題，接收參數(shù): (題目名稱， 題目選項(xiàng))
cluster_class = st.sidebar.selectbox('1.聚類數(shù)量:', list(range(2, 10)))     # 選擇聚類中心，并賦值

# st.radio:創(chuàng)造一個(gè)點(diǎn)擊的單選題，接收參數(shù)與 selectbox一樣
minmaxscaler = st.sidebar.radio('2.是否歸一化:', ['是', '否'])         # 選擇是否標(biāo)準(zhǔn)化
if minmaxscaler == '是':                                             # 進(jìn)行判斷
    model_mms = MinMaxScaler().fit(data)                # 調(diào)用歸一標(biāo)準(zhǔn)化方法（也可以自己寫(xiě)一個(gè)函數(shù)處理）
    data = model_mms.transform(data)                    # 對(duì) data進(jìn)行標(biāo)準(zhǔn)化

# ---------灰色磚頭：調(diào)用 K-Means進(jìn)行訓(xùn)練----------
model = KMeans(n_clusters=cluster_class).fit(data)      # 這里的 cluster_class就是第 18行選擇框接收到的值
data_done = np.c_[data, model.labels_]                  # 將結(jié)果和數(shù)據(jù)合并，model.lables:模型訓(xùn)練得到的標(biāo)簽

# ---------黃線第二步：傳遞訓(xùn)練結(jié)果并畫(huà)圖----------
fig, ax = plt.subplots()            # 創(chuàng)建畫(huà)布與子圖
for i in set(model.labels_):
    index = data_done[:, -1] == i   # 每一個(gè)類對(duì)應(yīng)的索引
    x = data_done[index, 0]         # 第一個(gè)特征：花瓣長(zhǎng)度    Tips:iris有四個(gè)特征，自己選兩個(gè)
    y = data_done[index, 1]         # 第二個(gè)特征：花瓣寬度
    ax.scatter(x, y)                # 做出散點(diǎn)圖
st.pyplot(fig)                      # 畫(huà)出來(lái)！

3.2完整版（黃線+紅線）

完整版就是在省流版基礎(chǔ)上加了許多可以調(diào)整畫(huà)圖參數(shù)的組件，以及頁(yè)面裝飾，但是也存在著一些問(wèn)題，我會(huì)在結(jié)尾給出。

相較于省流版，完整版頁(yè)面加入了以下組件：

這就是超級(jí)會(huì)員與普通會(huì)員噠！

接下來(lái)按照順序一個(gè)一個(gè)進(jìn)行代碼介紹

? ? ? ? 1.“展示特征” 按鈕

????????省流版的展示特征必須要在后臺(tái)代碼塊中修改參數(shù)，而在iris數(shù)據(jù)集中，特征有4個(gè)：花瓣長(zhǎng)、花瓣寬、花萼長(zhǎng)、花萼寬。因此在展示的時(shí)候如果需要修改特征，就得通過(guò)新的選擇框進(jìn)行賦值，展示。代碼如下：

figure = ['花瓣長(zhǎng)度', '花瓣寬度','花萼長(zhǎng)度','花萼寬度']
figure1 = st.sidebar.selectbox('3.選擇第一類展示特征:', ['花瓣長(zhǎng)度', '花瓣寬度','花萼長(zhǎng)度','花萼寬度'])
figure2 = st.sidebar.selectbox('4.選擇第二類展示特征:', ['花瓣長(zhǎng)度', '花瓣寬度','花萼長(zhǎng)度','花萼寬度'])

? ? ? ? figure1和figure2既是我們選擇后進(jìn)行賦值的變量，但是你的電腦可看不懂 ‘花瓣長(zhǎng)度’ 是什么意思，因此需要建立一個(gè)和選擇框一樣的列表（figure）來(lái)進(jìn)行索引， 因此畫(huà)圖部分的參數(shù)也需要作對(duì)應(yīng)修改：

原代碼
#for i in set(model.labels_):
#    index = data_done[:, -1] == i   # 每一個(gè)類對(duì)應(yīng)的索引
#    x = data_done[index, 0]         # 第一個(gè)特征：花瓣長(zhǎng)度    Tips:iris有四個(gè)特征，自己選兩個(gè)
#    y = data_done[index, 1]         # 第二個(gè)特征：花瓣寬度
#    ax.scatter(x, y)                # 做出散點(diǎn)圖

修改后的代碼
for i in set(model.labels_):
    index = data_done[:, -1] == i
    x = data_done[index, figure.index(figure1)] 

    # e.g.第 0類特征是花瓣長(zhǎng)度，通過(guò)頁(yè)面選擇使 figure1賦值為'花瓣長(zhǎng)度'
    # 然后通過(guò)列表（figure）的索引得到'花瓣長(zhǎng)度'是第 0類特征，這樣就達(dá)到了和原代碼一樣的效果

    y = data_done[index, figure.index(figure2)]    # 與 figure1同理
    ax.scatter(x, y)
st.pyplot(fig)

? ? ? ? 2.“第幾類顏色” 的按鈕、?“第幾類形狀” 的按鈕

? ? ? ? 這個(gè)按鈕設(shè)置，首先要確定的是“總共有幾類”，而分成幾類是由前面通過(guò)選擇框賦值給變量cluster_class確定的。因此只需要加一個(gè)for循環(huán)，就可以實(shí)現(xiàn)按鈕數(shù)量跟隨聚類數(shù)量一起變化啦：

for i in range(1, cluster_class +1):    # 第1類 - 第k類 的按鈕
    col1, col2 = st.sidebar.columns(2)  # st.columns(n):將一行分成n列
    with col1:                          # 這里放第一列的東西
        st.selectbox(f'第{i}類顏色', ['黑色', '銀色','亮紅色','棕色','橙色','金黃色','黃色','天藍(lán)色','紫色']))
    with col2:  #第二列的東西
        st.selectbox(f'第{i}類形狀', ['圓形', '朝下三角', '朝上三角形', '正方形', '五邊形', '星型', '六角形', '+號(hào)', 'x號(hào)', '小型菱形']))

? ? ? ? ?可以看到頁(yè)面部分已經(jīng)沒(méi)有問(wèn)題了，接下來(lái)是賦值部分，由于聚類的數(shù)量會(huì)變化，而創(chuàng)建的變量無(wú)法做到跟隨數(shù)量變化，因此這里我采用了DataFrame來(lái)記錄變量。由于Streamlit的頁(yè)面每進(jìn)行一次操作就會(huì)刷新一次，因此每次DataFrame的內(nèi)容都會(huì)被重新清空賦值，不需要擔(dān)心數(shù)據(jù)重復(fù)的情況。修改后的代碼如下：

choice = pd.DataFrame([])               # 先創(chuàng)建一個(gè)空的DataFrame
for i in range(1, cluster_class +1):
    col1, col2 = st.sidebar.columns(2)  # 分成兩列
    with col1:
        # 給DataFrame的第i行，color列新增一條記錄
        choice.loc[i, 'color'] = trans(st.selectbox(f'第{i}類顏色', 
['黑色', '銀色','亮紅色','棕色','橙色','金黃色','黃色','天藍(lán)色','紫色']))

        # 給DataFrame的第i行，shape列新增一條記錄
    with col2:
        choice.loc[i, 'shape'] = trans(st.selectbox(f'第{i}類形狀', 
['圓形', '朝下三角', '朝上三角形', '正方形', '五邊形', '星型', '六角形', '+號(hào)', 'x號(hào)', '小型菱形']))

有朋友可能注意到trans，這是一個(gè)自定義函數(shù)，功能和上面的
figure.index(figure1)類似，就是根據(jù)賦值返回電腦可識(shí)別的字符，
trans的內(nèi)容在末尾完整版代碼已給出。

????????這樣就實(shí)現(xiàn)了不同類的賦值的記錄，然后把他放到matplotlib里面：

for i in set(model.labels_):
    index = data_done[:, -1] == i
    # 新增的代碼 ????
    color = choice.loc[i+1, 'color']
    shape = choice.loc[i+1, 'shape']
    # 新增的代碼 ????
    x = data_done[index, figure.index(figure1)]
    y = data_done[index, figure.index(figure2)]
    ax.scatter(x, y, c=color, marker=shape)    # 這里對(duì)應(yīng)地加入顏色和形狀的參數(shù)就可以了
st.pyplot(fig)

? ? ? ? 3.圖表元素

? ? ? ? 簡(jiǎn)簡(jiǎn)單單加幾行代碼給圖表美化一下：

for i in set(model.labels_):
    index = data_done[:, -1] == i
    color = choice.loc[i+1, 'color']
    shape = choice.loc[i+1, 'shape']
    x = data_done[index, figure.index(figure1)]         # 改選擇特征
    y = data_done[index, figure.index(figure2)]
    ax.scatter(x, y, c=color, marker=shape)
# 下面是新增的部分??????
# 設(shè)置字體
font_dict = dict(fontsize=16,        # 字體大小     
              color='maroon',        # 顏色
              family='SimHei',)      # 類型
# 設(shè)置x, y軸標(biāo)題
ax.set_xlabel(figure1, fontdict=font_dict)
ax.set_ylabel(figure2, fontdict=font_dict)

# 設(shè)置圖表標(biāo)題
ax.set_title('散點(diǎn)圖', fontdict=dict(fontsize=16, color='black', family='SimHei',))

# 設(shè)置圖例
ax.legend(set(model.labels_))

# 取消坐標(biāo)顯示
ax.set_xticks([])
ax.set_yticks([])

st.pyplot(fig)

? ? ? ? 4.頁(yè)面裝飾

? ? ? ? streamlit的st.markdown()提供了非常強(qiáng)大的功能，可以直接在里面寫(xiě)html或css?。。ǖ俏也欢@倆語(yǔ)言，霧），因此如果有學(xué)過(guò)網(wǎng)頁(yè)的小伙伴，可以自行修改頁(yè)面元素。

? ? ? ? 我在網(wǎng)上抄了一些能用的樣式，可以參考一下：

# 背景圖片的網(wǎng)址
img_url = 'https://img.zcool.cn/community/0156cb59439764a8012193a324fdaa.gif'

# 修改背景樣式
st.markdown('''<style>.css-fg4pbf{background-image:url(''' + img_url + ''');
background-size:100% 100%;background-attachment:fixed;}</style>
''', unsafe_allow_html=True) 

# 側(cè)邊欄樣式
st.markdown('''<style>#root > div:nth-child(1) > div > div > div > div >
section.css-1lcbmhc.e1fqkh3o3 > div.css-1adrfps.e1fqkh3o2
{background:rgba(255,255,255,0.5)}</style>''', unsafe_allow_html=True)         

# 底邊樣式  
st.markdown('''<style>#root > div:nth-child(1) > div > div > div > div >
section.main.css-1v3fvcr.egzxvld3 > div > div > div
{background-size:100% 100% ;background:rgba(207,207,207,0.9);
color:red; border-radius:5px;} </style>''', unsafe_allow_html=True)                  

請(qǐng)注意，一定要在st.markdown最后加 unsafe_allow_html=True ，不然代碼會(huì)直接在頁(yè)面上顯示                           

????????對(duì)比一下修改前后：

????????

? ? ? ? 雖然但是還是好看一點(diǎn)點(diǎn)吧！

成功！

完整版完整代碼如下：

import numpy as np
import pandas as pd
import streamlit as st
from sklearn.datasets import load_iris
from sklearn.cluster import KMeans
import matplotlib.pyplot as plt
from sklearn.preprocessing import MinMaxScaler

img_url = 'https://img.zcool.cn/community/0156cb59439764a8012193a324fdaa.gif'       # 背景圖片的網(wǎng)址
st.markdown('''<style>.css-fg4pbf{background-image:url(''' + img_url + ''');
background-size:100% 100%;background-attachment:fixed;}</style>
''', unsafe_allow_html=True)                                                        # 修改背景樣式

iris = load_iris()
data = iris['data']

st.title('K-Means交互式組件'.center(33, '-'))

st.sidebar.expander('')
st.sidebar.subheader('在下方調(diào)節(jié)你的參數(shù)')
cluster_class = st.sidebar.selectbox('1.聚類數(shù)量:', list(range(2, 10)))

minmaxscaler = st.sidebar.radio('2.是否歸一化:', ['是', '否'])
if minmaxscaler == '是':
    model_mms = MinMaxScaler().fit(data)
    data = model_mms.transform(data)

figure = ['花瓣長(zhǎng)度', '花瓣寬度','花萼長(zhǎng)度','花萼寬度']
figure1 = st.sidebar.selectbox('3.選擇第一類展示特征:', ['花瓣長(zhǎng)度', '花瓣寬度','花萼長(zhǎng)度','花萼寬度'])
figure2 = st.sidebar.selectbox('4.選擇第二類展示特征:', ['花瓣長(zhǎng)度', '花瓣寬度','花萼長(zhǎng)度','花萼寬度'])

def trans(select):
    if select == '黑色':
        return 'black'
    elif select == '銀色':
        return 'silver'
    elif select == '亮紅色':
        return 'lightcoral'
    elif select == '棕色':
        return 'brown'
    elif select == '橙色':
        return 'orange'
    elif select == '金黃色':
        return 'gold'
    elif select == '黃色':
        return 'yellow'
    elif select == '綠色':
        return 'lawngreen'
    elif select == '天藍(lán)色':
        return 'cyan'
    elif select == '紫色':
        return 'purple'
    elif select == '圓形':
        return 'o'
    elif select == '朝下三角':
        return 'v'
    elif select == '朝上三角形':
        return '^'
    elif select == '正方形':
        return 's'
    elif select == '五邊形':
        return 'p'
    elif select == '星型':
        return '*'
    elif select == '六角形':
        return 'h'
    elif select == '+號(hào)':
        return '+'
    elif select == 'x號(hào)':
        return 'x'
    elif select == '小型菱形':
        return 'd'

choice = pd.DataFrame([])
for i in range(1, cluster_class +1):
    col1, col2 = st.sidebar.columns(2)  # 分成兩列
    with col1:  #第一列的東西
        choice.loc[i, 'color'] = trans(st.selectbox(f'第{i}類顏色', ['黑色', '銀色','亮紅色','棕色','橙色','金黃色','黃色',
                                                                 '天藍(lán)色','紫色']))
    with col2:  #第二列的東西
        choice.loc[i, 'shape'] = trans(st.selectbox(f'第{i}類形狀', ['圓形', '朝下三角', '朝上三角形', '正方形', '五邊形', '星型'
            , '六角形', '+號(hào)', 'x號(hào)', '小型菱形']))

model = KMeans(n_clusters=cluster_class).fit(data)
data_done = np.c_[data, model.labels_]


# st.write(model.labels_)
# st.write(model.cluster_centers_)

fig, ax = plt.subplots()
for i in set(model.labels_):
    index = data_done[:, -1] == i
    color = choice.loc[i+1, 'color']
    shape = choice.loc[i+1, 'shape']
    x = data_done[index, figure.index(figure1)]         # 改選擇特征
    y = data_done[index, figure.index(figure2)]
    ax.scatter(x, y, c=color, marker=shape)
# plt.axis('off')
font_dict = dict(fontsize=16,
              color='maroon',
              family='SimHei',)
ax.set_xlabel(figure1, fontdict=font_dict)
ax.set_ylabel(figure2, fontdict=font_dict)
ax.set_title('散點(diǎn)圖', fontdict=dict(fontsize=16, color='black', family='SimHei',))
ax.legend(set(model.labels_))
ax.set_xticks([])
ax.set_yticks([])
# ax.tick_params(bottom=False,top=False,left=False,right=False)
st.pyplot(fig)

st.markdown('''<style>#root > div:nth-child(1) > div > div > div > div >
 section.css-1lcbmhc.e1fqkh3o3 > div.css-1adrfps.e1fqkh3o2
 {background:rgba(255,255,255,0.5)}</style>''', unsafe_allow_html=True)         # 側(cè)邊欄樣式

st.markdown('''<style>#root > div:nth-child(1) > div > div > div > div >
section.main.css-1v3fvcr.egzxvld3 > div > div > div
 {background-size:100% 100% ;background:rgba(207,207,207,0.9);
color:red; border-radius:5px;} </style>''', unsafe_allow_html=True)             # 底邊樣式

?四、缺點(diǎn)

目前已知的缺點(diǎn)就是每次打開(kāi)網(wǎng)頁(yè)，所有的選項(xiàng)都是默認(rèn)的第一個(gè)，因此會(huì)出現(xiàn)全是小黑圓點(diǎn)的y=x線條hhhhh，需要自己一個(gè)一個(gè)去改；另外在修改的過(guò)程中，由于每選項(xiàng)一次，頁(yè)面都會(huì)刷新一次，因此K-Means的聚類結(jié)果也會(huì)重新計(jì)算一次，比如label是1的花，可能刷新一次后label變成了2（還是同一個(gè)類，但是標(biāo)簽變了），這就導(dǎo)致圖表中相同類點(diǎn)的款式會(huì)變來(lái)變?nèi)?/strong>??