plotly js:如何仅在加载绘图图像后运行我的 javascript

2022-01-21 00:00:00 plotly wkhtmltopdf javascript

当使用带有 Javascript API(plotly.js，而不是 plotly-nodejs)的任何类型的 plotly 图表时，如何仅在图表加载后运行一些 javascript?我正在寻找 plotly javascript API 中的机制，例如，它在使用 Google Maps API 时与addListenerOnce"结合tilesloaded"或ready"执行相同的操作.

When using a plotly graph of any sort with the Javascript API (plotly.js, not plotly-nodejs), how can I run some javascript ONLY after the graph has loaded? I'm looking for the mechanism in the plotly javascript API that, for example, does the same thing that 'addListenerOnce', in conjunction with 'tilesloaded' or 'ready', do when using the Google Maps API.

例如，假设我想在渲染 https:///plot.ly/~PlotBot/685，其html和js代码可见https://plot.ly/~PlotBot/685.js.

For example, let's say I want to simply display an alert immediately after rendering the example shown at https://plot.ly/~PlotBot/685, for which the html and js code can be seen at https://plot.ly/~PlotBot/685.js.

这样做的原因有很多，但我现在面临的一个是使用 wkhtml2pdf，它必须等待页面渲染后才能显示(参见 wkhtmltopdf javascript delay)(是的，我知道我可以将 --javascript-delay 与 wkhtml2pdf 一起使用，但是硬编码固定的时间量并希望您的程序等待足够长的时间以使其下一步成功不是我正在寻找的解决方案-此外，该方法特定于 wkhtml2pdf 并且不回答一般问题.

There are many reasons to do this, but the one I am faced with now is using wkhtml2pdf, which must wait for the page to be rendered before displaying (see wkhtmltopdf javascript delay) (Yes, I know I can use --javascript-delay with wkhtml2pdf, but hardcoding a fixed amount of time and hoping that your program waited long enough for its next steps to succeed is not the solution I'm looking for-- and besides, that approach is specific to wkhtml2pdf and does not answer the general question).

更喜欢独立于浏览器的解决方案，但至少需要一个可以在 Chrome 上运行的解决方案

Prefer a browser-independent solution but at the least, need one that works on Chrome

推荐答案

如上面评论中提到的，使用 promise 是正确的解决方案.但是，承诺会在第一个动画帧完成渲染之前触发.作为一种解决方法，您可以订阅承诺，然后等待动画帧完成，使用 requestAnimationFrame.

Using the promise, as mentioned in the comments above, is the correct solution. However, the promise fires before the first animation frame is done rendering. As a workaround, you can subscribe to the promise and then wait for the animation frame to finish, using requestAnimationFrame.

单个动画帧对于 Firefox 来说就足够了，但对于 Chrome 则不行.所以我正在编辑使用一对动画帧，这似乎解决了 Chrome 中的问题，并且应该继续在 Firefox 中工作.当然，这只是 Plotly 中问题的一种解决方法，因为在情节实际呈现之前，promise 不应该解决.

A single animation frame was sufficient for Firefox, but not Chrome. So I'm editing to use a pair of animation frames, which appears to fix the issue in Chrome, and should continue to work in Firefox. This of course is just a workaround for an issue in Plotly, as the promise should not resolve until the plot has actually rendered.

这是一个例子:

var trace1 = {
  z: [[8.83, 8.89, 8.81, 8.87, 8.9, 8.87], [8.89, 8.94, 8.85, 8.94, 8.96, 8.92], [8.84, 8.9, 8.82, 8.92, 8.93, 8.91], [8.79, 8.85, 8.79, 8.9, 8.94, 8.92], [8.79, 8.88, 8.81, 8.9, 8.95, 8.92], [8.8, 8.82, 8.78, 8.91, 8.94, 8.92], [8.75, 8.78, 8.77, 8.91, 8.95, 8.92], [8.8, 8.8, 8.77, 8.91, 8.95, 8.94], [8.74, 8.81, 8.76, 8.93, 8.98, 8.99], [8.89, 8.99, 8.92, 9.1, 9.13, 9.11], [8.97, 8.97, 8.91, 9.09, 9.11, 9.11], [9.04, 9.08, 9.05, 9.25, 9.28, 9.27], [9, 9.01, 9, 9.2, 9.23, 9.2], [8.99, 8.99, 8.98, 9.18, 9.2, 9.19], [8.93, 8.97, 8.97, 9.18, 9.2, 9.18]], 
  colorbar: {
    xpad: 0, 
    ypad: 0
  }, 
  showscale: false, 
  type: "surface", 
  uid: "3f95e8", 
  zmax: 9.28, 
  zmin: 8.74
};
var trace2 = {
  z: [[9.83, 9.89, 9.81, 9.87, 9.9, 9.87], [9.89, 9.94, 9.85, 9.94, 9.96, 9.92], [9.84, 9.9, 9.82, 9.92, 9.93, 9.91], [9.79, 9.85, 9.79, 9.9, 9.94, 9.92], [9.79, 9.88, 9.81, 9.9, 9.95, 9.92], [9.8, 9.82, 9.78, 9.91, 9.94, 9.92], [9.75, 9.78, 9.77, 9.91, 9.95, 9.92], [9.8, 9.8, 9.77, 9.91, 9.95, 9.94], [9.74, 9.81, 9.76, 9.93, 9.98, 9.99], [9.89, 9.99, 9.92, 10.1, 10.13, 10.11], [9.97, 9.97, 9.91, 10.09, 10.11, 10.11], [10.04, 10.08, 10.05, 10.25, 10.28, 10.27], [10, 10.01, 10, 10.2, 10.23, 10.2], [9.99, 9.99, 9.98, 10.18, 10.2, 10.19], [9.93, 9.97, 9.97, 10.18, 10.2, 10.18]], 
  opacity: 0.9, 
  showscale: false, 
  type: "surface", 
  uid: "443a24", 
  zmax: 10.28, 
  zmin: 9.74
};
var trace3 = {
  z: [[7.83, 7.89, 7.81, 7.87, 7.9, 7.87], [7.89, 7.94, 7.85, 7.94, 7.96, 7.92], [7.84, 7.9, 7.82, 7.92, 7.93, 7.91], [7.79, 7.85, 7.79, 7.9, 7.94, 7.92], [7.79, 7.88, 7.81, 7.9, 7.95, 7.92], [7.8, 7.82, 7.78, 7.91, 7.94, 7.92], [7.75, 7.78, 7.77, 7.91, 7.95, 7.92], [7.8, 7.8, 7.77, 7.91, 7.95, 7.94], [7.74, 7.81, 7.76, 7.93, 7.98, 7.99], [7.89, 7.99, 7.92, 8.1, 8.13, 8.11], [7.97, 7.97, 7.91, 8.09, 8.11, 8.11], [8.04, 8.08, 8.05, 8.25, 8.28, 8.27], [8, 8.01, 8, 8.2, 8.23, 8.2], [7.99, 7.99, 7.98, 8.18, 8.2, 8.19], [7.93, 7.97, 7.97, 8.18, 8.2, 8.18]], 
  opacity: 0.9, 
  showscale: false, 
  type: "surface", 
  uid: "47cf99", 
  zmax: 8.28, 
  zmin: 7.74
};
var data = [trace1, trace2, trace3];
var layout = {
  autosize: false, 
  height: 200, 
  margin: {
    r: 0, 
    t: 0, 
    autoexpand: false, 
    b: 0, 
    l: 0
  }, 
  scene: {
    aspectmode: "manual", 
    aspectratio: {
      x: 1, 
      y: 1, 
      z: 1
    }, 
    camera: {
      center: {
        x: 0, 
        y: 0, 
        z: 0
      }, 
      eye: {
        x: 1.59999582495, 
        y: 1.57131061558, 
        z: 0.970117065684
      }, 
      up: {
        x: 0, 
        y: 0, 
        z: 1
      }
    }
  }, 
  width: 650
};
Plotly.plot('plotly-div', data, layout).then(function() {
  window.requestAnimationFrame(function() {
    window.requestAnimationFrame(function() {
      window.alert('Your plot is done.');
    });
  });
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plotly-div"></div>

相关文章