google.setOnLoadCallback with parameter inside jquery ajax s

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"。

因此，似乎选项 2 有效，但选项 1 不适用于 jquery ajax 调用。谁能说出一些启示？选项 2 100% 安全使用吗？它似乎有效，但我看到的所有示例似乎都使用选项 1。

Answer 1

首先，您使用的是旧版本的Google图表，
jsapi库应该不再使用
，请参阅发行说明...

通过jsapi加载程序提供的 Google 图表版本不再持续更新。请从现在开始使用新的静态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"] });

---

接下来，你不需要每次需要绘制图表时都使用回调，只需要使用一次，
以确保谷歌图表已经加载。

并且有几种使用回调的方法，
可以使用更新的setOnLoadCallback函数。

google.charts.setOnLoadCallback(drawChart);

或者，您可以将回调直接放在load语句中。

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

或者我更喜欢的，它回报的承诺。(谷歌包括一个用于IE的承诺polyfill(

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

---

现在到手头的问题，
Google 的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) {
...
}