要从下拉选择中更新的图表

Question

我有一个 javascript 文件 app.js 和一个 php 文件 data.php。

app.js 使用来自data.php 的 JSON 输出的数据创建一个图形。

见app.jsbelow：

$(document).ready(function(){

  $.ajax({
    url: "http://localhost/chartjs/data.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var op1 = [];
      var op2 = [];

      let data_keys = Object.keys(data[0])
      console.log(data_keys)
      first = data_keys[0] //1st element
      second = data_keys[1] //2nd element

       for(var i in data) {
            op1.push(data[i][first])
            op2.push(data[i][second])

               }

      var chartdata = {
        labels: op1,
        datasets : [
          {
            label: 'SystemID and Apparent Power (VA)',
            backgroundColor: 'rgba(250, 50, 50, 0.4)',
            borderColor: 'rgba(500, 50, 50, 0.5)',
            hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
            hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
            data: op2
          } 
        ]
      };

      var ctx = document.getElementById('mycanvas').getContext('2d');

      var barGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata,
        options: {
        scales: {
           xAxes: [{
                   ticks: {
                    fontSize: 10
                   }
                  }],
            yAxes: [{
                ticks: {
                    fontSize: 10
                }
            }]
                }
             }
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});

上面的代码一切正常，我可以使用我的 data.php 中的查询数据查看图表。

data.php部分内容如下：

$sql = "SELECT SystemID, ApparentPower FROM RaritanMachineDataa";
$result = sqlsrv_query($conn, $sql);
$data = array(); 
while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
    $row = preg_replace("/[^0-9]/", "", $row);
    $data[] = $row;
}
sqlsrv_free_stmt($result);
sqlsrv_close($conn);
echo json_encode($data);
?>

现在我想在我的图表下方有一个下拉菜单，我希望能够从任何选项中进行选择，并将这些选项发送到我的 data.php SELECT 查询并更新图表。我该怎么做呢？

Answer 1

您可以使用addData 和removeData，请参阅https://www.chartjs.org/docs/latest/developers/updates.html。 addData 每次调用只添加一个数据集，但removeData 从图表中删除所有数据集。还有推送标签和数据集的方法，请参见 codepen 示例：https://codepen.io/jordanwillis/pen/bqaGRR。

首先您需要将图表保存在变量中，这样您就可以轻松添加和删除数据。当您将图表保存在 var 中时，比如说 myChart，您可以调用 removeData()，例如：myChart.removeData()。要添加数据，您必须发送标签和数据，例如：myChart.addData('news', [2, 32, 3])。

接下来的想法是，当您的 ajax 调用成功时更新图表。重要的是在有 ajax 调用的同一文件中拥有图表实例，您应该将 onclick 调用移至 js 文件，或从àpp.js 调用函数。

现在取决于您的数据结构，您将需要遍历每个并获取值和标签。您必须从数据中获得与创建图表时相同的结果。

代码示例：

app.js 中的内容

$(document).ready(function(){

    $.ajax({
        url: "http://localhost/chartjs/data.php",
        method: "GET",
        success: function(data) {
            console.log(data);
            var op1 = [];
            var op2 = [];

            let data_keys = Object.keys(data[0])
            console.log(data_keys)
            first = data_keys[0] //1st element
            second = data_keys[1] //2nd element

            for(var i in data) {
                op1.push(data[i][first])
                op2.push(data[i][second])

            }

         var chartdata = {
         labels: op1,
         datasets : [
             {
             label: 'SystemID and Apparent Power (VA)',
             backgroundColor: 'rgba(250, 50, 50, 0.4)',
             borderColor: 'rgba(500, 50, 50, 0.5)',
             hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
             hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
             data: op2
         } 
         ]
  };

  var ctx = document.getElementById('mycanvas').getContext('2d');

  var barGraph = new Chart(ctx, {
    type: 'line',
    data: chartdata,
    options: {
    scales: {
       xAxes: [{
               ticks: {
                fontSize: 10
               }
              }],
        yAxes: [{
            ticks: {
                fontSize: 10
            }
        }]
            }
         }
      });
    },
    error: function(data) {
    console.log(data);
    }
    });

    function updateChartAjaxCall(data1, data2)
    {
        //ajax call here 
        $.ajax({
            type: 'POST',
            url: 'data.php',
            dataType: 'html',
            data: {data1:data1,data2:data2},
            success:function(data){ 
                // here also manipulate data what you get to update chart propertly
                myChart.removeData();
                myChart.addData('newLabel', [23, 33, 4]);
            }, 
            error:function (xhr, ajaxOptions, thrownError){
                console.log(thrownError);
            }, 
            complete: function(){
            }
        });
        e.preventDefault(); 
    }
});

那你bargraph.html也会变：

<script type="text/javascript">

$('#submitButton').click(function(e){
    var data1=$("#data1").val();
    var data2=$("#data2").val();

    updateChartAjaxCall(data1, data2);
});
</script>