从$ _GET值在Google Charts中显示数据

时间:2014-03-23 17:42:57

标签: javascript php html5 charts google-visualization

我正在制作一个图表密集的项目,我正在尝试创建一个页面,因为我的IFRAME或ajax请求将为我生成图表。唯一的问题是传递数据。我正在尝试使用javascript url解码,因为<?php echo $_GET['data']; ?>无法使用。

TLDR;

  • 我正在制作图表重型网页游戏
  • 我正在使用 Google Charts
  • 我正在创建一个页面,该页面将显示ajax请求的iframe中的所有图表
  • 我正在使用javascipt&#urldecode函数
graph.php标题= [标题]&安培;数据= [数据]&安培;类型=饼图:
<!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>

1 个答案:

答案 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']; ?>"});
  }