Plotly存在重复值时如何按原始数据顺序排序条形图？

在Dash应用中使用Plotly创建条形图时，遇到以下问题：

• 示例数据中，同一日期下的条目顺序为Ordinary Hours→break→Ordinary Hours
• Plotly会自动合并相同Hour Type的条目，导致显示顺序混乱，且尝试categoryorder设置无效
• Hour Type不固定，不同员工可能包含Overtime等其他类型

示例数据：

原始代码存在的问题：Plotly默认会按color参数（Hour Type）对同一y轴（Date）下的条目分组，导致原始顺序被打乱，且仅调整xaxis的categoryorder无法解决该问题。

核心思路是为每个数据行添加唯一的顺序索引，让Plotly为每个条目创建独立的y轴位置，避免同类合并，同时自定义y轴刻度显示为日期。

修改后的代码：

def update_hourly_table_graph(selected_date, selected_employee, selected_pay_cycle, data):
    if all(item is not None for item in [selected_date, selected_employee, selected_pay_cycle, data]):
        ctx = dash.callback_context
        if ctx.triggered:
            daily_data = [dict_ for dict_ in data["hourly_outcome"] if dict_["Employee ID"] == selected_employee["employee_id"] ]
            daily_df = pd.DataFrame(daily_data)
            # 添加原始顺序索引列，确保每个条目有唯一顺序标识
            daily_df['Order'] = range(len(daily_df))
            
            fig = px.bar(
                daily_df, 
                x='Duration', 
                y='Order',  # 用Order作为y轴，避免同类合并
                color='Hour Type',
                text="Time Span", 
                orientation='h', 
                title="Audit bar graph", 
                color_discrete_map={
                    "Ordinary Hours":"#119DFF", 
                    "break":"#EDEB79",
                    "Overtime":"#CA140A" 
                }
            )
            
            # 自定义y轴：显示Date文本，对应Order的数值，保留原始顺序
            fig.update_layout(
                yaxis=dict(
                    tickvals=daily_df['Order'],
                    ticktext=daily_df['Date'],
                    categoryorder='array',
                    categoryarray=daily_df['Order'].tolist(),
                    title='Date'
                )
            )
            
            # 可选：调整条形宽度，避免同一日期下的条形重叠
            fig.update_traces(width=0.8)

        return dcc.Graph(figure=fig, className="table_style", config={'displayModeBar': False})

关键修改说明：

1. 新增Order列：为每一行数据分配从0开始的递增序号，完全匹配原始数据的顺序。
2. y轴改用Order：让Plotly为每个序号创建独立的y轴位置，彻底避免同类Hour Type被合并。
3. 自定义y轴刻度：通过tickvals指定刻度对应的Order值，ticktext设置显示为Date，用户看到的仍是日期，但顺序由Order严格控制。
4. 移除无效的x轴排序设置：原代码对x轴设置categoryorder无法解决y轴分组问题，因此删除该配置。

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