php - Google 用来自 MYSQL 服务器的 Json 绘制折线图

Question

当前正在尝试使用通过 php 从 mysql 数据库查询检索到的数据来填充 google 图表折线图。目前，当我渲染 html 页面时，页面是空白的，没有图表可显示。我不确定如何调试这个或哪里出了问题，因为我是谷歌图表的新手，并且正在遵循 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>