如何在两个不同的Google量规上添加不同的后缀

Question

我有一个运行灯服务器的Raspberry Pi 3，并从AM2302传感器读取数据，该数据存储在mysql数据库中，然后显示在通过php文件的网页中。

主要问题是想在两个Google量表上分配不同的后缀（一个用于温度，一个用于湿度），但不能按需工作，当我刷新页面时，它会显示零值，每个后缀都想一个，但是在下一秒显示数据表单数据库时，它只是在两个仪表中显示相同的后缀。

他们把它展示在另一个上面，我该如何并排放置

这是一张图片：

我想要这些结果

这是我的index.php的代码形式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Medidor Temperatura, Humedad</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>

<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['gauge']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var dataHumid = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Humid', 0],
      ]);

    var dataTemp = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Temp', 0]
      ]);

    var optionsHumid = {
      width: 170, height: 170,
      redFrom: 0, redTo: 33,
      yellowFrom: 33, yellowTo: 66,
      greenFrom: 66, greenTo: 100,
      majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'],
      minorTicks: 10
        };
var formatter = new google.visualization.NumberFormat({
       suffix: '%',
       fractionDigits: 1
       });
       formatter.format(dataHumid, 1);

    var optionsTemp = {
      width: 170, height: 170,
      redFrom: 30, redTo: 45,
      yellowFrom:24, yellowTo: 30,
      greenFrom: 12, greenTo: 24,
      majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'],
      minorTicks: 10
        };

var formatter = new google.visualization.NumberFormat({
       suffix: 'h',
       fractionDigits: 1
       });
       formatter.format(dataTemp, 1);

    var chartHumid = new google.visualization.Gauge(document.getElementById("chart_Humid"));
    var chartTemp = new google.visualization.Gauge(document.getElementById("chart_Temp"));

    chartHumid.draw(dataHumid, optionsHumid,formatter);
    chartTemp.draw(dataTemp, optionsTemp, formatter);

    setInterval(function() {
        var JSON=$.ajax({
            url:"sensores.php",
            dataType: 'json',
            async: false}).responseText;
        var Respuesta=jQuery.parseJSON(JSON);
      dataHumid.setValue(0, 1,Respuesta[0].humidity);
      formatter.format(dataHumid, 1);
      chartHumid.draw(dataHumid, optionsHumid);
    }, 1300);

 setInterval(function() {
        var JSON=$.ajax({
            url:"sensores.php",
            dataType: 'json',
            async: false}).responseText;
        var Respuesta=jQuery.parseJSON(JSON);

      dataTemp.setValue(0, 1,Respuesta[0].temperature);
      formatter.format(dataTemp, 1);
      chartTemp.draw(dataTemp, optionsTemp);
    }, 1300);

  }
</script>
</head>
<body>
       <div class="gauge" id="chart_Humid"></div>       <div class="gauge" id="chart_Temp"></div>
</body>
</html>

我编辑问题以显示得到的结果，现在我可以显示来自两个传感器的数据。

感谢用户WhiteHat的帮助

Answer 1

如果您将这些行添加到一个数据表中并绘制一张图表，
您将连续获得两个仪表图，而不是一个在另一个之上 。

但是，仔细阅读问题后，
您将需要绘制两个不同的图表，
因为两个选项都不相同。

首先，要连续获取两个图表而不是一列，
您可以将以下CSS添加到.gauge类...

.gauge {
  display: inline-block;
}

这将导致<div>元素彼此内联显示。

---

至于后缀，需要为格式化程序使用唯一的名称。
上面，两个变量都使用相同的变量-> var formatter

创建第二个后缀时，它将覆盖第一个后缀。
代替...

var formatter = new google.visualization.NumberFormat({
  suffix: '%',
  fractionDigits: 1
});
formatter.format(dataHumid, 1);

var formatter = new google.visualization.NumberFormat({
  suffix: 'h',
  fractionDigits: 1
});
formatter.format(dataTemp, 1);

我们将使用...

var formatHumid = new google.visualization.NumberFormat({
  suffix: '%',
  fractionDigits: 1
});
formatHumid.format(dataHumid, 1);

var formatTemp = new google.visualization.NumberFormat({
  suffix: 'h',
  fractionDigits: 1
});
formatTemp.format(dataTemp, 1);

---

请参阅以下工作片段...

 google.charts.load('current', { packages: ['gauge'] }).then(function () { var dataHumid = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Humid', 0] ]); var dataTemp = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Temp', 0] ]); var optionsHumid = { width: 170, height: 170, redFrom: 0, redTo: 33, yellowFrom: 33, yellowTo: 66, greenFrom: 66, greenTo: 100, majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'], minorTicks: 10 }; var formatHumid = new google.visualization.NumberFormat({ suffix: '%', fractionDigits: 1 }); formatHumid.format(dataHumid, 1); var optionsTemp = { width: 170, height: 170, redFrom: 30, redTo: 45, yellowFrom: 24, yellowTo: 30, greenFrom: 12, greenTo: 24, majorTicks: ['0','10','20','30','40','50','60','70','80','90', '100'], minorTicks: 10 }; var formatTemp = new google.visualization.NumberFormat({ suffix: 'h', fractionDigits: 1 }); formatTemp.format(dataTemp, 1); var chartHumid = new google.visualization.Gauge(document.getElementById("chart_Humid")); var chartTemp = new google.visualization.Gauge(document.getElementById("chart_Temp")); chartHumid.draw(dataHumid, optionsHumid); chartTemp.draw(dataTemp, optionsTemp); setInterval(function() { /* var JSON=$.ajax({ url:"sensores.php", dataType: 'json', async: false}).responseText; var Respuesta=jQuery.parseJSON(JSON); dataHumid.setValue(0, 1, Respuesta[0].humidity); */ dataHumid.setValue(0, 1, 74.9); formatHumid.format(dataHumid, 1); chartHumid.draw(dataHumid, optionsHumid); }, 1300); setInterval(function() { /* var JSON=$.ajax({ url:"sensores.php", dataType: 'json', async: false}).responseText; var Respuesta=jQuery.parseJSON(JSON); dataTemp.setValue(0, 1, Respuesta[0].temperature); */ dataTemp.setValue(0, 1, 27.5); formatTemp.format(dataTemp, 1); chartTemp.draw(dataTemp, optionsTemp); }, 1300); }); 

 .gauge { display: inline-block; } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div class="gauge" id="chart_Humid"></div> <div class="gauge" id="chart_Temp"></div>