Diagramm zum Aktualisieren aus einer Dropdown-Auswahl

Sie können addData verwenden und removeData , siehe https://www.chartjs.org/docs/latest/developers /updates.html . addData fügt nur einen Datensatz pro Aufruf hinzu, aber removeData entfernt alle Datensätze aus dem Diagramm. Es gibt auch eine Möglichkeit, Label und Datensatz zu pushen, siehe Codepen-Beispiel:https://codepen.io/jordanwillis/ Stift/bqaGRR .

Zuerst müssen Sie Ihr Diagramm in einer Variablen speichern, damit Sie Daten einfach hinzufügen und entfernen können. Wenn Sie ein Diagramm in var gespeichert haben, sagen wir myChart , können Sie removeData() aufrufen wie:myChart.removeData() . Um Daten hinzuzufügen, müssen Sie Label und Daten senden wie:myChart.addData('news', [2, 32, 3]) .

Die nächste Idee ist, das Diagramm zu aktualisieren, wenn Ihr Ajax-Aufruf erfolgreich ist. Wichtig ist, dass die Diagramminstanz in derselben Datei vorhanden ist, in der Sie den Ajax-Aufruf haben. Sie sollten den Onclick-Aufruf in die js-Datei verschieben oder die Funktion von àpp.js aufrufen .

Jetzt hängt es von Ihrer Datenstruktur ab, Sie müssen jede durchgehen und Wert und Bezeichnung erhalten. Sie müssen aus den Daten das gleiche Ergebnis erzielen wie beim Erstellen eines Diagramms.

CODEBEISPIEL:

Was Sie in app.js haben werden

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

Dann bargraph.html wird ebenfalls geändert:

<script type="text/javascript">

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

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