《Python实战进阶》No16: Plotly 交互式图表制作指南

No16: Plotly 交互式图表制作指南

Plotly是一款用来做数据分析和可视化的在线平台，功能真的是非常强大，它主要有以下特点：

图形多样化：在线绘制多种图形，比如柱状图、饼图、直方图、饼图、气泡图、桑基图、股票图、旭日图、联合分布图、地图等
在线可编辑：Plotly中有在线编辑的平台，可以将生成的图形保存到该平台，并进行分享
开源免费：Plotly的所有资源都是开源免费的，用户可直接使用，还可以直接和R、python、MATLAB等软件或者语言无缝对接
图形动态化：Plotly生成的图形全部是动态化；Plotly的绘图最好在Jupyter notebook中进行，能够很好地显示动态效果
颜色绚丽：在使用Plotly绘制图形的时候，我们可以进行图形颜色的设置，Plotly提供了丰富的颜色面板供选择
代码量少：Plotly绘图，尤其是Plotly的高级封装Plotly_Express，代码量非常少；一行代码就能实现多种功能且精美的图形
内置丰富数据集：在Plotly中内置7个不同类型的数据集，方便读者直接使用内置数据进行学习、使用
文档健全：Plotly官方提供了丰富的文档资料和案例可免费学习，能够快速的上手
附录：在官网中展示了Plotly能够绘制的部分图形：https://plotly.com/python/

本文将以Plotly为主介绍python中制作交互式图表的典型用法和高级技巧。
在这里插入图片描述

核心概念

1. 图表部件编程（updatemenus/sliders）

通过 updatemenus 和 sliders 实现动态交互功能，例如切换数据视图或调整参数。

import plotly.graph_objects as gofig = go.Figure()# 添加多条折线
fig.add_trace(go.Scatter(y=[2, 1, 3], name="Line 1"))
fig.add_trace(go.Scatter(y=[3, 2, 1], name="Line 2"))# 配置 updatemenus
fig.update_layout(updatemenus=[dict(type="buttons",direction="right",buttons=[dict(label="Show All", method="update", args=[{"visible": [True, True]}]),dict(label="Show Line 1", method="update", args=[{"visible": [True, False]}]),dict(label="Show Line 2", method="update", args=[{"visible": [False, True]}]),],)]
)fig.show()

效果：按钮组允许用户切换显示不同的折线。
在这里插入图片描述

2. WebGL加速的大数据渲染

Plotly 支持 WebGL 渲染，适合处理大规模数据集。

import plotly.express as px
import numpy as np# 模拟大数据
np.random.seed(42)
x = np.random.rand(100_000)
y = np.random.rand(100_000)# 使用 WebGL 加速的散点图
fig = px.scatter(x=x, y=y, render_mode='webgl', title="WebGL Accelerated Scatter Plot")
fig.show()

效果：即使数据量达到 10 万点，图表依然流畅。
在这里插入图片描述

3. Dash回调链设计模式

Dash 是 Plotly 的框架，用于构建交互式仪表盘。通过回调链实现复杂交互逻辑。

from dash import Dash, dcc, html, Input, Outputapp = Dash(__name__)app.layout = html.Div([dcc.Input(id="input", value="Hello Plotly!", type="text"),html.Div(id="output")
])@app.callback(Output("output", "children"), [Input("input", "value")])
def update_output(value):return f"You entered: {value}"if __name__ == "__main__":app.run_server(debug=True)

效果：输入框内容实时更新到输出区域。

4. 图表主题与模板系统

Plotly 提供丰富的主题和模板，可快速定制图表风格。

import plotly.express as pxdf = px.data.gapminder().query("continent=='Oceania'")
fig = px.line(df, x="year", y="lifeExp", color="country", template="plotly_dark")
fig.show()

效果：深色主题的折线图，适合夜间模式。
在这里插入图片描述

实战案例

1. 实时疫情数据仪表盘开发

结合 Dash 和 Plotly 构建实时疫情数据仪表盘。

from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd# 模拟疫情数据
data = {"date": pd.date_range(start="2020-01-01", periods=100),"cases": [i**2 for i in range(100)],"deaths": [i * 5 for i in range(100)]
}
df = pd.DataFrame(data)app = Dash(__name__)app.layout = html.Div([dcc.Graph(id="graph"),dcc.Slider(id="year-slider",min=0,max=len(df) - 1,value=0,marks={i: str(df["date"][i].date()) for i in range(0, len(df), 10)},step=None)
])@app.callback(Output("graph", "figure"), [Input("year-slider", "value")])
def update_graph(selected_index):filtered_df = df.iloc[:selected_index + 1]fig = px.line(filtered_df, x="date", y=["cases", "deaths"], title="Covid-19 Cases Over Time")return figif __name__ == "__main__":app.run_server(debug=True)

效果：滑块控制时间轴，动态展示疫情数据变化。
在这里插入图片描述

2. 3D体素可视化与机器学习特征空间展示

使用 Plotly 绘制 3D 体素图，展示机器学习特征空间。

import plotly.graph_objects as go
import numpy as np# 创建 3D 体素数据
x, y, z = np.indices((8, 8, 8))
cube1 = (x < 3) & (y < 3) & (z < 3)
cube2 = (x >= 5) & (y >= 5) & (z >= 5)
voxelarray = cube1 | cube2colors = np.empty(voxelarray.shape, dtype=object)
colors[cube1] = 'blue'
colors[cube2] = 'red'# 绘制 3D 体素图
fig = go.Figure(data=go.Volume(x=x.flatten(),y=y.flatten(),z=z.flatten(),value=voxelarray.flatten(),colorscale=["blue", "red"],opacity=0.2,surface_count=17
))fig.show()

效果：3D 空间中两个立方体的体素可视化。
在这里插入图片描述

扩展思考

1. Plotly与Three.js的深度集成

Plotly 的底层基于 WebGL，可以与 Three.js 深度集成，用于更复杂的 3D 可视化场景。

// 示例：Three.js 与 Plotly 结合的伪代码
// 在 Three.js 场景中嵌入 Plotly 图表

2. 图表交互行为的A/B测试设计

通过 A/B 测试优化图表交互行为，提升用户体验。

# 示例：记录用户点击行为
from dash import Dash, dcc, html
import dash_bootstrap_components as dbcapp = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])app.layout = html.Div([dcc.Graph(id="graph", figure=px.bar(x=[1, 2, 3], y=[3, 2, 1])),html.Button("Option A", id="button-a"),html.Button("Option B", id="button-b"),html.Div(id="output")
])@app.callback(Output("output", "children"), [Input("button-a", "n_clicks"), Input("button-b", "n_clicks")])
def update_output(clicks_a, clicks_b):return f"Option A clicks: {clicks_a or 0}, Option B clicks: {clicks_b or 0}"if __name__ == "__main__":app.run_server(debug=True)