Dash 是由 Plotly 所開發的 Python Web 應用框架，用來快速建構互動式資料視覺化應用。dcc.Graph 是 Dash 中的核心元件之一，用來顯示圖表（基於 Plotly 的視覺化功能），支援互動操作如滑鼠移動、點擊、縮放等。
📌 什麼是 dcc.Graph？
dcc.Graph 是 Dash Core Components 中的視覺化元件，主要用來嵌入 Plotly 圖表。你可以使用任何 Plotly 的圖表格式（line, bar, pie, scatter, heatmap 等）來呈現資料。🔧 安裝 Dash
如果你尚未安裝 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)
🔄 常用屬性說明
