老实说，我真的不知道如何让这个 google 图表移动，我会再次寻求帮助。我真的非常需要它。我想让我的 google 图表从数据库中移动，因为我的数据库是自动收集数据。我希望图表在不刷新的情况下自动更新移动。以下是我的 javascript 代码:
以下代码的输出
<!DOCTYPE html>
<html>
<head>
<!-- EXTERNAL LIBS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="jquery.min.js"></script>
<!-- EXAMPLE SCRIPT -->
<script>
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
// onload callback
function drawChart() {
// JSONP request
var jsonData = $.ajax({
url: 'livedata.php',
dataType: 'json',
}).done(function (results) {
var data = new google.visualization.DataTable(jsonData);
data.addColumn('date', 'time_stamp');
data.addColumn('number', 'ph');
data.addColumn('number', 'moist');
$.each(results, function (i, row) {
data.addRow([
new Date(row.time_stamp),
parseFloat(row.ph),
parseFloat(row.moist)
]);
});
var chart = new google.visualization.AreaChart($('#chart').get(0));
chart.draw(data, {
title: 'Soil Analysis',
curveType: 'function',
displayAnnotations: true
//legend: { position: 'bottom' }
//pointSize: 10
});
});
}
drawChart();
setInterval(drawChart, 10000);
// load chart lib
// call drawChart once google charts is loaded
// google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart" style="width: 80%;height:380px"></div>
</body>
</html>
我不知道这是否也会影响我的图表以使其移动，但以下也是我的 php json 代码:
$query = "SELECT readingID, moist, ph , time_stamp FROM soilReading";
$result = mysqli_query($connection, $query);
$data_points = array();
while($row = mysqli_fetch_array($result)){
$wholedate = date('c',strtotime($row['time_stamp']));
$monthNum = date('m',strtotime($row['time_stamp']));
$DayNum = date('d', strtotime($row['time_stamp']));
$yearnum = date('Y', strtotime($row['time_stamp']));
$dateObj = DateTime::createFromFormat('!m', $monthNum);
$monthName = $dateObj->format('F');
if(($monthNum == "9")&&($yearnum == "2017")){
if (array_key_exists($DayNum, $data_points)) {
$data_points[$DayNum]->ph += $row['ph'] / $data_points[$DayNum]->ph = count($row['ph']);
$data_points[$DayNum]->moist += $row['moist'];
}else{
//$data_points[$DayNum]->ts = $yearnum."".$monthName ."".$DayNum;
// $data_points[$DayNum]->ts = $yearnum."".$monthNum."".$DayNum;
$data_points[$DayNum]->time_stamp =$wholedate;
//$data_points[$DayNum]->ts = $wholedate;
$data_points[$DayNum]->ph = $row['ph'] / $data_points[$DayNum]->ph = count($row['ph']);
$data_points[$DayNum]->moist = $row['moist'];
}
}
}
$jsonResult = json_encode(array_values($data_points));
echo $jsonResult;
最佳答案
使用jsonData 变量有什么意义？看起来根本不需要。试试这个:
$.ajax({
url: 'livedata.php',
dataType: 'json',
}).done(function (results) {
var data = new google.visualization.DataTable();
也可以像您尝试的那样使用 google.setOnLoadCallback(drawChart);。它将确保 drawChart 在 Google Api 完全加载后运行。
关于javascript - 如何使谷歌图表动态移动和更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46165527/