在传递给google.setOnLoadCallback()的函数中使用参数;
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:
我正在尝试使用谷歌可视化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对象的最佳方法是什么?谢谢你的时间。
2 个解决方案
#1
13
The following are the steps to make it work:
以下是使其工作的步骤:
- Place google.load and google.setOnLoadCallback in a separate script tag.
- 谷歌的地方。加载和谷歌。setOnLoadCallback放在单独的脚本标签中。
- Use a function expression.
- 使用一个函数表达式。
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>
更多相关文章
- HTML/JS作为本地SQLite数据库的接口
- 如何使用条件if()使用javascript检索带有指定值的选择标记的xml数
- 另一个iframe中的iframe的onload函数
- 使用Object.observe 实现数据绑定
- 环回 - 在“保存后”挂钩中覆盖之前查看数据
- 基于缓冲区数据创建文件
- 怎么javascript读取本地文件中的数据,并显示在html上
- 使用异步库汇编数据库中的所有标记
- JavaScript 中的函数介绍