情节.js自动缩放

Plotly.js autoscale

本文关键字：缩放 js 情节      更新时间：2023-09-26

Plotly.js中是否有参数来自动缩放轴以自动拟合绘制的数据？

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

问题：网页加载时，图表不显示任何内容。我会修复轴，但 x 轴需要显示最新的 30 分钟并每分钟更新一次。但是，当我单击"自动缩放"或"重置轴"时，图形与数据完美匹配！

问：是否可以将绘图设置为在页面加载时自动"自动缩放"，而不是要求用户单击"自动缩放"？

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

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

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

它将自动单击"自动缩放"按钮。更好的方法是找出按钮实际调用的函数并改为调用它。

对我来说

，这完美而简单（感谢 https://codepen.io/plotly/pen/KpLVzv）：

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

我通过重新布局解决了这个问题。只需在 xaxis 和 yaxis 上将自动量程属性设置为 'true' 即可。它将在两个轴上自动缩放：

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

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

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

例如

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

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

对我来说

，这完美而简单： . . 变量布局 = { x轴：{ 自动量程：真， 显示网格：假， 零线：假， 显示线：假， 等。 }

相关文章：