plotly js：如何在加載繪圖圖像后運行我的javascript

Question

當使用Javascript API（plotly.js，而不是plotly-nodejs）使用任何類型的圖形圖時，如何在圖形加載后運行一些javascript？ 我正在尋找圖形化javascript API中的機制，例如，在使用Google Maps API時，“addListenerOnce”與“tilesloaded”或“ready”一起執行相同的操作。

例如，假設我想在呈現https://plot.ly/~PlotBot/685所示的示例后立即顯示警報，可以在https://plot.ly上看到html和js代碼。 / ~PlotBot/685.js 。

有很多理由這樣做，但我現在面對的是使用wkhtml2pdf，它必須等待頁面在顯示之前呈現（參見wkhtmltopdf javascript延遲 ）（是的，我知道我可以使用--javascript-delay與wkhtml2pdf，但硬編碼固定的時間，並希望你的程序等待足夠長的時間，以便其下一步成功不是我正在尋找的解決方案 - 此外，這種方法是特定於wkhtml2pdf，並沒有回答一般題）。

喜歡獨立於瀏覽器的解決方案，但至少需要一個適用於Chrome的解決方案

Answer 1

如上面的評論所述，使用承諾是正確的解決方案。 但是，承諾在第一個動畫幀完成渲染之前觸發。 作為一種解決方法，您可以使用requestAnimationFrame訂閱promise，然后等待動畫幀完成。

編輯：單個動畫幀足以支持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> 

Answer 2

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

開始繪圖！

系統會要求您創建一個帶有id的div 。

通過添加onload作為attribute （或在javascript中）

你得到這個： <div id="tester" onload="myFunction()" style="width:600px;height:250px;"></div>

“myFunction”可以包含加載圖像后要執行的代碼。

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