表没有使用谷歌图表的列答案

【问题标题】：Table has no columns using google charts表没有使用谷歌图表的列
【发布时间】：2023-03-20 06:30:02
【问题描述】：

我浏览了很多帖子并尝试了他们的建议。但每次都会出现一个新问题。

目标：创建一个谷歌折线图，从 MYSQL 表中获取数据并将其编码为 JSON。从那里，我尝试使用 html 文件来显示图表。

someFile.php:

<?php

//connect to the database 
$username = ...;
$password = ...;
$hostname = ...;
$database = ...;

$conn = mysqli_connect($hostname, $username)
or die("Unable to connect to MySQL");
echo "Connected to MySQL<br>";  

//Select database
$db_found = mysqli_select_db($conn,$database);

if($db_found) {
   print "Database Found<br><br>";
}
else{
   print "Database NOT Found<br>";
}


$sql = mysqli_query($conn, 'SELECT * FROM Travel_Test');

if (!$sql) {
   die("Error running $sql: " . mysql_error());
}


$results = array(
'cols' => array (
    array('label' => 'travel_time_date', 'type' => 'datetime'),
    array('label' => 'travel_time_duration', 'type' => 'number')
),
'rows' => array()
);
while($row = mysqli_fetch_assoc($sql))
{

   //date assumes "yyyy - mm -- dd" format
   $dateArr = explode('-', $row['travel_time_date']);
   $year = (int) $dateArr[0];
   $month = (int) $dateArr[1]; //subtract 1 to make compatible with javascript months
   $day = (int) $dateArr[2];

   //time assumes "hh:mm:ss" format
   $timeArr = explode(':', $row['travel_time_timestamp']);
   $hour = (int) $timeArr[0];
   $minute = (int) $timeArr[1];
   $second = (int) $timeArr[2];

   $results['rows'][] = array('c' => array(
      array('v' => "travel_time_date($year, $month, $day, $hour, $minute, $second)"),
      array('v' => $row['travel_time_duration'])
   ));      
}

$json = json_encode($results,  JSON_NUMERIC_CHECK );
echo $json;
//header("Access-Control-Allow-Origin: *");
?>

JSON 输出：

{"cols":[{"label":"travel_time_date","type":"datetime"},
{"label":"travel_time_duration","type":"number"}],
"rows":[{"c":
[{"v":"travel_time_date(2014, 2, 1, 1, 30, 30)"},{"v":55}]},{"c": 
[{"v":"travel_time_date(2014, 2, 1, 2, 30, 30)"},{"v":80}]},{"c":
[{"v":"travel_time_date(2014, 2, 1, 3, 30, 30)"},{"v":60}]},{"c":
[{"v":"travel_time_date(2014, 2, 1, 4, 30, 30)"},{"v":120}]}]}

另一个文件.html：

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


    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var jsonData = $.ajax({
        url: "http:///Volumes/OS%20X%20Mountain%20Lion/Applications/XAMPP/xamppfiles/htdocs/traveltrak/travelGraphData.php",
        dataType:"json",
        async: false
        }).responseText;
        //success: function (jsonData) {
            //Create data table out of JSON data loaded from server
            var data = new google.visualization.DataTable(jsonData);

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, {width: 400, height: 240});
        //}
    //});
    }
    </script>
 </head>

 <body>
 <div id="chart_div"></div>
 </body>
</html>

当我尝试预览页面时，我检查了开发者的控制台。它没有任何问题。错误是页面显示：表没有列。请问这里有什么建议吗？

【问题讨论】：

尝试将 AJAX 调用的结果 (jsonData) 打印到控制台。我认为您会发现（第一个）问题是将数据放入 HTML 页面上的 JSON 对象。
console.log(jsonData); 并没有什么不同。页面上仍然没有问题和同样的问题。

标签： javascript php mysql json google-visualization

【解决方案1】：

您的日期输入不正确；格式为'Date(year, month, day, hours, minutes, seconds)'。您需要将“travel_time_date”替换为“日期”：

$results['rows'][] = array('c' => array(
    array('v' => "Date($year, $month, $day, $hour, $minute, $second)"),
    array('v' => $row['travel_time_duration'])
));

【讨论】：

好的，我已经解决了。随着：` 'cols' => array( array('label' => 'Date', 'type' => 'datetime')` 我仍然收到消息：表没有列。
在AJAX调用后添加console.log(jsonData);这一行，然后在Chrome中打开页面并打开开发者控制台。那里有什么输出？
无法加载资源volumes/.../travelGraphData.php undefined travelGraph.html:20
我就是这么想的。 AJAX 无法从您的本地文件系统加载数据，PHP 也不会从您的本地文件系统运行。您已经在 XAMPP 中获得了文件，只需启动 XAMPP 服务器并更改 URL 以匹配服务器（可能类似于 'http://localhost/traveltrak/travelGraphData.php'）。
太好了，现在似乎正在加载资源。虽然，一个新的错误已取代它 - 错误：无效的 JSON 字符串 [{....（然后列出我的 JSON 输出）}] 知道为什么吗？