【Python数据可视化精通】第4讲 | 交互式可视化的艺术与科学

所谓伊人，在水一方333

429人浏览 · 2026-03-12 07:55:02

所谓伊人，在水一方333 · 2026-03-12 07:55:02 发布

环境声明：

Python版本：Python 3.12+

核心库：Plotly 5.20+, Dash 2.15+, Jupyter Dash 0.4+

适用平台：Windows / macOS / Linux

1. 交互可视化的核心价值

交互式可视化将静态图表转化为动态探索工具，赋予用户操控数据的能力。与静态图表相比，交互可视化实现了三个维度的突破：

信息密度提升：通过分层展示策略，同一画布可承载多维度信息。用户按需展开细节，避免视觉过载。

认知负荷降低：人类工作记忆容量有限（Miller定律：7±2原则）。交互允许用户分步探索，每次只关注一个数据子集。

洞察深度增强：用户可通过筛选、钻取、对比等操作，发现静态图表难以呈现的模式与异常。

补充：Ben Shneiderman的信息可视化 mantra——“Overview first, zoom and filter, then details-on-demand”（先概览，再缩放过滤，最后按需查看细节）仍是交互设计的黄金法则。

2. 六大交互设计模式详解

根据Card、Mackinlay和Shneiderman的经典分类，交互可视化包含六种核心模式。

2.1 模式对比总览

交互模式	核心动作	典型应用场景	技术实现难度
选择 (Select)	标记感兴趣的数据项	高亮异常点、标记关键样本	低
探索 (Explore)	在不同视图间导航	地图平移、时间轴滚动	中
重配 (Reconfigure)	改变数据的空间排列	排序、布局切换、维度重组	中
编码 (Encode)	改变视觉映射方式	切换颜色方案、调整点大小	低
抽象/细化 (Abstract/Elaborate)	改变细节层次	数据聚合、下钻分析	高
连接 (Connect)	关联多个视图	刷选联动、跨图表高亮	高

2.2 各模式深度解析

选择 (Select)

选择是最基础的交互形式。用户通过点击、框选等方式标记数据子集，系统通过高亮、变色等反馈确认操作。选择模式的关键在于提供清晰的视觉反馈，让用户明确知道哪些数据已被选中。

探索 (Explore)

探索模式解决"视野受限"问题。当数据量超过屏幕承载能力时，用户需要平移、缩放来查看不同区域。平滑的动画过渡是探索体验的关键，突兀的跳转会破坏用户的空间认知。

重配 (Reconfigure)

重配置允许用户重新组织数据的视觉布局。在散点图矩阵中切换变量位置，或在表格中按不同列排序，都属于重配置。这种模式帮助用户从不同角度审视数据关系。

编码 (Encode)

编码模式改变数据的视觉映射方式。同一组数据可以用颜色、大小、形状等不同通道编码。用户通过切换编码方式，可以发现不同的数据模式。例如，将散点图的颜色从"类别"改为"数值"，可能揭示新的聚类结构。

抽象/细化 (Abstract/Elaborate)

抽象与细化控制信息的粒度层次。上卷（Roll-up）将详细数据聚合为概要，下钻（Drill-down）则展开聚合数据查看细节。这种模式在层次化数据（如地理行政区划、组织架构）中尤为重要。

连接 (Connect)

连接模式是多视图可视化的核心。当用户在某个视图中选择数据时，其他视图同步高亮对应数据。这种**刷选联动（Brushing & Linking）**技术让用户看到同一数据在不同维度上的表现。

3. 交互延迟与100ms原则

交互响应速度直接影响用户体验。研究表明，人类对系统响应有明确的心理预期阈值：

延迟范围	用户感知	适用场景
0-100ms	即时响应	直接操控（拖拽、缩放）
100-300ms	轻微延迟	简单查询、过滤
300-1000ms	明显等待	复杂计算、数据加载
>1000ms	中断感	需显示进度指示器

100ms原则：对于直接操控类交互（如拖拽滑块、缩放图表），响应时间必须控制在100ms以内。超过此阈值，用户会感知到"卡顿"，流畅感被破坏。

优化策略：

使用数据采样减少渲染量
采用WebGL加速大规模数据绘制
实现防抖（Debounce）和节流（Throttle）机制
预加载可能访问的数据

4. 避坑小贴士

过度交互陷阱

不是所有图表都需要交互。当数据量小、信息简单时，静态图表往往更清晰。过度添加交互元素会分散注意力，增加认知负担。

状态迷失问题

复杂交互可能导致用户忘记当前所处的数据状态。始终提供清晰的状态指示（如当前筛选条件、选中数据数量）。

移动端适配盲区

桌面端的悬停（Hover）交互在移动端无法使用。设计交互时必须考虑触摸设备的替代方案（如长按、双击）。

性能与体验平衡

大规模数据的实时交互是技术挑战。避免在每次交互时重新计算整个数据集，优先使用增量更新策略。

5. 前沿关联：自然语言驱动交互

2024-2025年，大语言模型（LLM）正在重塑可视化交互范式。用户可以通过自然语言指令直接操控图表：

“只显示销售额超过100万的地区”

“按月份聚合数据并切换为折线图”

“对比华北和华南的季度增长趋势”

这种**自然语言可视化（NL4Vis）**降低了技术门槛，让非技术用户也能进行复杂的数据探索。当前主流实现方案包括：

将自然语言解析为可视化语法（Vega-Lite）
使用LLM生成数据查询代码（Pandas/SQL）
结合RAG技术提供上下文感知的图表推荐

6. 代码实战

6.1 Plotly多层级交互图表

"""
Plotly多层级交互图表示例
展示悬停、点击、缩放、下钻等交互功能
"""
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np

# 生成示例数据：模拟电商销售数据
np.random.seed(42)
n_samples = 500

data = pd.DataFrame({
    'product': np.random.choice(['电子产品', '服装', '食品', '家居'], n_samples),
    'region': np.random.choice(['华北', '华东', '华南', '西南'], n_samples),
    'sales': np.random.exponential(1000, n_samples),
    'profit': np.random.normal(200, 100, n_samples),
    'quantity': np.random.poisson(50, n_samples),
    'month': np.random.choice(['1月', '2月', '3月', '4月', '5月', '6月'], n_samples)
})

# 创建交互式散点图
fig = go.Figure()

# 按产品类别分组绘制
products = data['product'].unique()
colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A']

for product, color in zip(products, colors):
    mask = data['product'] == product
    fig.add_trace(go.Scatter(
        x=data[mask]['sales'],
        y=data[mask]['profit'],
        mode='markers',
        name=product,
        marker=dict(
            size=data[mask]['quantity'] / 3,  # 气泡大小表示销量
            color=color,
            opacity=0.7,
            line=dict(width=1, color='white')
        ),
        text=data[mask]['region'],  # 悬停显示地区
        hovertemplate=(
            '<b>%{fullData.name}</b><br>' +
            '销售额: $%{x:.0f}<br>' +
            '利润: $%{y:.0f}<br>' +
            '地区: %{text}<br>' +
            '<extra></extra>'
        ),
        selected=dict(marker=dict(opacity=1, size=15)),
        unselected=dict(marker=dict(opacity=0.5))
    ))

# 配置交互模式
fig.update_layout(
    title=dict(
        text='销售与利润关系图（气泡大小=销量）',
        x=0.5,
        font=dict(size=18)
    ),
    xaxis_title='销售额 ($)',
    yaxis_title='利润 ($)',
    hovermode='closest',  # 悬停时高亮最近的数据点
    dragmode='select',    # 默认启用框选模式
    selectdirection='any',
    clickmode='event+select',  # 点击触发事件和选择
    # 配置缩放和平移按钮
    modebar=dict(
        add=['select2d', 'lasso2d', 'resetScale2d']
    ),
    # 响应式布局
    autosize=True,
    template='plotly_white'
)

# 启用范围滑块和选择器
fig.update_xaxes(
    rangeslider=dict(visible=True),
    rangeselector=dict(
        buttons=list([
            dict(count=1000, label='1K', step='all'),
            dict(count=2000, label='2K', step='all'),
            dict(step='all', label='全部')
        ])
    )
)

fig.show()

# 保存为HTML文件（保留交互功能）
fig.write_html('interactive_scatter.html')
print("图表已保存为 interactive_scatter.html")

6.2 刷选联动（Brushing & Linking）实现

