帶有jQuery ajax成功函數中的參數的google.setOnLoadCallback

Question

示例代碼：這兩個似乎都可以正常工作，以顯示一條消息：

google.load("visualization", "1", { packages: ["corechart"] });
...
$(document).ready(function () {

  google.setOnLoadCallback(function () {
    alert('from inside ready 1');
  });
});

$(document).ready(function () {

  google.setOnLoadCallback(alert('from inside ready 2'));
});

注意：我僅將alert（..）用於調試目的-我的真實代碼繪制了圖表。 現在，我想在$ .ajax中使用這些技術，例如：

  $.ajax({
    type: "POST",
    ... 
    success: function (result) {
      if (result.d) {

        $(document).ready(function () {
          alert('sucess');

          // option 1
          google.setOnLoadCallback(function () {
            alert('from inside ready 3');
          });

          // option 2
          // google.setOnLoadCallback(alert('from inside ready 4'));
        });

現在，關於ajax成功，我可以看到顯示了“成功”，但是選項1似乎不起作用。 即我看不到“從內部准備好3”。 如果我啟用了選項2的代碼，並注釋掉了選項1的代碼，我確實會看到“從內部准備好4”。

因此，似乎從jquery ajax調用中的選項2起作用了，但沒有起作用。 誰能闡明一些想法？ 選項2 100％安全使用嗎？ 似乎可行，但是我所看到的所有示例似乎都使用了選項1。

Answer 1

首先，您使用的是舊版的Google圖表，
不再使用jsapi庫，
請參閱發行說明 ...

可以通過jsapi加載程序保留的Google圖表版本不再保持一致更新。 從現在開始，請使用新的gstatic loader.js 。

舊： <script src="https://www.google.com/jsapi"></script>

當前： <script src="https://www.gstatic.com/charts/loader.js"></script>

這只會改變加載語句...

從...

google.load("visualization", "1", { packages: ["corechart"] });

至...

google.charts.load("current", { packages: ["corechart"] });

---

接下來，您不需要在每次繪制圖表時都使用回調函數，
它只需要使用一次，以確保Google圖表已加載。

還有使用回調的幾種方法，
您可以使用更新的setOnLoadCallback函數。

google.charts.setOnLoadCallback(drawChart);

或者您可以將回調直接放在load語句中。

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

或我更喜歡的是它的回報。 （Google包括針對IE的Promise Polyfill）

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

---

現在要解決的問題是
谷歌的load語句將默認等待文檔加載，
因此您可以使用google.charts.load代替$(document).ready

建議先加載Google，然后使用Ajax獲取數據，然后繪制圖表。

類似於以下設置...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  // get data for chart 1
  $.ajax({
    type: 'POST',
    ...
  }).done(function (result) {

    drawChart1(result.d);

  }).fail(function (jqXHR, status, errorThrown) {
    console.log(errorThrown);
  });

  // get data for chart 2
  $.ajax({
    type: 'POST',
    ...
  }).done(function (result) {

    drawChart2(result.d);

  }).fail(function (jqXHR, status, errorThrown) {
    console.log(errorThrown);
  });

});

function drawChart1(chartData) {
  ...
}

function drawChart2(chartData) {
  ...
}