Plotly Y轴标签重叠：Y轴Range Slider实现及图表优化问询

问题背景 #

使用Plotly Express绘制散点图时，已成功为X轴添加Range Slider，但Y轴标签出现重叠混乱，同时无法找到Y轴Range Slider的实现方案，需要对图表进行优化。

优化方案 #

1. 修复Y轴标签重叠 #

针对Y轴标签重叠问题，可从以下几个方向调整：

• 旋转标签：设置tickangle让标签旋转，避免横向挤压：

  fig.update_yaxes(tickangle=45)
  

• 调整左侧边距：增大左侧边距，为长标签预留足够显示空间：

  fig.update_layout(margin=dict(l=300, r=0, t=0, b=20))
  

• 自动适配边距：开启automargin，让Plotly根据标签长度自动调整边距：

  fig.update_yaxes(automargin=True)
  

• 长标签换行：对过长的CODE标签进行换行处理，避免单标签占比过大：

  import textwrap
  df['CODE'] = df['CODE'].apply(lambda x: '<br>'.join(textwrap.wrap(x, width=10)))
  

2. Y轴范围控制（替代原生Range Slider） #

Plotly原生rangeslider仅支持X轴，针对Y轴（尤其是分类轴）的范围控制，可通过以下方式实现：

• 添加Y轴范围选择按钮：通过yaxis.rangeselector添加自定义按钮，快速切换显示范围：

  fig.update_layout(
      yaxis=dict(
          rangeselector=dict(
              buttons=list([
                  dict(count=10, label="10项", step="all", stepmode="backward"),
                  dict(count=20, label="20项", step="all", stepmode="backward"),
                  dict(step="all", label="全部")
              ])
          ),
          type="category"
      )
  )
  

• 结合Streamlit滑块筛选：利用Streamlit组件手动控制Y轴显示的类别数量，更灵活：

  # 在函数开头添加滑块组件
  y_display_count = st.slider("选择Y轴显示类别数", min_value=5, max_value=len(df['CODE'].unique()), value=20)
  # 筛选出前N个高频类别（可根据需求调整筛选逻辑）
  top_codes = df['CODE'].value_counts().index[:y_display_count]
  filtered_df = df[df['CODE'].isin(top_codes)]
  # 使用筛选后的数据集绘制图表
  fig = px.scatter(filtered_df, x='DATE', y='CODE', color='SOURCE', ...)
  

3. 其他代码优化建议 #

• 移除冲突设置：代码中同时设置了xaxis_type='category'和xaxis.type="date"，两者冲突，建议保留type="date"以保证日期轴交互正常，删除fig.update_layout(xaxis_type='category')。
• 删除重复配置：代码中重复设置了fig.update_layout(yaxis={'dtick':1})，可删除其中一处。
• 调整图表高度：若Y轴类别过多，适当增大图表高度，提升标签显示空间：

  fig = px.scatter(df, ..., height=1000)  # 从原800调整为1000或更大
  

优化后的完整代码 #

import textwrap
import streamlit as st
import plotly.express as px

def chart(df):
    # 处理长标签换行
    df['CODE'] = df['CODE'].apply(lambda x: '<br>'.join(textwrap.wrap(x, width=10)))

    color_discrete_map = {
        'df1': 'rgb(255,0,0)',
        'df2': 'rgb(0,255,0)',
        'df3': '#11FCE4',
        'df4': '#9999FF',
        'df5': '#606060',
        'df6': '#CC6600'
    }

    fig = px.scatter(df, x='DATE', y='CODE', color='SOURCE', width=1200,
                     height=1000, color_discrete_map=color_discrete_map)

    # 修复Y轴标签重叠
    fig.update_yaxes(tickangle=45, automargin=True)
    fig.update_layout(margin=dict(l=300, r=0, t=0, b=20))

    # X轴Range Slider与选择器
    fig.update_layout(
        xaxis=dict(
            rangeselector=dict(
                buttons=list([
                    dict(count=1, label="1m", step="month", stepmode="backward"),
                    dict(count=6, label="6m", step="month", stepmode="backward"),
                    dict(count=1, label="YTD", step="year", stepmode="todate"),
                    dict(count=1, label="1y", step="year", stepmode="backward"),
                    dict(step="all")
                ])
            ),
            rangeslider=dict(visible=True),
            type="date"
        )
    )

    # Y轴范围选择按钮
    fig.update_layout(
        yaxis=dict(
            rangeselector=dict(
                buttons=list([
                    dict(count=10, label="10项", step="all", stepmode="backward"),
                    dict(count=20, label="20项", step="all", stepmode="backward"),
                    dict(step="all", label="全部")
                ])
            ),
            type="category",
            dtick=1
        )
    )

    fig.update_xaxes(
        tickformat='%Y-%B', 
        dtick='M1',
        ticks="outside",
        ticklabelmode="period", 
        tickcolor="black", 
        ticklen=10, 
        minor=dict(
            ticklen=4,  
            dtick=7*24*60*60*1000,  
            tick0="2016-07-03", 
            griddash='dot', 
            gridcolor='white'
        )
    )

    st.plotly_chart(fig)
    return

内容的提问来源于stack exchange，提问作者user14269252