Plotly.js 自动缩放

Question

Plotly.js 中是否有一个参数可以自动缩放坐标轴以自动适应绘制的数据？

场景：我正在绘制最近 30 分钟的温度（y 轴）与时间（x 轴）的关系图。

问题：加载页面时，图表不显示任何内容。我会修复轴，但 x 轴需要显示最近 30 分钟并每分钟更新一次。但是，当我单击 'Autoscale' 或 'Reset Axes' 时，图表与数据完全吻合！

问题：我能否将绘图设置为在页面加载时自动 "Autoscale"，而不是要求用户单击 'autoscale'？

在此处查看应用程序：https://vast-fortress-23871.herokuapp.com/

Answer 1

一个非常愚蠢的 hack 是添加这个：

document.querySelector('[data-title="Autoscale"]').click()

它会自动点击自动缩放按钮。更好的方法是找出按钮实际调用的函数并调用它。

Answer 2

我遇到了同样的问题。您链接到的代码已缩小，所以我无法（不会）阅读它，但这是我做错的地方：

如果 plotly.newPlot() 在加载所有数据之前运行，那么它不会自动调整范围（因为它没有数据并且不知道要检查）。

例如

var plotdata = [x:[],y:[],type: 'scatter'];
$.get('mydata.dat',(x) => {/*put parsed x into plotdata*/});
Plotly.newPlot('mydiv',plotdata,layout);

请注意，绘图数据会在绘图创建后填充，因为 $.get() 是异步的。

Answer 3

我通过重新布局解决了这个问题。只需在 x 轴和 ya 轴上的 'true' 处设置自动范围属性。它将在两个轴上自动缩放：

// To call when data is ready, after your page loads.
Plotly.relayout( yourGraph, {
    'xaxis.autorange': true,
    'yaxis.autorange': true
});

Answer 4

对我来说，这非常简单： . . 变种布局= { x轴：{ 自动量程：真，显示网格：假的，零线：假的，显示线：假的，等等 }

Answer 5

对我来说，这非常简单（感谢 https://codepen.io/plotly/pen/KpLVzv）：

// script comes before
var layout = {
  xaxis: {
    autorange: true,
    showgrid: false,
    zeroline: false,
    showline: false,
    etc.
    }
// script comes after

Plotly.js 自动缩放

Plotly.js autoscale

javascript

plotly