Dash 数据可视化与 Plotly 集成（手把手讲解）

Dash 数据可视化与 Plotly 集成实战

快速解决

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

app = dash.Dash(__name__)
df = pd.DataFrame({
    "x": [1, 2, 3, 4, 5],
    "y": [10, 11, 12, 13, 14],
    "category": ["A", "B", "A", "B", "A"]
})
fig = px.scatter(df, x="x", y="y", color="category")
app.layout = html.Div([
    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

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

常用方法

详细说明

基本图表集成

import dash
from dash import dcc, html
import plotly.express as px

app = dash.Dash(__name__)
df = px.data.iris()
fig = px.line(df, x='sepal_width', y='sepal_length', title='鸢尾花数据')
app.layout = html.Div([
    html.H1("Plotly Dash集成示例"),
    dcc.Graph(
        id='line-plot',
        figure=fig
    )
])

多图表联动布局

from dash import dcc, html
import plotly.graph_objects as go

app.layout = html.Div([
    # 左侧图表
    dcc.Graph(
        id='left-plot',
        figure=go.Figure(data=go.Scatter(x=[1,2], y=[2,3]))
    ),
    # 右侧图表
    dcc.Graph(
        id='right-plot',
        figure=go.Figure(data=go.Bar(x=['A','B'], y=[10,20]))
    )
])

动态参数绑定

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

app = dash.Dash(__name__)
df = pd.DataFrame({'x': [1,2,3], 'y': [2,4,5]})

app.layout = html.Div([
    # 可交互下拉框
    dcc.Dropdown(
        id='graph-type',
        options=[
            {'label': '折线图', 'value': 'line'},
            {'label': '柱状图', 'value': 'bar'}
        ],
        value='line'
    ),
    # 根据选择动态渲染图表
    dcc.Graph(id='dynamic-plot')
])

@app.callback(
    Output('dynamic-plot', 'figure'),
    Input('graph-type', 'value')
)
def update_graph(graph_type):
    if graph_type == 'line':
        return px.line(df, x='x', y='y')
    else:
        return px.bar(df, x='x', y='y')

高级技巧

实时数据更新

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

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Graph(id='live-update'),
    dcc.Interval(
        id='interval-component',
        interval=1000,  # 每秒更新一次
        n_intervals=0
    )
])

@app.callback(
    Output('live-update', 'figure'),
    Input('interval-component', 'n_intervals')
)
def update_data(n):
    # 模拟实时数据生成
    new_df = pd.DataFrame({
        'x': list(range(n%5 + 1)),
        'y': [random.random() for _ in range(n%5 + 1)]
    })
    return px.line(new_df, x='x', y='y')

多维数据可视化

fig = px.scatter_3d(df, x='sepal_length', y='sepal_width', z='petal_width',
                   color='petal_length', size='sepal_length',
                   hover_data=['species'])
app.layout = html.Div([
    dcc.Graph(figure=fig)
])

常见问题

Q: Plotly图表在Dash中无法显示？
A: 检查是否遗漏dcc.Graph组件，或figure对象是否包含有效数据。确保app.layout已正确定义。

Q: 如何调整图表的配色方案？
A: 使用fig.update_traces(marker_color='blue')修改单一图表颜色，或通过fig.update_layout(template='plotly_dark')切换整体主题。

Q: 能否在图表中显示中文标签？
A: 需要设置中文字体路径：

fig.update_layout(
    font=dict(
        family="Microsoft YaHei",
        size=12
    )
)

并确保系统已安装对应字体。

总结

通过 Dash 与 Plotly 的无缝集成，开发者可快速构建交互式数据可视化应用，推荐使用 dcc.Graph 组件结合 Plotly Express 实现高效开发。