<p>在添加数据之前正在绘制图表。你知道吗</p>
<p>将图表绘制代码移到ajax done回调中。。。你知道吗</p>
<pre><code>$.ajax({
url: "read_sensors.php",
dataType: 'json'
}).done(function (data) {
$.each(data, function (index, row) {
dataArea.addRow([
row.dateandtime,
parseFloat(row.temperature),
parseFloat(row.humidity)
]);
});
var chartArea = new
google.visualization.AreaChart(document.getElementById("chart_area"));
chartArea.draw(dataArea, options);
});
</code></pre>
<hr/>
<p>此外,<code><div></code>元素的id需要与给定给图表的id匹配。你知道吗</p>
<p>将id更改为<code>"chart_area"</code>,在这里。。。你知道吗</p>
<pre><code> <div id="chart_area" style="width: 550px; height: 400px; margin: 0 auto">
</div>
</code></pre>
<hr/>
<p>您可能还需要将<code>load</code>语句移动到与回调相同的部分。。。你知道吗</p>
<pre><code>google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
</code></pre>
<hr/>
<p>还需要添加jquery到页面,你可以添加上面的谷歌图表库。。。你知道吗</p>
<pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</code></pre>
<hr/>
<p>以下是建议的编辑。。。你知道吗</p>
<pre><code><html>
<head>
<title>Google Charts Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_area" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script>
function drawChart() {
var dataArea = new google.visualization.DataTable();
dataArea.addColumn('string', 'Date');
dataArea.addColumn('number', 'Temperature');
dataArea.addColumn('number', 'Humidity');
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {color: '#333'}
},
vAxis: {minValue: 0}
};
$.ajax({
url: "read_sensors.php",
dataType: 'json',
}).done(function (data) {
$.each(data, function(index, row) {
dataArea.addRow([
row.dateandtime,
parseFloat(row.temperature),
parseFloat(row.humidity)
]);
});
var chartArea = new google.visualization.AreaChart(document.getElementById("chart_area"));
chartArea.draw(dataArea);
});
}
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
</code></pre>