本文分享自華為雲社群《從資料到部署使用Plotly和Dash實現資料視覺化與生產環境部署》，作者： 檸檬味擁抱。
資料視覺化是資料分析中至關重要的一環，它能夠幫助我們更直觀地理解資料並發現隱藏的模式和趨勢。在Python中，有許多強大的工具可以用來進行資料視覺化，其中Plotly和Dash是兩個備受歡迎的選擇。Plotly提供了豐富多樣的互動式繪圖功能，而Dash則是一個用於構建互動式Web應用的Python框架。本文將介紹如何使用Plotly和Dash進行資料視覺化，並透過案例程式碼展示其應用。
安裝Plotly與Dash
首先，我們需要安裝Plotly和Dash庫。你可以透過以下命令使用pip來安裝它們：
pip install plotly dash
安裝完成後，我們就可以開始使用這兩個庫了。
案例程式碼：簡單的資料視覺化應用
讓我們以一個簡單的例子開始，假設我們有一些關於銷售資料的CSV檔案，我們想要建立一個互動式的圖表來視覺化這些資料，並將其部署為一個Web應用。首先，我們需要匯入必要的庫：
import dash from dash import dcc, html import plotly.express as px import pandas as pd # 讀取資料 df = pd.read_csv('sales_data.csv') # 建立Dash應用 app = dash.Dash(__name__) # 佈局 app.layout = html.Div([ html.H1("銷售資料視覺化"), dcc.Graph( id='sales-graph' ) ]) # 回撥函式 @app.callback( dash.dependencies.Output('sales-graph', 'figure'), [dash.dependencies.Input('sales-graph', 'value')] ) def update_graph(selected_year): filtered_df = df[df['Year'] == selected_year] fig = px.bar(filtered_df, x='Month', y='Sales', title=f'銷售資料 - {selected_year}') return fig # 啟動應用 if __name__ == '__main__': app.run_server(debug=True)
在這個例子中，我們首先讀取了名為sales_data.csv的CSV檔案，然後建立了一個Dash應用。在應用的佈局中，我們定義了一個標題和一個空的圖表區域。然後，我們設定了一個回撥函式，當使用者選擇不同的年份時，圖表將會更新以顯示相應年份的銷售資料。最後，我們透過呼叫run_server方法來啟動應用。
確保你的sales_data.csv檔案包含了必要的資料欄位（比如Year、Month和Sales），這樣程式碼才能正常執行。
案例程式碼：高階資料視覺化與互動
在上一個案例中，我們展示瞭如何使用Dash和Plotly建立一個簡單的資料視覺化應用。現在，讓我們進一步探索一些高階功能，比如新增更多互動性和定製化。
假設我們想要展示銷售資料的趨勢，並允許使用者透過選擇不同的產品類別來檢視不同的趨勢。我們可以透過下面的程式碼來實現這個功能：
import dash from dash import dcc, html import plotly.express as px import pandas as pd # 讀取資料 df = pd.read_csv('sales_data.csv') # 建立Dash應用 app = dash.Dash(__name__) # 佈局 app.layout = html.Div([ html.H1("銷售資料趨勢"), dcc.Dropdown( id='product-dropdown', options=[ {'label': '產品A', 'value': 'Product A'}, {'label': '產品B', 'value': 'Product B'}, {'label': '產品C', 'value': 'Product C'} ], value='Product A' ), dcc.Graph( id='sales-trend' ) ]) # 回撥函式 @app.callback( dash.dependencies.Output('sales-trend', 'figure'), [dash.dependencies.Input('product-dropdown', 'value')] ) def update_trend(selected_product): filtered_df = df[df['Product'] == selected_product] fig = px.line(filtered_df, x='Month', y='Sales', title=f'{selected_product}銷售趨勢') return fig # 啟動應用 if __name__ == '__main__': app.run_server(debug=True)
在這個例子中，我們新增了一個下拉選單，允許使用者選擇不同的產品類別。當使用者選擇不同的產品後，圖表將會更新以顯示所選產品的銷售趨勢。這樣，使用者就可以更靈活地探索不同產品的銷售情況。
除了簡單的折線圖外，Plotly還提供了豐富的圖表型別和定製選項，可以滿足更多複雜的視覺化需求。Dash則允許我們構建互動式的Web應用，並透過回撥函式實現圖表的動態更新，為使用者提供更好的體驗。
新增互動性與樣式美化
在上述案例中，我們展示瞭如何使用Dash和Plotly建立資料視覺化應用，並提供了基本的互動功能。現在，讓我們進一步新增一些互動性和樣式美化，使我們的應用更加吸引人和易於使用。
import dash from dash import dcc, html, callback_context import plotly.express as px import pandas as pd # 讀取資料 df = pd.read_csv('sales_data.csv') # 獲取唯一的產品列表 available_products = df['Product'].unique() # 建立Dash應用 app = dash.Dash(__name__) # 應用樣式 app.layout = html.Div([ html.H1("銷售資料趨勢", style={'textAlign': 'center'}), html.Div([ html.Label("選擇產品："), dcc.Dropdown( id='product-dropdown', options=[{'label': product, 'value': product} for product in available_products], value=available_products[0] ) ], style={'width': '50%', 'margin': 'auto', 'textAlign': 'center'}), dcc.Graph( id='sales-trend', config={'displayModeBar': False} # 禁用圖表的模式欄 ) ], style={'padding': '20px'}) # 回撥函式 @app.callback( dash.dependencies.Output('sales-trend', 'figure'), [dash.dependencies.Input('product-dropdown', 'value')] ) def update_trend(selected_product): filtered_df = df[df['Product'] == selected_product] fig = px.line(filtered_df, x='Month', y='Sales', title=f'{selected_product}銷售趨勢') return fig # 啟動應用 if __name__ == '__main__': app.run_server(debug=True)
在這個例子中，我們新增了一些樣式以使應用看起來更吸引人。我們設定了標題居中顯示，並在產品下拉選單週圍新增了一些空白空間以增加布局的美觀性。此外，我們還禁用了圖表的模式欄，以簡化使用者介面。
透過這些改進，我們的應用現在不僅提供了強大的互動式資料視覺化功能，而且具有更好的外觀和使用者體驗。這將使使用者更願意使用我們的應用來探索資料，並從中獲得有價值的見解。
部署至生產環境
在完成資料視覺化應用的開發之後，我們通常希望將應用部署到生產環境中，以便其他使用者能夠訪問和使用。在本節中，我們將討論如何將我們的Dash應用部署到生產伺服器上。
使用Gunicorn和Nginx
Gunicorn是一個Python WSGI(HTTP伺服器) HTTP伺服器，它能夠處理來自Web應用的HTTP請求。Nginx則是一個高效能的HTTP和反向代理伺服器，通常用於處理靜態檔案和負載均衡。
首先，我們需要安裝Gunicorn和Nginx：
pip install gunicorn sudo apt-get install nginx
接下來，我們使用Gunicorn來執行我們的Dash應用：
gunicorn -w 4 -b 0.0.0.0:8050 your_app:app
這將在本地啟動Gunicorn伺服器，並將Dash應用執行在8050埠上。接下來，我們需要配置Nginx來作為反向代理，將HTTP請求轉發到Gunicorn伺服器上。
配置Nginx
在Nginx的配置檔案中新增以下內容：
server { listen 80; server_name your_domain.com; location / { proxy_pass http://127.0.0.1:8050; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }
將your_domain.com替換為你的域名。然後重新載入Nginx配置：
sudo systemctl reload nginx
現在，你的Dash應用已經成功部署到生產環境中，並且可以透過你的域名訪問了。
使用HTTPS
為了提高安全性，我們還可以配置Nginx來使用HTTPS協議。你需要獲取SSL證書並將其配置到Nginx中。一種簡單的方法是使用Let’s Encrypt來獲取免費的SSL證書。以下是一個簡單的配置示例：
server { listen 80; server_name your_domain.com; location / { return 301 https://$host$request_uri; } } server { listen 443 ssl; server_name your_domain.com; ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem; location / { proxy_pass http://127.0.0.1:8050; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }
這樣配置後，你的Dash應用將透過HTTPS協議提供服務，並且所有的HTTP請求都會被重定向到HTTPS。
整合使用者認證和許可權管理
在某些情況下，你可能希望限制對資料視覺化應用的訪問，只允許特定使用者或使用者組訪問。為了實現這一點，我們可以整合使用者認證和許可權管理系統。
使用基本認證
一種簡單的方法是使用基本認證（Basic Authentication）。你可以在Nginx中配置基本認證，要求使用者在訪問應用之前提供使用者名稱和密碼。以下是一個示例Nginx配置：
server { listen 443 ssl; server_name your_domain.com; ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem; location / { auth_basic "Restricted Access"; auth_basic_user_file /etc/nginx/.htpasswd; proxy_pass http://127.0.0.1:8050; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }
在這個配置中，我們使用auth_basic指令啟用基本認證，並指定了一個密碼檔案/etc/nginx/.htpasswd。你需要使用htpasswd工具建立這個密碼檔案，並向其中新增使用者名稱和密碼。
使用OAuth認證
另一種常見的方法是使用OAuth認證。透過OAuth，你可以將使用者的認證過程委託給第三方身份提供者，如Google、GitHub等。一旦使用者透過第三方身份提供者認證成功，他們就可以訪問你的應用。
你可以使用Dash的dash-auth庫來實現OAuth認證。該庫提供了一種簡單的方式來整合多種OAuth提供者，並限制對Dash應用的訪問。
新增許可權管理
除了認證之外，你可能還希望對使用者進行授權，以確定他們是否有權訪問特定的資料或功能。一種常見的方法是在應用中實現角色基礎的訪問控制（Role-Based Access Control，RBAC）系統。透過RBAC，你可以將使用者分配到不同的角色，並在應用中限制不同角色的訪問許可權。
你可以在Dash應用中實現RBAC系統，根據使用者的角色來決定他們是否有權執行特定操作。這可能涉及到在使用者登入時檢查他們的角色，並根據角色動態地調整應用中的功能和資料訪問許可權。
日誌記錄和錯誤處理
在部署生產環境的應用時，日誌記錄和錯誤處理是非常重要的。良好的日誌記錄可以幫助你追蹤應用的執行情況，並及時發現和解決問題。錯誤處理能夠提高應用的穩定性，減少因錯誤而導致的服務中斷。
配置日誌記錄
首先，讓我們配置應用的日誌記錄。Dash應用通常會輸出日誌到stdout或stderr，我們可以透過重定向這些日誌到一個檔案來進行記錄。我們還可以使用Python的logging模組來實現更高階的日誌記錄。
import logging logging.basicConfig(filename='app.log', level=logging.INFO)
在Dash應用中新增上述程式碼將會把日誌記錄到名為app.log的檔案中，並設定記錄級別為INFO。你可以根據需要調整日誌級別，以便記錄不同程度的資訊。
錯誤處理
另一個重要的方面是錯誤處理。當應用發生錯誤時，我們希望能夠捕獲並記錄這些錯誤，同時向使用者提供友好的錯誤資訊。
在Dash應用中，你可以使用try-except塊來捕獲異常，並在發生異常時返回一個錯誤頁面或顯示一條友好的錯誤訊息。
@app.server.errorhandler(Exception) def handle_error(e): logging.error(f'An error occurred: {str(e)}') return html.H1("Oops! Something went wrong."), 500
在上述程式碼中，我們定義了一個錯誤處理函式handle_error，它捕獲了所有的異常。當發生異常時，它會將錯誤資訊記錄到日誌中，並返回一個包含錯誤訊息的頁面給使用者。
透過良好的日誌記錄和錯誤處理，我們可以更好地瞭解應用的執行情況，並在發生錯誤時採取相應的措施來保障應用的穩定性和可靠性。
監控和效能最佳化
最後，一旦應用部署到生產環境中，我們還需要定期監控應用的效能，並採取措施來最佳化效能。這包括監控應用的響應時間、記憶體使用情況、CPU負載等指標，並根據監控結果進行最佳化。
你可以使用監控工具如Prometheus、Grafana等來監控應用的效能指標，並根據監控結果進行調整和最佳化。
總結
本文詳細介紹了將Dash應用部署到生產環境的關鍵步驟和必要措施。首先，我們討論了使用Gunicorn和Nginx來部署Dash應用的方法，並展示瞭如何透過HTTPS協議提高應用的安全性。接著，我們探討了如何整合使用者認證和許可權管理系統，以及如何配置日誌記錄和錯誤處理，從而提高應用的穩定性和可靠性。最後，我們強調了監控和效能最佳化的重要性，並提出了一些監控工具和最佳化方法。透過這些措施，我們可以將Dash應用部署到生產環境中，並使其在生產環境中更加健壯和可靠，為使用者提供優質的服務和體驗。
點選關注，第一時間瞭解華為雲新鮮技術~