我试图使用谷歌图表,它使用laravel 5.4显示我的空白页面

时间:2017-04-19 07:03:58

标签: php json laravel google-visualization

这是视图文件,我不知道发生了什么,请帮忙!

<html>
          <head>
            <!--Load the Ajax API-->
          <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
          <script type="text/javascript" src="https://www.google.com/jsapi"></script>
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
          <script type="text/javascript">


           <script type="text/javascript">

        google.charts.load('current', {'packages':['gantt']});

        google.charts.setOnLoadCallback(drawChart);

            function drawChart() {

              // Create our data table out of JSON data loaded from server.
               var jsonData = $.ajax({
                    url: "getData.php",
                    dataType: "json",
                    async: false
                    }).responseText;

                var options = {
                  height: 400,
                  gantt: {
                    trackHeight: 30
                  }
                };

         var data = new google.visualization.DataTable(jsonData);

              // Instantiate and draw our chart, passing in some options.
              // Do not forget to check your div ID
        var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

        chart.draw(data, options);

            }

            </script>
          </head>

          <body>
            <!--this is the div that will hold the GANT chart-->
           <div id="chart_div"></div>
          </body>
        </html>

*这是getData.php的代码*

   <?php 

      $con=mysqli_connect("localhost" , 'root' ,  '' , 'planification' );

      // Check connection
      if (mysqli_connect_errno())


    {
       echo "Failed to connect to MySQL: " . mysqli_connect_error();
      }

      $query = "SELECT * FROM `gants` WHERE 1";

      $result = mysqli_query($con,$query);

      $rows = array();


       while($r = mysqli_fetch_array($result)) {
            $rows[] = $r;
      }

          echo json_encode($rows);

          mysqli_close($con);

        ?>

文件位置 enter image description here

这是getData文件的内容

C:\ Users \ ahmed \ Ph-r-p&gt; php getData.php

[{"0":"DHDJJ","Task ID":"DHDJJ","1":"DCNJNDSNDS","Task Name":"DCNJNDSNDS","2":"NDNDNS","Resource":"NDNDNS","3":"2017-04-03","Start Date":"2017-04-03","4":"2017-04-05","End Date":"2017-04-05","5":null,"Duration":null,"6":"100","Percent Complete":"100","7":null,"Dependencies":null},{"0":"dhsg","Task ID":"dhsg","1":"djbs","Task Name":"djbs","2":"djsn","Resource":"djsn","3":"2017-04-05","Start Date":"2017-04-05","4":"2017-04-08","End Date":"2017-04-08","5":null,"Duration":null,"6":"12","Percent Complete":"12","7":null,"Dependencies":null},{"0":"DKJNDES","Task ID":"DKJNDES","1":"DDNS","Task Name":"DDNS","2":"DKNS","Resource":"DKNS","3":"2017-04-09","Start Date":"2017-04-09","4":"2017-04-12","End Date":"2017-04-12","5":null,"Duration":null,"6":"10","Percent Complete":"10","7":null,"Dependencies":null},{"0":"FKSNJ","Task ID":"FKSNJ","1":"LKQSDFJ","Task Name":"LKQSDFJ","2":"QSJDH","Resource":"QSJDH","3":"2017-04-10","Start Date":"2017-04-10","4":"2017-04-14","End Date":"2017-04-14","5":null,"Duration":null,"6":"100","Percent Complete":"100","7":null,"Dependencies":null}]

1 个答案:

答案 0 :(得分:0)

在laravel中,public文件夹只能从url访问。所以你应该把getData.php放在public文件夹中。并在ajax

中使用它
var jsonData = $.ajax({
                url: "public/getData.php",
                dataType: "json",
                async: false
                }).responseText;

您似乎对任何MVC结构都是新手。你应该开始学习MVC和laravel的结构。您应该使用laravel路由和控制器。以下是从诈骗中学习laravel的视频系列:https://laracasts.com/series/laravel-5-from-scratch