plotly js：如何在加载绘图图像后运行我的javascript [英] plotly js: how to run my javascript ONLY after plot image is loaded

问题描述

当使用Javascript API（plotly.js，而不是plotly-nodejs）使用任何排序的图形图时，如何在图表加载后运行一些javascript？我正在寻找图形化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延迟）（是的，我知道我可以使用--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

推荐答案

如上面的评论所述，使用承诺是正确的解决方案。但是，承诺在第一个动画帧完成渲染之前触发。作为一种解决方法，您可以使用 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.

编辑： A单个动画帧足以支持Firefox，但不适用于Chrome。所以我正在编辑使用一对动画帧，这似乎可以解决Chrome中的问题，并且应该继续在Firefox中运行。这当然只是Plotly中一个问题的解决方法，因为在实际渲染图之前，承诺不应解决。

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>

这篇关于plotly js：如何在加载绘图图像后运行我的javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！