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>

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

感谢用户的帮助白帽子

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>

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

1 个答案: