Использовать параметр в функции, переданной в 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? Спасибо за ваше время.
Ответы
Ответ 1
Ниже приведены шаги, которые помогут сделать это:
- Поместите google.load и google.setOnLoadCallback в отдельный тег script.
- Используйте выражение функции.
Вот рабочий код:
<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>
Ответ 2
в первом примере вы передаете функцию обратному вызову, во втором примере вы вызывают функцию, а затем передаете результат этого вызова обратному вызову.
попробовать:
setOnLoadCallback(function(){ drawChart(data) })