Google 图表 Json 来自 MYSQL 服务器的折线图

Question

目前正在尝试使用通过 php 从 mysql 数据库查询检索到的数据来填充 google 图表折线图。目前，当我呈现 html 页面时，该页面是空白的，没有可显示的图表。我不确定如何调试这个或者我哪里出错了，因为我是 google 图表的新手并且正在关注 youtube 上的教程。请在下面查看我的代码。非常感谢任何调试方面的帮助。

查询和结果：

$query =
"SELECT
 (
    UNIX_TIMESTAMP(
        moodLog_before.posted
    )
 ) AS 'day',
moodLog_before.moodBefore
FROM
moodLog_before
WHERE
moodLog_before.posted >= NOW() - INTERVAL 1 WEEK AND moodLog_before.userId  = '1'
ORDER BY
DAY ASC";

$result = mysqli_query($conn, $query);
$rows = array();
$table = array();

$table['cols'] = array(
array(
'label' => 'days',
'type' => 'datetime'
),
array(
'label' => 'moodBefore',
'type' => 'number'
)
);


while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$datetime = explode(".", $row["day"]);
$sub_array[] =  array(
  "v" => 'Date(' . $datetime[0] . '000)'
 );
$sub_array[] =  array(
  "v" => $row["moodBefore"]
 );
$rows[] =  array(
 "c" => $sub_array
);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);

JSON:

        day        moodBefore
     1563275830        2
     1563291561        7
     1563307202       10
     1563307497       11
     1563307497        8
     1563308533       14

GOOGLE 图表设置：

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery /1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
 google.charts.load('current', {'packages':['corechart']});
 google.charts.setOnLoadCallback(drawChart);
 function drawChart()
 {
 var data = new google.visualization.DataTable(<?php echo $jsonTable;  ?>);

 var options = {
title:'Mood Logs',
legend:{position:'bottom'},
chartArea:{width:'95%', height:'65%'}
};


var chart = new   google.visualization.LineChart(document.getElementById('line_chart'));

chart.draw(data, options);
}
</script>

错误：

jsapi_compiled_default_module.js:151 Uncaught (in promise) Error: Container is not defined
at gvjs_dp (jsapi_compiled_default_module.js:151)
at gvjs_7L.gvjs_Tq [as constructor] (jsapi_compiled_default_module.js:239)
at gvjs_7L.gvjs_VL [as constructor] (jsapi_compiled_ui_module.js:1000)
at new gvjs_7L (jsapi_compiled_ui_module.js:1032)
at drawChart (moodLogs.php?row=1:97)

Answer 1

请务必将您的 <div> 元素添加到页面中...

<div id="line_chart"></div>

Google 图表 Json 来自 MYSQL 服务器的折线图

Google charts Linechart with Json from MYSQL server

html

php

mysql

google-visualization