如何解决Plotly.js范围选择器选大区间时的左侧空白问题

我有一个X轴为日期的折线图，数据是动态的，日期范围会随时变化，有时是1年，有时是10年等。我为X轴添加了如下rangeselector按钮配置代码：

xaxis: {
  rangeselector: {buttons:[{step:"all",label:"MAX"},{count:10,label:"10Y",step:"year",stepmode:"backward"},{count:5,label:"5Y",step:"year",stepmode:"backward"},{count:1,label:"1Y",step:"year",stepmode:"backward"},{count:1,label:"YTD",step:"year",stepmode:"todate"},{count:6,label:"6M",step:"month",stepmode:"backward"},{count:1,label:"1M",step:"month",stepmode:"backward"}]},
  type: 'date',
  linecolor: '#D8D8D8',
  linewidth: 1,
  mirror: true,
  tickfont: {color: '#8f8f8f'},
  tickformat: '%B %Y',
  hoverformat: '%d %B %Y',
}

配置运行正常，但当点击超过数据实际范围的时间区间时，图表左侧会出现空白区域。我知道这是预期行为，但希望即使选择更大范围，X轴也从数据的最小日期开始显示。请问有没有办法处理这个问题？我曾尝试为范围选择器按钮设置起止日期而非固定时长，但未找到实现方法。

附在线示例：点击1年、5年等区间时，图表左侧会出现空白，我需要消除该空白。

