Plotly,js - Y 自动缩放

Question

我有一个折线图。当我运行时，图表会在 Y 轴上自动调用。这意味着它会自动显示最大和最小数据。假设图表显示一小时的数据。所以，xaxis.range = ['01/01/2020 12:00', '01/01/2020 01:00']。如果我将 xaxis.range 更改为 ['01/01/2020 12:30', '01/01/2020 01:00'] 然后重新布局图表，它会自动将 Y 轴缩放到新的最小值和落在新的 X 轴范围之间的数据的最大值？

谢谢

这是一个例子： Pen

和代码：

var data = [
  {
    x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
    y: [1, 3, 6],
    type: 'scatter'
  }
];

var myDiv = document.getElementById('myDiv');
Plotly.newPlot(myDiv, data);
myDiv.layout.xaxis.range = ['2013-10-04 22:23:00', '2013-11-04 22:23:00'];
Plotly.relayout(myDiv, myDiv.layout);

我正在尝试更改 X 范围，但即使这样也没有发生。

Answer 1

不，截至今天，还无法根据 x 轴上当前可见的数据自动缩放 y 轴。这已在此处的 github 问题中进行了讨论：https://github.com/plotly/plotly.js/issues/1876#issuecomment-314913229

但是，如果你自己计算新的y轴的最小值和最大值，你应该可以通过relayout方法来设置。

const data = [
  {
    x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
    y: [1, 3, 6],
    type: 'scatter'
  }
];

const myDiv = document.getElementById('myDiv');
Plotly.newPlot(myDiv, data).then(() => {
  const xRange = ['2013-10-04 22:23:00', '2013-11-04 22:23:00'];
  const yRange = [1, 3];
  Plotly.relayout(myDiv, {
    'xaxis.range': xRange,
    'yaxis.range': yRange
  });  
});

<head>
 <!-- Load plotly.js into the DOM -->
 <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
 <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Plotly,js - Y 自动缩放

Plotly,js - Y autoscale

plotly.js