"""
刷选联动示例：使用Plotly Dash实现多图表联动
在散点图中选择数据，直方图和饼图同步更新
"""
import dash
from dash import dcc, html, Input, Output, callback
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import numpy as np

# 生成数据
df = pd.DataFrame({
    'x': np.random.randn(1000),
    'y': np.random.randn(1000),
    'category': np.random.choice(['A', 'B', 'C', 'D'], 1000),
    'value': np.random.exponential(100, 1000)
})

# 初始化Dash应用
app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1('刷选联动示例：Brushing & Linking', style={'textAlign': 'center'}),
  
    html.Div([
        html.P('在左侧散点图中框选数据点，右侧图表将同步更新')
    ], style={'textAlign': 'center', 'marginBottom': '20px'}),
  
    html.Div([
        # 左侧：主散点图（可刷选）
        html.Div([
            dcc.Graph(
                id='scatter-plot',
                config={'displayModeBar': True},
                style={'height': '500px'}
            )
        ], style={'width': '50%', 'display': 'inline-block'}),
      
        # 右侧：联动图表
        html.Div([
            dcc.Graph(id='category-bar', style={'height': '250px'}),
            dcc.Graph(id='value-histogram', style={'height': '250px'})
        ], style={'width': '50%', 'display': 'inline-block'})
    ]),
  
    # 存储选中数据的隐藏div
    html.Div(id='selected-data', style={'display': 'none'})
])

@callback(
    Output('scatter-plot', 'figure'),
    Input('scatter-plot', 'relayoutData')
)
def update_scatter(relayoutData):
    """更新散点图，保持选择状态"""
    fig = px.scatter(
        df, x='x', y='y', color='category',
        title='主视图：框选数据点',
        opacity=0.6
    )
  
    fig.update_traces(
        selected=dict(marker=dict(opacity=1, size=12)),
        unselected=dict(marker=dict(opacity=0.3, size=8))
    )
  
    fig.update_layout(
        dragmode='select',
        clickmode='event+select',
        template='plotly_white'
    )
  
    return fig

@callback(
    Output('category-bar', 'figure'),
    Output('value-histogram', 'figure'),
    Input('scatter-plot', 'selectedData')
)
def update_linked_charts(selectedData):
    """根据散点图选择更新联动图表"""
  
    if selectedData is None or len(selectedData['points']) == 0:
        # 无选择时显示全部数据
        filtered_df = df
        title_suffix = '(全部数据)'
    else:
        # 获取选中的数据点索引
        selected_indices = [p['pointIndex'] for p in selectedData['points']]
        filtered_df = df.iloc[selected_indices]
        title_suffix = f'(已选择 {len(selected_indices)} 个点)'
  
    # 类别分布柱状图
    category_counts = filtered_df['category'].value_counts().reset_index()
    category_counts.columns = ['category', 'count']
  
    bar_fig = go.Figure(data=[
        go.Bar(
            x=category_counts['category'],
            y=category_counts['count'],
            marker_color=['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A']
        )
    ])
    bar_fig.update_layout(
        title=f'类别分布 {title_suffix}',
        xaxis_title='类别',
        yaxis_title='数量',
        template='plotly_white',
        margin=dict(l=40, r=40, t=40, b=40)
    )
  
    # 数值分布直方图
    hist_fig = go.Figure(data=[
        go.Histogram(
            x=filtered_df['value'],
            nbinsx=20,
            marker_color='#45B7D1'
        )
    ])
    hist_fig.update_layout(
        title=f'数值分布 {title_suffix}',
        xaxis_title='数值',
        yaxis_title='频数',
        template='plotly_white',
        margin=dict(l=40, r=40, t=40, b=40)
    )
  
    return bar_fig, hist_fig

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

6.3 响应式交互仪表盘

"""
响应式交互仪表盘：多图表联动 + 筛选器 + 实时更新
使用Dash构建完整的数据分析仪表板
"""
import dash
from dash import dcc, html, Input, Output, callback
import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np
from datetime import datetime, timedelta

# 生成时间序列数据
dates = pd.date_range(start='2024-01-01', end='2024-12-31', freq='D')
n_days = len(dates)

