📊 Dash dcc.Graph 完整教學：打造互動式圖表應用程式

Dash 是由 Plotly 所開發的 Python Web 應用框架，用來快速建構互動式資料視覺化應用。dcc.Graph 是 Dash 中的核心元件之一，用來顯示圖表（基於 Plotly 的視覺化功能），支援互動操作如滑鼠移動、點擊、縮放等。

📌 什麼是 dcc.Graph？

dcc.Graph 是 Dash Core Components 中的視覺化元件，主要用來嵌入 Plotly 圖表。你可以使用任何 Plotly 的圖表格式（line, bar, pie, scatter, heatmap 等）來呈現資料。

🔧 安裝 Dash

pip install dash

🧠 基本語法

import dash_core_components as dcc

dcc.Graph(
    id='my-graph',
    figure={
        'data': [...],     # 圖表資料（如散佈圖、折線圖）
        'layout': {...}    # 視覺佈局（標題、軸線、大小）
    }
)

🟢 範例一：基本折線圖

python
import dash
from dash import dcc
from dash import html
import plotly.graph_objs as go

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("折線圖範例"),
    dcc.Graph(
        id='line-chart',
        figure={
            'data': [
                go.Scatter(x=[1, 2, 3, 4], y=[10, 15, 13, 17], mode='lines+markers', name='A線'),
                go.Scatter(x=[1, 2, 3, 4], y=[16, 5, 11, 9], mode='lines', name='B線')
            ],
            'layout': go.Layout(
                title='簡單折線圖',
                xaxis={'title': 'X軸'},
                yaxis={'title': 'Y軸'}
            )
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

🟠 範例二：互動式點擊事件（點圖時顯示資訊）

import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import pandas as pd

# 建立資料
df = px.data.iris()

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id='scatter-plot',
              figure=px.scatter(df, x="sepal_width", y="sepal_length", color="species")),
    html.Div(id='click-output')
])

@app.callback(
    Output('click-output', 'children'),
    Input('scatter-plot', 'clickData')
)
def display_click_data(clickData):
    if clickData:
        point = clickData['points'][0]
        return f"你點選的是：({point['x']}, {point['y']})，種類為：{point['customdata'] if 'customdata' in point else '未知'}"
    return "尚未點選任何點"

if __name__ == '__main__':
    app.run_server(debug=True)

🔄 常用屬性說明