let x = ['2023-09-21', '2023-09-22', '2023-09-25', '2023-09-26', '2023-09-27', '2023-09-28', '2023-09-29', '2023-10-02', '2023-10-03', '2023-10-04', '2023-10-05', '2023-10-06', '2023-10-09', '2023-10-10', '2023-10-11', '2023-10-12', '2023-10-13', '2023-10-16', '2023-10-17', '2023-10-18', '2023-10-19', '2023-10-20', '2023-10-23', '2023-10-24', '2023-10-25', '2023-10-26', '2023-10-27', '2023-10-30', '2023-10-31', '2023-11-01', '2023-11-02', '2023-11-03', '2023-11-06', '2023-11-07', '2023-11-08', '2023-11-09', '2023-11-10', '2023-11-13', '2023-11-14', '2023-11-15', '2023-11-16', '2023-11-17', '2023-11-20', '2023-11-21', '2023-11-22', '2023-11-24', '2023-11-27', '2023-11-28', '2023-11-29', '2023-11-30', '2023-12-01', '2023-12-04', '2023-12-05', '2023-12-06', '2023-12-07', '2023-12-08', '2023-12-11', '2023-12-12', '2023-12-13', '2023-12-14', '2023-12-15', '2023-12-18', '2023-12-19', '2023-12-20', '2023-12-21', '2023-12-22', '2023-12-26', '2023-12-27', '2023-12-28', '2023-12-29', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-08', '2024-01-09', '2024-01-10', '2024-01-11', '2024-01-12', '2024-01-16', '2024-01-17', '2024-01-18', '2024-01-19', '2024-01-22', '2024-01-23', '2024-01-24', '2024-01-25', '2024-01-26', '2024-01-29', '2024-01-30', '2024-01-31', '2024-02-01', '2024-02-02', '2024-02-05', '2024-02-06', '2024-02-07']
let y = [0, 0, 0, -0.02, -0.03, -0.03, -0.03, -0.02, -0.03, -0.02, -0.01, -0, 0, 0, 0, 0, -0.01, -0.01, -0.02, -0.03, -0.03, -0.04, -0.04, -0.04, -0.05, -0.07, -0.06, -0.05, -0.05, -0.03, -0.01, -0.02, -0.01, -0, 0, 0, 0, -0.01, -0, -0, 0, 0, 0, 0, 0, -0.01, -0.01, -0.01, -0.02, -0.02, -0.01, -0.02, -0, -0.01, -0, 0, -0.01, -0, 0, 0, 0, -0.01, -0, -0.01, -0.01, -0.02, -0.02, -0.02, -0.02, -0.03, -0.07, -0.08, -0.09, -0.09, -0.07, -0.07, -0.06, -0.06, -0.06, -0.07, -0.08, -0.05, -0.03, -0.02, -0.01, -0.01, -0.01, -0.02, -0.02, -0.04, -0.06, -0.05, -0.06, -0.05, -0.04, -0.04]

let historicalButtons = [{
    step: 'all',
    label: 'MAX'
  },
  {
    count: 10,
    label: '10Y',
    step: 'year',
    stepmode: 'backward'
  },
  {
    count: 5,
    label: '5Y',
    step: 'year',
    stepmode: 'backward'
  },
  {
    count: 1,
    label: '1Y',
    step: 'year',
    stepmode: 'backward'
  },
  {
    count: 1,
    label: 'YTD',
    step: 'year',
    stepmode: 'todate'
  },
  {
    count: 6,
    label: '6M',
    step: 'month',
    stepmode: 'backward'
  },
  {
    count: 1,
    label: '1M',
    step: 'month',
    stepmode: 'backward'
  }
]

var data = {
  type: "scatter",
  x: x,
  y: y,
}

var layout = {
  xaxis: {
    rangeselector: {
      buttons: historicalButtons
    },
    type: 'date',
    linecolor: '#D8D8D8',
    linewidth: 1,
    mirror: true,
    tickfont: {
      color: '#8f8f8f'
    },
    tickformat: '%B %Y',
    hoverformat: '%d %B %Y',
  },
};

Plotly.newPlot('chart', [data], layout);

<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<div id="chart"></div>

解决方案 #

可以通过监听Plotly的relayout事件，在范围选择器触发后修正X轴的起始范围，确保始终从数据的最小日期开始显示：

1. 提前计算数据中的最小日期和最大日期，方便后续判断
2. 绑定relayout事件，在每次布局更新后检查当前X轴范围，若起始日期早于数据最小日期，则强制将X轴起始值设为数据最小日期

修改后的完整代码如下：

let x = ['2023-09-21', '2023-09-22', '2023-09-25', '2023-09-26', '2023-09-27', '2023-09-28', '2023-09-29', '2023-10-02', '2023-10-03', '2023-10-04', '2023-10-05', '2023-10-06', '2023-10-09', '2023-10-10', '2023-10-11', '2023-10-12', '2023-10-13', '2023-10-16', '2023-10-17', '2023-10-18', '2023-10-19', '2023-10-20', '2023-10-23', '2023-10-24', '2023-10-25', '2023-10-26', '2023-10-27', '2023-10-30', '2023-10-31', '2023-11-01', '2023-11-02', '2023-11-03', '2023-11-06', '2023-11-07', '2023-11-08', '2023-11-09', '2023-11-10', '2023-11-13', '2023-11-14', '2023-11-15', '2023-11-16', '2023-11-17', '2023-11-20', '2023-11-21', '2023-11-22', '2023-11-24', '2023-11-27', '2023-11-28', '2023-11-29', '2023-11-30', '2023-12-01', '2023-12-04', '2023-12-05', '2023-12-06', '2023-12-07', '2023-12-08', '2023-12-11', '2023-12-12', '2023-12-13', '2023-12-14', '2023-12-15', '2023-12-18', '2023-12-19', '2023-12-20', '2023-12-21', '2023-12-22', '2023-12-26', '2023-12-27', '2023-12-28', '2023-12-29', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-08', '2024-01-09', '2024-01-10', '2024-01-11', '2024-01-12', '2024-01-16', '2024-01-17', '2024-01-18', '2024-01-19', '2024-01-22', '2024-01-23', '2024-01-24', '2024-01-25', '2024-01-26', '2024-01-29', '2024-01-30', '2024-01-31', '2024-02-01', '2024-02-02', '2024-02-05', '2024-02-06', '2024-02-07']
let y = [0, 0, 0, -0.02, -0.03, -0.03, -0.03, -0.02, -0.03, -0.02, -0.01, -0, 0, 0, 0, 0, -0.01, -0.01, -0.02, -0.03, -0.03, -0.04, -0.04, -0.04, -0.05, -0.07, -0.06, -0.05, -0.05, -0.03, -0.01, -0.02, -0.01, -0, 0, 0, 0, -0.01, -0, -0, 0, 0, 0, 0, 0, -0.01, -0.01, -0.01, -0.02, -0.02, -0.01, -0.02, -0, -0.01, -0, 0, -0.01, -0, 0, 0, 0, -0.01, -0, -0.01, -0.01, -0.02, -0.02, -0.02, -0.02,