sales_df = pd.DataFrame({
    'date': dates,
    'sales': np.cumsum(np.random.randn(n_days)) * 1000 + 50000,
    'orders': np.random.poisson(100, n_days),
    'region': np.random.choice(['华北', '华东', '华南', '西南'], n_days),
    'category': np.random.choice(['电子产品', '服装', '食品', '家居'], n_days)
})

# 初始化应用
app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1('销售数据分析仪表盘', style={'textAlign': 'center', 'padding': '20px'}),
  
    # 筛选器区域
    html.Div([
        html.Div([
            html.Label('选择时间范围：'),
            dcc.DatePickerRange(
                id='date-picker',
                start_date=sales_df['date'].min(),
                end_date=sales_df['date'].max(),
                display_format='YYYY-MM-DD'
            )
        ], style={'width': '30%', 'display': 'inline-block', 'padding': '10px'}),
      
        html.Div([
            html.Label('选择地区：'),
            dcc.Dropdown(
                id='region-dropdown',
                options=[{'label': r, 'value': r} for r in sales_df['region'].unique()],
                value=sales_df['region'].unique().tolist(),
                multi=True
            )
        ], style={'width': '30%', 'display': 'inline-block', 'padding': '10px'}),
      
        html.Div([
            html.Label('选择品类：'),
            dcc.Dropdown(
                id='category-dropdown',
                options=[{'label': c, 'value': c} for c in sales_df['category'].unique()],
                value=sales_df['category'].unique().tolist(),
                multi=True
            )
        ], style={'width': '30%', 'display': 'inline-block', 'padding': '10px'})
    ], style={'backgroundColor': '#f0f0f0', 'padding': '20px', 'borderRadius': '10px'}),
  
    # KPI指标卡
    html.Div([
        html.Div(id='kpi-total-sales', style={
            'width': '23%', 'display': 'inline-block', 'padding': '20px',
            'backgroundColor': '#4ECDC4', 'color': 'white', 'borderRadius': '10px',
            'margin': '1%', 'textAlign': 'center'
        }),
        html.Div(id='kpi-total-orders', style={
            'width': '23%', 'display': 'inline-block', 'padding': '20px',
            'backgroundColor': '#FF6B6B', 'color': 'white', 'borderRadius': '10px',
            'margin': '1%', 'textAlign': 'center'
        }),
        html.Div(id='kpi-avg-order', style={
            'width': '23%', 'display': 'inline-block', 'padding': '20px',
            'backgroundColor': '#45B7D1', 'color': 'white', 'borderRadius': '10px',
            'margin': '1%', 'textAlign': 'center'
        }),
        html.Div(id='kpi-top-region', style={
            'width': '23%', 'display': 'inline-block', 'padding': '20px',
            'backgroundColor': '#FFA07A', 'color': 'white', 'borderRadius': '10px',
            'margin': '1%', 'textAlign': 'center'
        })
    ], style={'marginTop': '20px'}),
  
    # 图表区域
    html.Div([
        html.Div([
            dcc.Graph(id='trend-line', style={'height': '400px'})
        ], style={'width': '65%', 'display': 'inline-block'}),
      
        html.Div([
            dcc.Graph(id='region-pie', style={'height': '400px'})
        ], style={'width': '35%', 'display': 'inline-block'})
    ]),
  
    html.Div([
        html.Div([
            dcc.Graph(id='category-bar', style={'height': '350px'})
        ], style={'width': '50%', 'display': 'inline-block'}),
      
        html.Div([
            dcc.Graph(id='heatmap', style={'height': '350px'})
        ], style={'width': '50%', 'display': 'inline-block'})
    ]),
  
    # 自动刷新间隔
    dcc.Interval(id='interval-component', interval=5000)  # 5秒刷新
])

