javascript 在传递给 google.setOnLoadCallback() 的函数中使用参数；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5929734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use parameter in function passed to google.setOnLoadCallback();
提问by meburbo
I'm trying to use Google Visualization API to display data gathered from a MySQL server. I want to get the data using PHP and then pass it into the javascript function call to create a chart. When I do this, I'm having a problem passing parameters to the function passed to google.setOnLoadCallback();. I'm fairly new to web programming, so bear with me. The working code (pretty much from their docs) looks like this:
我正在尝试使用 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>
I was trying to first see if I could set up the data outside of the drawChart() function and pass it as a parameter as so:
我试图首先查看是否可以在 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>
I'm not too sure why this doesn't work. What would be the best way to create the DataTable object using dynamically gathered data from a PHP MySQL call? Thanks for your time.
我不太确定为什么这不起作用。使用从 PHP MySQL 调用动态收集的数据创建 DataTable 对象的最佳方法是什么？谢谢你的时间。
回答by Chris Farmiloe
in the first example you pass in the function to the callback, in the second example you callthe function and then pass in the result of that call to the callback.
在第一个示例中，您将函数传递给回调，在第二个示例中，您调用该函数，然后将该调用的结果传递给回调。
try:
尝试：
setOnLoadCallback(function(){ drawChart(data) })
回答by Daniel Andrzejewski
The following are the steps to make it work:
以下是使其工作的步骤：
- Place google.load and google.setOnLoadCallback in a separate script tag.
- Use a function expression.
- 将 google.load 和 google.setOnLoadCallback 放在单独的脚本标记中。
- 使用函数表达式。
Here is the working code:
这是工作代码：
<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>
