Plotly.js 中启用 rangeslider 后默认禁用鼠标/工具栏的 X 轴缩放，但可通过配置 rangeselector 或结合 fixedrange: false 与交互式滑块实现双模式缩放（滑块 + 缩放按钮）。
plotly.js 中启用 `rangeslider` 后默认禁用鼠标/工具栏的 x 轴缩放，但可通过配置 `rangeselector` 或结合 `fixedrange: false` 与交互式滑块实现双模式缩放（滑块 + 缩放按钮）。
在 Plotly.js 中，当为 xaxis 启用 rangeslider: {} 时，图表底部会显示一个可拖拽的时间/数值范围滑块，用于快速缩放 X 轴视图。但默认行为会自动将 xaxis.fixedrange 设为 true，从而禁用所有其他 X 轴缩放方式（包括工具栏缩放、鼠标滚轮、框选缩放等），这是造成“无法用缩放按钮缩放 X 轴”的根本原因。
✅ 正确做法是显式设置 fixedrange: false，并确保布局中未冲突地限制交互：
const layout = {
xaxis: {
title: 'Year',
rangeslider: {}, // 启用滑块
fixedrange: false // ✅ 关键：允许工具栏/鼠标缩放
},
// 可选：添加 rangeselector 提供预设时间范围按钮（如 '1m', '6m', 'YTD'）
xaxis2: { // 若需更高级控制，可搭配第二个 X 轴（不推荐），优先用下方方案
overlaying: 'x',
side: 'top',
showgrid: false,
zeroline: false,
showticklabels: false
}
};
⚠️ 注意事项：
- fixedrange: false 必须直接写在 xaxis 对象内，且不能被父级配置覆盖；
- 若使用 layout.xaxis.rangeslider.visible = true，仍需同步设置 fixedrange: false；
- rangeslider 本身仅支持 X 轴（对 Y 轴无效），且要求数据为数值型或日期型（如 2020, '2020-01-01'）；
- 在 Dash（Python）中同理，需设置 xaxis=dict(rangeslider=dict(visible=True), fixedrange=False)。
? 进阶建议：若需兼顾便捷性与灵活性，可组合使用 rangeslider + rangeselector —— 前者用于精细拖拽，后者提供一键时间范围切换，二者互不干扰：
layout.xaxis.rangeselector = {
buttons: [
{ count: 1, label: '1Y', step: 'year', stepmode: 'backward' },
{ count: 3, label: '3Y', step: 'year', stepmode: 'backward' },
{ step: 'all', label: 'All' }
]
};
总结：rangeslider 不是缩放功能的替代品，而是补充工具。通过解除 fixedrange 锁定，即可恢复完整的 X 轴交互能力，实现“滑块微调 + 工具栏粗调”的双重缩放体验。
