我正在制作一个图表密集的项目,我正在尝试创建一个页面,因为我的IFRAME或ajax请求将为我生成图表。唯一的问题是传递数据。我正在尝试使用javascript url解码,因为<?php echo $_GET['data']; ?>
无法使用。
TLDR;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
<?php echo $_GET["type"]; ?> chart
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
function getFileArgs() {
var $_GET = {},
args = location.search.substr(1).split(/&/);
for (var i=0; i<args.length; ++i) {
var tmp = args[i].split(/=/);
if (tmp[0] != "") {
$_GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp.slice(1).join("").replace("+", " "));
}
}
return $_GET
}
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
getFileArgs().data.split("]")
]);
// Create and draw the visualization.
new google.visualization.<?php echo $_GET['type']; ?>(document.getElementById('visualization')).
draw(data, {title:"<?php echo $_GET['title'] ?>"});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
答案 0 :(得分:0)
我怀疑有一种更好的方法可以实现你想要的,而不需要使用iframe来创建这样的图表,但如果这是你想要使用的方法,那么你将如何去做。首先,在生成数据的最后,您应该对数据数组进行JSON编码,如下所示:
var myData = [
['Name', 'Value'],
['Foo', 5],
['Bar', 7]
];
var myJsonData = JSON.stringify(myData);
您可以将myJsonData
添加到网址的data
参数中(当然,使用适当的网址编码)。
在你的iframe中,没有任何理由不能使用PHP的$_GET
数组来获取data
参数而不是使用javascript。 PHP会自动解码data
的内容,因此您只需将其输出到javascript即可。使用JSON的好处是PHP的字符串输出将解析为有效的javascript对象,而无需进一步编码:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable(<?php echo $_GET['data']; ?>);
// Create and draw the visualization.
new google.visualization.<?php echo $_GET['type']; ?>(document.getElementById('visualization')).
draw(data, {title:"<?php echo $_GET['title']; ?>"});
}