如何延迟加载谷歌图表

Question

我有一个html网站，我想为用户做一个小调查，并使用谷歌图表中的饼图显示调查的实时结果。但一旦我加载页面，饼图就会自动加载，而且它不包括用户的数据(显然是因为他还没有回答调查表(。一旦用户回答了调查表，我如何加载饼图，而不是之前。我尝试使用事件侦听器，但它似乎并不能解决问题。这是启动图表的代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['result', 'number of people'],
['1',<%=Application["A1"]%>],
['2', <%=Application["A2"]%>],
['3', <%=Application["A3"]%>],
['4', <%=Application["A4"]%>],
]);
var options = {
title: 'תוצאות הסקר'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);

}
</script>

我已经像你建议的那样更改了代码，现在看起来像这个

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
let googleReady = false;
let dataReady = false;
google.charts.setOnLoadCallback(() => {
console.log("google redy")
googleReady = true;
tryDraw();
});

const form = document.getElementById("form");
form.addEventListener('submit', function () {
console.log("data redy")
dataReady = true;
tryDraw();
})

function tryDraw() {
if (googleReady && dataReady) {
console.log("everything good")
drawChart();
}
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['result', 'number of people'],
['1',<%=Application["A1"]%>],
['2', <%=Application["A2"]%>],
['3', <%=Application["A3"]%>],
['4', <%=Application["A4"]%>],
]);
var options = {
title: 'תוצאות הסקר'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>

当我汇总表单并查看控制台时，所有3个日志都在那里，这意味着一切都运行得很好，图表开始加载，但当我按下submit时，页面立即刷新，图表消失了。你能为页面刷新提供一个解决方案吗？

Answer 1

google.charts.setOnLoadCallback(drawChart);语句在图表库准备就绪后立即调用draw函数，而不管用户数据是否准备就绪。

一种解决方案并不特别时髦，但解释了其逻辑，即设置布尔变量，这些变量在加载图表库和接收用户数据时变为true。

值得注意的是，不要直接从图表回调中调用drawChart，而是将回调设置为更改googleReady布尔值，并尝试通过另一个函数tryDraw进行绘制。同样，当您拥有的任何事件侦听器被触发并调用tryDraw时，准备好的用户数据的布尔值就会设置为true。当两个布尔值都为true时，将从tryDraw内部调用drawChart

let googleReady = false;
let dataReady = false;
google.charts.setOnLoadCallback(() => {
googleReady = true;
tryDraw();
});

// whatever listener for user data present {
dataReady = true;
tryDraw();
}
} // end listener
function tryDraw() {
if(googleReady && dataReady) {
drawChart();
}
}