使用传递给google.setOnLoadCallback()的函数中的参数;

Question

使用传递给google.setOnLoadCallback()的函数中的参数;

meb*_*rbo 17 javascript php mysql google-visualization

我正在尝试使用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>

Run Code Online (Sandbox Code Playgroud)

我试图首先看看我是否可以在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>

Run Code Online (Sandbox Code Playgroud)

我不太清楚为什么这不起作用.使用来自PHP MySQL调用的动态收集数据创建DataTable对象的最佳方法是什么？谢谢你的时间.

Answer 1

Chr*_*loe 38

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

尝试:

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 21

以下是使其工作的步骤:

将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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，9 月前
查看次数：	17223 次
最近记录：	8 年，4 月前