时间戳

首页 > 解决方案 > Plotly,js - Y 自动缩放

plotly.js - Plotly,js - Y 自动缩放

问题描述

我有一个折线图。当我运行它时，图表会在 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 轴范围之间？

谢谢

这是一个例子： 笔

和代码：

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 范围，但即使这样也没有发生。

标签： plotly.js

解决方案

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

但是，如果您自己计算 y 轴的新最小值和最大值，您应该可以通过重新布局方法设置它。

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>

推荐阅读