简体   繁体   中英

Plotly.js autoscale

Is there a parameter in Plotly.js to autoscale the axes to fit the plotted data automatically?

Scenario: I'm plotting temperature(y-axis) vs. time(x-axis) over the latest 30 minutes.

Problem: When the page loads, the graph shows nothing. I would fix the axes, but the x-axis needs to show latest 30 minutes and update every minute. However, when I click 'Autoscale' or 'Reset Axes', the graph fits the data perfectly!

Question: Can I set the plot to automatically "Autoscale" when the page loads, rather than requiring a user to click 'autoscale'?

See app here: https://vast-fortress-23871.herokuapp.com/

A really silly hack is to add this:

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

It will automatically click the Autoscale button. A better way would be to figure out what function the button is actually calling and call that instead.

I had the same problem. The code you linked to is minified so I can't (won't) read it, but here's what I did wrong:

If plotly.newPlot() runs before all the data is loaded then it won't autorange (because it has no data and doesn't know to check).

eg

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

note that plotdata gets populated after the plot was created because $.get() is asynchronous.

I solved this problem with a relayout. Just set autorange property at 'true' on xaxis and yaxis. It will autoscale on both axis :

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

For me, this worked perfectly and simply: . . var layout = { xaxis: { autorange: true, showgrid: false, zeroline: false, showline: false, etc. }

For me, this worked perfectly and simply (thanks to https://codepen.io/plotly/pen/KpLVzv ):

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM