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

Question

在 Javascript API（plotly.js，不是 plotly-nodejs）中使用任何类型的绘图时，我如何运行一些 javascript 仅在图表加载后？我正在寻找 javascript API 中的机制，例如，与 'tilesloaded' 或 'ready' 一起做与 'addListenerOnce' 相同的事情, 在使用 Google 地图时做 API.

例如，假设我只想在呈现 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，不回答一般问题）。

首选独立于浏览器的解决方案，但至少需要一个适用于 Chrome

的解决方案

Answer 1

在此页面上：https://plot.ly/javascript/getting-started/

岁以下

Start plotting!

您需要创建一个 div 和 id。

通过添加 onload 作为 attribute（或 javascript）

你明白了：<div id="tester" onload="myFunction()" style="width:600px;height:250px;"></div>

"myFunction" 可以包含加载图像后要执行的代码。

http://www.w3schools.com/jsref/event_onload.asp

Answer 2

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

等待动画帧完成

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

这是一个例子：

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

plotly js: how to run my javascript ONLY after plot image is loaded

javascript

wkhtmltopdf

plotly

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