Biểu đồ để cập nhật từ một lựa chọn thả xuống

Bạn có thể sử dụng addData và removeData , xem https://www.chartjs.org/docs/latest/developers /updates.html . addData chỉ thêm một tập dữ liệu cho mỗi cuộc gọi, nhưng removeData loại bỏ tất cả các tập dữ liệu khỏi biểu đồ. Cũng có một cách để đẩy nhãn và tập dữ liệu xem mẫu codepen: https://codepen.io/jordanwillis/ pen / bqaGRR .

Đầu tiên, những gì bạn cần là lưu biểu đồ của mình ở dạng biến để bạn có thể dễ dàng thêm và xóa dữ liệu. khi bạn lưu biểu đồ trong var, giả sử myChart , bạn có thể gọi removeData() như:myChart.removeData() . Để thêm dữ liệu, bạn phải gửi nhãn và dữ liệu như:myChart.addData('news', [2, 32, 3]) .

Ý tưởng tiếp theo là cập nhật biểu đồ khi lệnh gọi ajax của bạn thành công. Điều quan trọng là có phiên bản biểu đồ trong cùng một tệp mà bạn có lệnh gọi ajax, bạn nên chuyển lệnh gọi onclick sang tệp js hoặc gọi hàm từ àpp.js .

Bây giờ phụ thuộc vào cấu trúc dữ liệu của bạn, bạn sẽ cần phải đi qua từng và lấy giá trị và nhãn. Bạn phải nhận được kết quả tương tự từ dữ liệu giống như khi bạn tạo biểu đồ.

MẪU MÃ:

Những gì bạn sẽ có trong 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(); 
    }
});

Sau đó, bạn bargraph.html cũng sẽ được thay đổi:

<script type="text/javascript">

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

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