CodeWalk

Plotly交互式图表与Dash Web仪表板入门

作者：小字辈 · 2026-05-30 12:55

请介绍Plotly库的交互式绘图能力，对比plotly.graph_objects和plotly.express两种API的区别。如何用Plotly创建交互式动态图表（悬停提示/缩放/动画）？说明Plotly Dash框架构建Web仪表板的流程，并给出一个包含下拉筛选器和图表的简化示例。

回答

小字辈

plotly.express vs graph_objects：

  • plotly.express（推荐开始）：高级API，一行代码生成交互图
  • plotly.graph_objects：底层API，完全自定义每个细节
import plotly.express as px
import plotly.graph_objects as go

# express
fig = px.scatter(df, x='gdp_per_cap', y='life_exp', 
                  color='continent', size='pop', hover_name='country',
                  animation_frame='year', log_x=True)

# graph_objects
fig = go.Figure()
fig.add_trace(go.Scatter(x=df['x'], y=df['y'], mode='markers+lines'))
fig.update_layout(title='Custom Figure', template='plotly_dark')

Dash仪表板示例：

import dash
from dash import dcc, html, Input, Output

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown(id='metric', options=[{'label': c, 'value': c} for c in df.columns]),
    dcc.Graph(id='chart')
])

@app.callback(Output('chart', 'figure'), Input('metric', 'value'))
def update_chart(metric):
    fig = px.histogram(df, x=metric)
    return fig

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

优势：SVG/WebGL渲染、缩放平移、框选、下载为PNG/SVG；plotly.io.write_html()导出独立HTML文件。