使用Dash绘制多线图时Y轴无序的问题求助

问题根源 #

你遇到的Y轴无序问题，核心原因是将数值型的Total metric转换成了字符串类型：

dff['Total metric'] = dff['Total metric'].map('{:,.2f}'.format)

Plotly对字符串类型的Y轴会按字典序排序（比如"100.00"会排在"20.00"前面），而非数值大小，所以即使对DataFrame排序也无法解决。

解决方案 #

保留Total metric的数值类型，通过Plotly的轴格式设置来实现带千分位和两位小数的显示效果，不要手动转字符串。

修正后的回调函数代码：

@callback(
    Output('graph-content', 'figure'),
    Input("some_number", "value")
)
def update_graph(some_number):
    dff = df.copy(deep = True)
    if not some_number:
        some_number = 1
    
    # 保留数值类型，不转字符串
    dff['Total metric'] = dff['metric']*some_number
    
    fig = px.line(dff, x='months', y='Total metric', color = 'foo', markers=True, title = 'Metric vs months')
    # 设置Y轴刻度显示格式为两位小数+千分位
    fig.update_yaxes(tickformat='{:,.2f}')
    return fig

额外说明 #

• 保留数值类型后，Plotly会自动识别为连续型数值轴，按数值大小正常排序Y轴。
• 如果需要确保折线的绘制顺序（比如按月份顺序，你的数据已按月份排好，无需额外操作），可对dff按foo和months排序：

  dff = dff.sort_values(by=['foo', 'months'])
  

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