如何在 Plotly.JS 中删除范围选择器按钮中大范围的过时日期？

Question

我有一个 x 轴为日期的线图。我的数据是动态的，因此日期范围总是在变化。有时是 1 年，有时是 10 年，等等

我添加此代码块来排列 x 轴：

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',
}

效果很好，但是当我单击比我的数据大的时间范围时，图表左侧有空白区域。

我知道这是预期的，但我想用数据的最小日期更新此图表，即使选择了更多范围。

有什么办法可以解决这个问题吗？

也许我可以在范围选择器按钮中设置开始和结束日期，而不是“1 年”、“5 年”。我没有办法。

---

编辑： 这是一个活生生的例子。当您单击间隔（例如 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>

Answer 1

这是一个工作版本。 https://jsfiddle.net/v41anqcf/2/

如您所见：

1. 您必须在

   rangeslider: {}

   定义中指定

   xaxis

2. 我让它与旧的

   plotly-1.8.0.min.js

   一起工作。不是较新的版本，不要问我为什么...Plotly 在其 CodePen 生成的演示中仍然使用这个旧版本。