Question

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

作为最终结果，我希望实现以下目标：

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

到目前为止，我所做的是调用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);
?>

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

使用ChartJS从MySQL绘制数据

0 个答案: