Question

我的网页希望在图表中显示数据库中的一些数据。我正在使用chartjs绘制图表。 php脚本用于生成json文件，该文件将用于绘制图表。

我想实现一个过滤器，该过滤器将根据用户输入选择一些特定的数据。输入将使用HTTP Post传递到php脚本中。之后创建的json文件还可以，但是我不知道如何根据新的json文件更新图表。

<script>  
      $(document).ready(function(){  
           $('#filter').click(function(){  
                var from_date = $('#from_date').val();  
                var to_date = $('#to_date').val();  
                if(from_date != '' && to_date != '')  
                {                       
                      $.post("data.php", {
                      from_date: from_date
                      }, function(data,status) {
                      $("data").html(data);
                      });    
                }  

                else  
                {  
                     alert("Please Select Date");  
                }  
           });  
      });  
 </script>

PHP脚本如下：

if(isset($_POST["from_date"]))
{
$from = $_POST["from_date"];
$query = sprintf("SELECT * FROM Temperature 
                    WHERE Temperature > '".$from."'
                ");
}
else
{
    $query = sprintf("SELECT * FROM Temperature 
                ");
}
$result = $mysqli->query($query);

$data = array();
foreach ($result as $row) {
  $data[] = $row;
}
$result->close();
$mysqli->close();
print json_encode($data);

和js文件：

$(document).ready(function(){
  $.ajax({
    url: "http://localhost/chartjs/data.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var timestamp = [];
      var temperature  = [];
      var humidity = [];
      var pressure = [];

      for(var i in data) {
        timestamp.push(data[i].TimeStp);
        temperature.push(data[i].Temperature);
        humidity.push(data[i].Humidity);
        pressure.push(data[i].Pressure);
      }

      var chartdata = {
        labels: timestamp,
        datasets : [
          {
            label: 'temperature',
            yAxisID: 'temperature',
            borderColor: 'rgba(120, 20, 60, 0.75)',
            hoverBackgroundColor: 'rgba(220, 20, 60, 1)',
            hoverBorderColor: 'rgba(220, 20, 60, 1)',
            data: temperature
          },
          {
            label: 'humidity',
            yAxisID: 'humidity',
            borderColor: 'rgba(255, 20, 60, 0.75)',
            hoverBackgroundColor: 'rgba(255, 20, 60, 1)',
            hoverBorderColor: 'rgba(255, 20, 60, 1)',
            data: humidity,
          }
        ]
      };



      var ctx = $("#mycanvas");

      var barGraph1 = new Chart(ctx, {
        type: 'line',
        data: chartdata,
        options: {
          showLines: true,
        scales: {
            xAxes:[{
               scaleLabel: {
                    display: true,
                    labelString: 'TimeStamp'
                    }

            }],
            yAxes: [{
                id: 'temperature',
                position:'left',
                scaleLabel: {
                    display: true,
                    labelString: 'Temperature[C]'
                    },
                ticks: {
                    beginAtZero:false
                }

              },

              {
                id: 'humidity',
                position:'right',
                scaleLabel: {
                    display: true,
                    labelString: 'Humidity[%]'
                    },
                ticks: {
                    beginAtZero:false
                }
              }]
        }
      }
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});

在HTTP POST中可以很好地生成json文件，但是我不知道如何基于该过滤器重绘图表。

非常感谢！

Answer 1

您可以创建一个将接受数据的函数。只需传递您从POST请求中获得的数据，chart.update()就可以发挥作用。确保在chart变量中传递图表参考。

    function addData(chart, label, data) {
        chart.data.labels.push(label);
        chart.data.datasets.forEach((dataset) => {
            dataset.data.push(data);
        });
        chart.update();
    }

在HTTP POST中修改JSON文件后，如何从chartjs重新加载数据

1 个答案: