如何在两个不同的 google 仪表处添加不同的后缀

Question

我有一个 Raspberry Pi 3 运行一个 lamp 服务器并从 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>

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

感谢用户的帮助白帽

Answer 1

如果您将行添加到一个数据 table 并绘制一个图表，
您将得到两个并排的仪表盘图表，而不是 一个在另一个之上...

然而，仔细阅读问题后，
你需要绘制两个不同的图表，
因为两者的选项不同。

首先，将两个图表排成一行，而不是排成一列，
您可以将以下 css 添加到 .gauge class...

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

如何在两个不同的 google 仪表处添加不同的后缀

How to add Different Suffix at two Different google gauges

php

charts

google-visualization

gauge

raspberry-pi