Question

我计划使用googlecharts绘制存储在本地数据库中的数据 - googlecharts代码也将存储在本地服务器上。我使用XAMPP创建了一个本地目录（＆＃39; http://http://127.0.0.1/）。在进入项目之前，我正在测试一个示例脚本（我从谷歌搜索中找到），该脚本从json文件（从php脚本调用）获取数据，然后将其提供给googlecharts绘图函数。根据建议，3个文件都存储在文件夹“C：\ xampp \ htdocs”中，但是当我在浏览器中加载页面（http://127.0.0.1/test_php_long.html）时，页面显示为空白（在Chrome上， IE和Firefox）。当我运行googlecharts脚本并将数据硬编码到HTML中时，它可以正常工作。我一直在网上寻找几个小时，但还没有找到一个有效的解决方案。

这是主要的html文件（＆＃39; test_php_long.html＆＃39;）：

<html>
       <head>
          <script type="text/javascript" src="https://www.google.com/jsapi"></script>
          <script type="text/javascript" src="https://www.maxcdn.com/one//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
          <script type="text/javascript">    
          google.load('visualization', '1', {'packages':['corechart']});      
          google.setOnLoadCallback(drawChart);      
          function drawChart() {
            var jsonData = $.ajax({
      //fetchjson.php is a php script that will fetch the JSON data e generated using above php code
               url: "fetchjson.php",
               dataType:"json",
               async: false
               }).responseText;
           var data = new google.visualization.DataTable(jsonData);
           var chart = new google.visualization.LineChart(document.getElementById('chart_flow'));
           chart.draw(data, {width: 1200, height: 300, lineWidth: 1, pointSize: 1.3, pointWidth: 3});
          }
      </script>
       </head>
       <body>
          <div id="chart_flow"></div>
       </body>
</html>

这是php文件（＆＃39; fetchjson.php＆＃39;）

<html>
 <head>
  <title></title>
 </head>
 <body>
 <?php
      //Fill the ‘string’ variable with JSON data from file we used as json container populated by php //code: ‘flow.json’
      $string = file_get_contents("flow.json");
      //push JSON data out
      echo $string;
      ?>
 </body>
</html>

这是json文件（＆＃39; flow.json＆＃39;）：

{＆＃34; COLS＆＃34;：[{＆＃34; ID＆＃34;：＆＃34;＆＃34;＆＃34;标签＆＃34;：＆＃34;时间＆＃34; ＆＃34;模式＆＃34;：＆＃34;＆＃34;＆＃34;类型＆＃34;：＆＃34;串＆＃34;}，{＆＃34; ID＆＃34;：＆＃ 34;＆＃34;，＆＃34;标签＆＃34;：＆＃34;缓存命中＆＃34;，＆＃34;模式＆＃34;：＆＃34;＆＃34;，＆＃34;类型＆＃ 34;：＆＃34;数字＆＃34;}，{＆＃34; id＆＃34;：＆＃34;＆＃34;，＆＃34;标签＆＃34;：＆＃34;非缓存点击次数＆＃ 34;，＆＃34;模式＆＃34;：＆＃34;＆＃34;＆＃34;类型＆＃34;：＆＃34;数＆＃34;}]，＆＃34;行＆＃34 ;: [{＆＃34; c＆＃34;：[{＆＃34; v＆＃34;：＆＃34; 2014-01-21 00：00：00＆＃34;}，{＆＃34; v＆＃34; ：2}，{＆＃34; v＆＃34;：23}]}，{＆＃34; c＆＃34;：[{＆＃34; v＆＃34;：＆＃34; 2014-01-21 01 ：00：00＆＃34;}，{＆＃34; v＆＃34;：2}，{＆＃34; v＆＃34; 52}]}， ... ，{＆＃34; c＆＃34;：[{＆＃34; v＆＃34;：＆＃34; 2014-01-23 01：00：00＆＃34;}，{＆＃34; v＆＃34; ：0}，{＆＃34; v＆＃34; 34}]}，]}

谢谢！

Answer 1

您的问题可能与您的请求是跨域请求或至少被视为一次请求有关。据我所知，有两种方法可以处理这个问题，要么允许跨源请求，要在PHP脚本的顶部添加以下行：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');

虽然这可能不安全，并且*应该被可信域列表替换，但它现在应该解决您的问题并且不应该是安全威胁，因为您的应用程序将在Intranet中运行。

或者，您也可以通过在回调中包装json对象来发出jsonp而不是json：

echo $_GET['callback'] . '(' . json_encode($something_to_be_encoded) . ')';

不要忘记传递给ajax函数的url参数现在应该是：

http://myawesomescript.php?callback=?

googlecharts在本地服务器上运行时不加载json数据

1 个答案: