环境搭建与安装
准备工作与快速安装
在开始学习 Python 与 Plotly 的交互图表前，建议先建立一个干净的虚拟环境，以便管理依赖和版本。虚拟环境能避免与系统包冲突，确保后续步骤可重复。本文以常见的 Linux/Mash/Cygwin 环境为例，实际操作在 Windows 也类似。
为了实现从零基础到实战应用的完整学习路径，推荐使用 pip 进行包管理，并同时安装 JupyterLab，方便在笔记本中交互调试。下面给出基本命令，确保你具备网络环境和管理员权限。
一个简单的快速示例：使用 Plotly Express 与一个现成数据集来验证安装是否成功。运行以下代码即可看到一个基础交互图表：
import plotly.express as px
df = px.data.iris()
fig = px.scatter(df, x='sepal_length', y='sepal_width', color='species')
fig.show()Plotly 基础概念
交互图表的核心对象
在 Plotly 中，Figure 是图表的容器，Trace 指的是数据系列，Layout 定义外观与布局。理解这三者，是掌握 交互图表 的第一步。Plotly 通过这些对象实现悬停提示、缩放、放大、拖拽等交互功能。
如果你偏向快速上手，Plotly Express 提供简化接口，能用极少的代码创建常见图表类型。背后仍然使用 Figure 与 Trace 的概念，只是语法更友好。
下面给出一个同样的需求用两种方式实现的对比示例：先用 Graph Objects 手动组装，再用 Express 快速绘制。
import plotly.graph_objects as go
fig = go.Figure()
fig.add_trace(go.Bar(x=[1,2,3], y=[4,1,3]))
fig.add_trace(go.Bar(x=[1,2,3], y=[2,4,5]))
fig.update_layout(title='多条柱状图示例')
fig.show()import plotly.express as px
df = px.data.gapminder().query("year==2007")
fig = px.scatter(df, x='gdpPercap', y='lifeExp', color='continent', hover_name='country', size='pop')
fig.show()创建第一张交互图表
从数据到图形的简单流程
要创建第一张交互图表，通常流程是准备数据、选择图表类型、创建 Figure、并通过 fig.show() 展现。Plotly 的交互性体现在悬停提示、缩放、以及多图联动等能力上，非常适合探索性数据分析。
以一个简单的柱状图为例，展示不同类别的数值比较：你将看到悬停提示、放大/缩小、以及选区等交互效果。柱状图清晰表达分组差异，是初学者的友好起点。
尽管演示简短，但它演示了从数据准备到图表呈现的完整生命周期。你也可以将结果保存为静态或可分享的 HTML 文件，以便在网页或仪表盘中重用。
import plotly.express as px
df = px.data.tips()
fig = px.bar(df, x='day', y='total_bill', color='sex', barmode='group')
fig.update_layout(title='小型销售数据柱状图')
fig.show()# 将图表写出为 HTML，方便嵌入网页
fig.write_html('bar_chart.html', include_plotlyjs='cdn')常用图表类型与交互技巧
柱状图、折线图、散点图、热力图等
在数据可视化中，柱状图、折线图、散点图、以及 热力图 是最常用的图表类型。它们各自适用于分类对比、时间序列、变量关系和相关性分析，且默认具备强交互性。
以下示例演示如何组合多种图表来实现简单的仪表板效果，帮助你在从零基础到实战应用的学习过程中逐步提升。你可以通过 hover、zoom、以及 筛选 来更深入地理解数据。
import plotly.express as px
df = px.data.tips()
# 柱状图
fig_bar = px.bar(df, x='day', y='tip', color='sex', title='小费分布柱状图')
# 折线图（示例性时间序列数据）
df2 = px.data.gapminder().query("country=='Canada' or country=='United States'")
fig_line = px.line(df2, x='year', y='lifeExp', color='country', title='人口健康趋势')
# 散点图
fig_scatter = px.scatter(df, x='total_bill', y='tip', color='time', title='价格关系散点图')
fig_bar.show()
fig_line.show()
fig_scatter.show()# 自定义交互细节
fig = px.scatter(df, x='total_bill', y='tip', color='sex',hover_data=['size'], title='增强交互的散点图')
fig.update_traces(marker=dict(size=12, opacity=0.8),selector=dict(mode='markers'))
fig.show()在网页和仪表盘中部署图表
Dash 与静态嵌入
要在网页或仪表盘中展示 Plotly 图表，Dash 是最常用的 Python 框架之一。它将图表、网页布局和回调逻辑整合在一起，便于构建交互式的可视化应用。
一个简单的 Dash 应用示例：它包含两张图，分别展示时间序列和区域分布，适合作为中级练习。你可以在本地运行并通过浏览器查看效果。
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pdapp = Dash(__name__)
df = px.data.tips()fig_time = px.line(df, x='tip', y='total_bill', color='sex', title='时间序列型折线图')
fig_region = px.bar(df, x='day', y='total_bill', color='time', title='区域分布柱状图')app.layout = html.Div([html.H1('简单 Dash 仪表盘'),dcc.Graph(figure=fig_time),dcc.Graph(figure=fig_region)
])if __name__ == '__main__':app.run_server(debug=True)除了 Dash，Plotly 的图表也可以直接嵌入静态网页。你可以将 fig.write_html 输出的文件放在任意 Web 服务器上，访问时无需 Python 环境即可查看图表。
fig = px.bar(px.data.tips(), x='day', y='total_bill')
fig.write_html('dashboard.html', include_plotlyjs='cdn')实战案例：销售数据仪表盘
从数据读取到可交互仪表盘
本案例结合真实场景，使用 Python、Plotly 与 Dash 构建一个销售数据仪表盘。你将实现按区域聚合、时间序列趋势、以及多图联动的可视化效果，贴近企业数据分析需求。
第一步，加载并整理数据。常见的销售数据字段包括日期、地区、销售额和利润。随后创建两张核心图表：一张展示区域维度的汇总柱状图，另一张展示时间序列的折线图。最后通过 Dash 将两张图组合成一个简单的仪表盘，方便在浏览器中交互查看。
import dash
from dash import html, dcc
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd# 假设数据文件 sales.csv 包含 date、region、sales、profit 等字段
# df = pd.read_csv('sales.csv')
# 这里用示例数据替代
df = px.data.stocks().rename(columns={'date':'date', 'GOOG':'GOOG_sales', 'AAPL':'AAPL_sales'})
# 时间序列图（示例：两只股票的销售趋势对比）
fig_time = px.line(df, x='date', y=['GOOG_sales', 'AAPL_sales'], title='销售随时间变化')
# 区域汇总（假设 region 字段存在，示例用可用字段替代）
# region_sales = df.groupby('region', as_index=False)['sales'].sum()
# fig_region = px.bar(region_sales, x='region', y='sales', title='区域销售汇总')
# 为了示例，使用同一个图形占位
fig_region = fig_timeapp = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([html.H1('销售数据仪表盘 - 实战案例'),dcc.Graph(figure=fig_time),dcc.Graph(figure=fig_region)
])if __name__ == '__main__':app.run_server(debug=True)