在传递给google.setOnLoadCallback()的函数中使用参数；
在传递给google.setOnLoadCallback()的函数中使用参数；
提问于 2011-05-09 03:25:30
我正在尝试使用Google Visualization API来显示从MySQL服务器收集的数据。我想使用PHP获取数据，然后将其传递给javascript函数调用以创建图表。当我这样做时，我在向传递给google.setOnLoadCallback()；的函数传递参数时遇到了问题。我是网络编程的新手，所以请耐心听我说。工作代码(几乎来自他们的文档)如下所示：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1000);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>我尝试先看看是否可以在drawChart()函数之外设置数据，并将其作为参数进行传递：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'Year');
data1.addColumn('number', 'Sales');
data1.addRows(4);
data1.setValue(0, 0, '2004');
data1.setValue(0, 1, 1000);
data1.setValue(1, 0, '2005');
data1.setValue(1, 1, 1170);
data1.setValue(2, 0, '2006');
data1.setValue(2, 1, 660);
data1.setValue(3, 0, '2007');
data1.setValue(3, 1, 1000);
google.setOnLoadCallback(drawChart(data1));
function drawChart(data) {
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>我不太确定为什么这个不起作用。使用从PHP MySQL调用中动态收集的数据来创建DataTable对象的最佳方式是什么？耽误您时间，实在对不起。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-10-16 17:20:15
以下是使其正常工作的步骤：
- 将google.load和google.setOnLoadCallback放在单独的脚本标记中。
- 使用函数表达式。
以下是工作代码：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function() { drawChart(data1); });
</script>
<script type="text/javascript">
var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'Year');
data1.addColumn('number', 'Sales');
data1.addRows(4);
data1.setValue(0, 0, '2004');
data1.setValue(0, 1, 1000);
data1.setValue(1, 0, '2005');
data1.setValue(1, 1, 1170);
data1.setValue(2, 0, '2006');
data1.setValue(2, 1, 660);
data1.setValue(3, 0, '2007');
data1.setValue(3, 1, 1000);
function drawChart(data) {
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>Stack Overflow用户
发布于 2011-05-09 08:00:15
在第一个示例中，将函数传递给回调函数，在第二个示例中，调用函数，然后将调用结果传递给回调函数。
尝试：
setOnLoadCallback(function(){ drawChart(data) })页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5929734
复制相关文章
相似问题