如何使用Plotly和Dash進行資料視覺化

本文分享自華為雲社群《從資料到部署使用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應用部署到生產環境中，並使其在生產環境中更加健壯和可靠，為使用者提供優質的服務和體驗。

點選關注，第一時間瞭解華為雲新鮮技術~