在传递给google.setOnLoadCallback（）的函数中使用参数;

我正在尝试使用Google Visualization API来显示从MySQL服务器收集的数据。我想使用PHP获取数据，然后将其传递给javascript函数调用来创建图表。当我这样做时，我有一个问题传递给传递给google.setOnLoadCallback（）;的函数的参数。我对网络编程相当陌生，请耐心等待。工作代码（从自己的文件几乎）是这样的：在传递给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对象的最佳方法是什么？谢谢你的时间。

来源

2011-05-08 meburbo

以下是使它工作的步骤：在一个单独的脚本标记

广场的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>

来源

2012-10-16 09:20:15

在第一个示例中，您将函数传递给回调函数，在第二个示例中您将函数调用函数，然后将该调用的结果传递给回调函数。

尝试：

setOnLoadCallback(function(){ drawChart(data) })

来源

2011-05-09 00:00:14

我这样做，并用虚拟变量进行测试，成功通过他们。但由于某种原因，当我尝试在函数之外创建DataTable并将其作为参数传递时，它不喜欢它。 – meburbo 2011-05-11 21:01:19

更新您的示例代码以反映您已更改的内容 – 2011-05-12 09:21:27

在传递给google.setOnLoadCallback（）的函数中使用参数;

回答

相关问题