0

我正在构建一个示例应用程序，它从传感器检索数据并将其绘制在网页上。我正在尝试根据用户输入绘制数据，但到目前为止我无法完成它。

我想要达到的最终结果如下：

用户将看到一个下拉菜单，可以从所有可用设备及其各自的参数中进行选择。这些参数可能是气压、温度、湿度等。基于此，当用户提交所选变量时，应向用户显示图表。

到目前为止，我所做的是调用 mysql 服务器并通过 API 检索数据，并仅为单个设备和单个值绘制数据，而无需任何用户交互功能。

这是我静态检索数据的方式：

$(document).ready(function() {
        $.ajax({
            url : "http://192.168.31.225/lora/api/get_data1.php",
            type : "GET",
            success : function(data){
                console.log(data);


          var Time = [];
          var temp = [];

          for(var i in data) {
            Time.push("" + data[i].time);
            temp.push(data[i].temp);
          }

          var chartdata = {
            labels: Time,
            datasets: [
              {
                label: "Temperature",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(59, 89, 152, 0.75)",
                borderColor: "rgba(59, 89, 152, 1)",
                pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                data: temp
              }          
            ]
          };

          var ctx = $("#mycanvas");

          var LineGraph = new Chart(ctx, {
            type: 'line',
            data: chartdata
          });
        },
        error : function(data) {
            console.log(data);
        }
      });
       });

调用 get_data1.php 从单个设备检索所有可用数据。这是get_data1.php文件的结构

<?php
require_once(dirname(dirname(__FILE__)) . '/settings/mysqlhandler.php');

header('Content-Type: application/json');

$query = sprintf("SELECT * from Temperature");

$result = $con->query($query);

$data = array();
    foreach ($result as $row) {
        $data[] = $row;
}

$result->close();

$con->close();

print json_encode($data);
?>

您能否提供有关我应该如何进行的任何指示？

4

0 回答 0