Использовать параметр в функции, переданной в google.setOnLoadCallback();

Я пытаюсь использовать API визуализации Google для отображения данных, собранных с сервера 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>

Я не слишком уверен, почему это не работает. Каким будет лучший способ создать объект DataTable, используя динамически собранные данные из вызова PHP MySQL? Спасибо за ваше время.


mysql javascript php google-visualization
person meburbo    schedule 08.05.2011    source источник

Ответы (2)


arrow_upward
25
arrow_downward

Ниже приведены шаги, чтобы заставить его работать:

  1. Поместите google.load и google.setOnLoadCallback в отдельный тег сценария.
  2. Используйте функциональное выражение.

Вот рабочий код:

<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>
person Daniel Andrzejewski    schedule 16.10.2012
comment
нам не нужны отдельные теги сценария. он отлично работает в одном теге - person ahmednawazbutt; 19.10.2020

arrow_upward
42
arrow_downward

в первом примере вы передаете функцию обратному вызову, во втором примере вы вызываете функцию, а затем передаете результат этого вызова обратному вызову.

пытаться:

setOnLoadCallback(function(){ drawChart(data) })
person Chris Farmiloe    schedule 09.05.2011
comment
Я сделал это и протестировал фиктивную переменную, успешно передав их. Но по какой-то причине, когда я пытаюсь создать DataTable вне функции и передать это как параметр, мне это не нравится. - person meburbo; 12.05.2011