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有效，但选项1不起作用。谁能阐明一些想法？选项2 100％安全使用吗？似乎可行，但是我所看到的所有示例似乎都使用了选项1。

Answer 1

首先，您使用的是旧版的Google图表，
jsapi库应该不再使用，
参见release notes ...

通过jsapi加载程序仍然可用的Google Charts版本不再被一致更新。从现在开始，请使用新的静态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) {
  ...
}

带有jQuery ajax成功函数中的参数的google.setOnLoadCallback

1 个答案: