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

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);      }json 文件在 HTTP POST 中生成得很好，但我不知道如何根据该过滤器重新绘制图表。

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();

    }