在 Google 图表中显示来自 $_GET 值的数据答案

【问题标题】：Display data in Google Charts from $_GET value在 Google 图表中显示来自 $_GET 值的数据
【发布时间】：2014-03-23 17:42:57
【问题描述】：

我正在制作一个图表非常繁重的项目，并且我正在尝试制作一个我拥有的 IFRAME 或 ajax 请求页面，该页面将为我生成图表。唯一的问题是传递数据。我正在尝试使用 javascript url 解码，因为 <?php echo $_GET['data']; ?> 无法使用。

TLDR；

我正在制作一款图表重的网页游戏
我正在使用 Google 图表
我正在制作一个页面，将在 ajax 请求的 iframe 中显示所有图表
我正在使用 javascipt 的 urldecode 函数

graph.php?title=[title]&data=[data]&type=PieChart：

<!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>

【问题讨论】：

标签： javascript php html charts google-visualization

【解决方案1】：

我怀疑有更好的方法来实现你想要的，而无需使用 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']; ?>"});
  }

【讨论】：

我可以将图形数据存储在 sessionStorage 中。并在标题中引用它，例如?data=sessionStorage.graphdata。使用会话存储将使其轻松 1000 万倍，但该页面只能由 JavaScript 使用。可能会，但我不知道
我不能这样做，因为 sessionStorage 会将所有内容都转换为字符串
您可以将数据存储为 JSON 字符串，就像我在回答中建议的那样。