Plotly Choropleth滑块经nbconvert转HTML后顺序错乱

核心原因 #

boulder_men_all_results['Year'].unique()返回的是数据中年份的出现顺序数组，而非自然排序的年份序列。JupyterLab中Plotly可能在前端做了隐式排序，但转成HTML后，前端渲染时会直接按原始步骤的顺序加载，导致滑块标签乱序。

解决方案 #

1. 强制年份数组排序

首先确保YEARS是严格按数字从小到大（或从大到小）排序的数组，替换原有的YEARS定义：

import numpy as np
# 生成排序后的年份数组（从小到大）
YEARS = np.sort(boulder_men_all_results['Year'].unique())
# 若需要倒序（最新年份在前），可追加[::-1]
# YEARS = np.sort(boulder_men_all_results['Year'].unique())[::-1]

2. 验证数据与滑块步骤的对应关系

确保data_bal中的每个Choropleth项，和steps中的滑块步骤一一对应：

• 循环YEARS生成data_bal时，年份顺序是排序后的，每个数据项的位置和steps中的索引完全匹配
• 滑块步骤的label直接使用排序后的年份转字符串，避免顺序错位

3. 重新测试转换流程

修改代码后，先在JupyterLab中运行确认滑块顺序正常，再重新执行nbconvert命令：

jupyter nbconvert --execute \
--ExecutePreprocessor.timeout=600 \
--TemplateExporter.exclude_input=True \
--TemplateExporter.exclude_output_prompt=True \
--to html "IFSC Analysis.ipynb" \
--output docs/index.html

额外排查点 #

如果问题仍存在，检查以下内容：

• 确认df的索引包含所有排序后的年份，且df.loc[i]能正确返回对应年份的数据
• 检查滑块步骤的active参数是否对应排序后数组的正确索引（比如倒序时active=0对应最新年份）

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