@callback(
    Output('kpi-total-sales', 'children'),
    Output('kpi-total-orders', 'children'),
    Output('kpi-avg-order', 'children'),
    Output('kpi-top-region', 'children'),
    Output('trend-line', 'figure'),
    Output('region-pie', 'figure'),
    Output('category-bar', 'figure'),
    Output('heatmap', 'figure'),
    Input('date-picker', 'start_date'),
    Input('date-picker', 'end_date'),
    Input('region-dropdown', 'value'),
    Input('category-dropdown', 'value')
)
def update_dashboard(start_date, end_date, selected_regions, selected_categories):
    """根据筛选条件更新整个仪表盘"""
  
    # 数据过滤
    mask = (
        (sales_df['date'] >= start_date) &
        (sales_df['date'] <= end_date) &
        (sales_df['region'].isin(selected_regions)) &
        (sales_df['category'].isin(selected_categories))
    )
    filtered_df = sales_df[mask]
  
    # 计算KPI
    total_sales = filtered_df['sales'].sum()
    total_orders = filtered_df['orders'].sum()
    avg_order = total_sales / total_orders if total_orders > 0 else 0
    top_region = filtered_df.groupby('region')['sales'].sum().idxmax() if len(filtered_df) > 0 else 'N/A'
  
    kpi_sales = html.Div([
        html.H3(f'${total_sales:,.0f}'),
        html.P('总销售额')
    ])
  
    kpi_orders = html.Div([
        html.H3(f'{total_orders:,}'),
        html.P('总订单数')
    ])
  
    kpi_avg = html.Div([
        html.H3(f'${avg_order:.2f}'),
        html.P('平均订单金额')
    ])
  
    kpi_region = html.Div([
        html.H3(top_region),
        html.P('最佳销售地区')
    ])
  
    # 趋势折线图
    daily_sales = filtered_df.groupby('date')['sales'].sum().reset_index()
    trend_fig = go.Figure()
    trend_fig.add_trace(go.Scatter(
        x=daily_sales['date'],
        y=daily_sales['sales'],
        mode='lines',
        fill='tozeroy',
        line=dict(color='#4ECDC4', width=2)
    ))
    trend_fig.update_layout(
        title='销售趋势',
        xaxis_title='日期',
        yaxis_title='销售额',
        template='plotly_white',
        hovermode='x unified'
    )
  
    # 地区饼图
    region_sales = filtered_df.groupby('region')['sales'].sum()
    pie_fig = go.Figure(data=[go.Pie(
        labels=region_sales.index,
        values=region_sales.values,
        hole=0.4,
        marker=dict(colors=['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'])
    )])
    pie_fig.update_layout(title='地区销售占比', template='plotly_white')
  
    # 品类柱状图
    category_sales = filtered_df.groupby('category')['sales'].sum().sort_values(ascending=True)
    bar_fig = go.Figure(data=[go.Bar(
        x=category_sales.values,
        y=category_sales.index,
        orientation='h',
        marker_color='#45B7D1'
    )])
    bar_fig.update_layout(
        title='品类销售排行',
        xaxis_title='销售额',
        template='plotly_white'
    )
  
    # 热力图（月份 vs 地区）
    filtered_df['month'] = filtered_df['date'].dt.month
    heatmap_data = filtered_df.pivot_table(
        values='sales',
        index='month',
        columns='region',
        aggfunc='sum',
        fill_value=0
    )
  
    heat_fig = go.Figure(data=go.Heatmap(
        z=heatmap_data.values,
        x=heatmap_data.columns,
        y=[f'{int(m)}月' for m in heatmap_data.index],
        colorscale='Blues'
    ))
    heat_fig.update_layout(
        title='月度地区销售热力图',
        template='plotly_white'
    )
  
    return kpi_sales, kpi_orders, kpi_avg, kpi_region, trend_fig, pie_fig, bar_fig, heat_fig

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

6.4 移动端触摸交互示例

"""
移动端触摸交互优化示例
针对触摸设备优化的交互设计
"""
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np

# 生成数据
df = pd.DataFrame({
    'x': np.random.randn(200),
    'y': np.random.randn(200),
    'category': np.random.choice(['A', 'B', 'C'], 200),
    'size': np.random.randint(10, 100, 200)
})

# 创建子图布局
fig = make_subplots(
    rows=2, cols=2,
    subplot_titles=('点击选择模式', '长按菜单模式', '滑动缩放模式', '多点触控模式'),
    specs=[[{'type': 'scatter'}, {'type': 'scatter'}],
           [{'type': 'scatter'}, {'type': 'scatter'}]]
)

