谷歌用来自MYSQL服务器的Json绘制折线图



目前正在尝试使用通过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);

杰森:

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

谷歌图表设置:

  <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)

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

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

最新更新