如何在两个不同的谷歌计量器上添加不同的后缀

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>

如何在两个不同的谷歌计量器上添加不同的后缀

问题描述投票：1回答：1

1个回答

最新问题

如何在两个不同的谷歌计量器上添加不同的后缀

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1