# 子图1：点击选择（移动端友好的点击区域）
for cat, color in zip(['A', 'B', 'C'], ['#FF6B6B', '#4ECDC4', '#45B7D1']):
    mask = df['category'] == cat
    fig.add_trace(
        go.Scatter(
            x=df[mask]['x'],
            y=df[mask]['y'],
            mode='markers',
            name=f'类别 {cat}',
            marker=dict(
                size=15,  # 更大的点击区域
                color=color,
                opacity=0.7,
                line=dict(width=2, color='white')
            ),
            # 移动端优化的悬停提示
            hoverlabel=dict(
                bgcolor='white',
                font_size=14,  # 更大的字体
                font_family='Arial'
            ),
            hovertemplate=(
                '<b>类别 %{fullData.name}</b><br>' +
                'X: %{x:.2f}<br>' +
                'Y: %{y:.2f}<br>' +
                '<extra></extra>'
            )
        ),
        row=1, col=1
    )

# 子图2：支持长按的散点图
fig.add_trace(
    go.Scatter(
        x=df['x'],
        y=df['y'],
        mode='markers',
        marker=dict(
            size=df['size'],
            color=df['size'],
            colorscale='Viridis',
            showscale=True,
            colorbar=dict(title='数值')
        ),
        # 自定义数据用于长按识别
        customdata=np.stack((df['category'], df['size']), axis=-1),
        hovertemplate=(
            '<b>数据点</b><br>' +
            '类别: %{customdata[0]}<br>' +
            '数值: %{customdata[1]}<br>' +
            '提示：长按查看详情<br>' +
            '<extra></extra>'
        )
    ),
    row=1, col=2
)

# 子图3：滑动友好的时间序列
x_time = pd.date_range('2024-01-01', periods=100, freq='D')
y_values = np.cumsum(np.random.randn(100))

fig.add_trace(
    go.Scatter(
        x=x_time,
        y=y_values,
        mode='lines',
        fill='tozeroy',
        line=dict(color='#4ECDC4', width=3),
        # 启用触摸滑动
        hovermode='x unified'
    ),
    row=2, col=1
)

# 子图4：条形图（适合触摸）
categories = ['产品A', '产品B', '产品C', '产品D', '产品E']
values = [23, 45, 56, 78, 32]

fig.add_trace(
    go.Bar(
        x=categories,
        y=values,
        marker_color='#FFA07A',
        # 增加条形间距便于触摸
        width=0.6,
        text=values,
        textposition='outside',
        textfont=dict(size=14)
    ),
    row=2, col=2
)

# 移动端优化配置
fig.update_layout(
    title=dict(
        text='移动端触摸交互优化示例',
        x=0.5,
        font=dict(size=20)
    ),
    # 禁用需要悬停的交互
    hovermode='closest',
    # 增大图表边距
    margin=dict(l=60, r=60, t=80, b=60),
    # 响应式布局
    autosize=True,
    # 移动端友好的图例位置
    legend=dict(
        orientation='h',
        yanchor='bottom',
        y=1.02,
        xanchor='right',
        x=1,
        font=dict(size=12)
    ),
    # 配置模式栏（移动端显示简化工具栏）
    modebar=dict(
        orientation='h',
        bgcolor='rgba(255,255,255,0.7)'
    ),
    template='plotly_white'
)

# 更新所有子图的轴标签
fig.update_xaxes(title_text='X轴', row=1, col=1)
fig.update_yaxes(title_text='Y轴', row=1, col=1)
fig.update_xaxes(title_text='X轴', row=1, col=2)
fig.update_yaxes(title_text='Y轴', row=1, col=2)
fig.update_xaxes(title_text='日期', row=2, col=1)
fig.update_yaxes(title_text='数值', row=2, col=1)
fig.update_xaxes(title_text='产品', row=2, col=2)
fig.update_yaxes(title_text='销量', row=2, col=2)

# 启用触摸手势
fig.update_layout(
    # 配置触摸交互
    dragmode='pan',  # 默认平移模式
    # 禁用双击缩放（避免误触）
    doubleclick=False
)

fig.show()

# 保存为移动端优化的HTML
fig.write_html('mobile_interactive.html', include_plotlyjs='cdn')
print("移动端优化图表已保存为 mobile_interactive.html")

# 输出移动端交互最佳实践
print("""
移动端交互设计要点：
1. 增大点击目标（至少44x44像素）
2. 使用触摸友好的手势（滑动、长按）
3. 避免依赖悬停（hover）的交互
4. 提供清晰的视觉反馈
5. 简化UI元素，减少认知负担
6. 使用响应式布局适配不同屏幕
""")