ドロップダウン選択から更新するチャート

addDataを使用できます およびremoveData 、https://www.chartjs.org/docs/latest/developersを参照してください/updates.html 。 addData 呼び出しごとに1つのデータセットのみを追加しますが、removeData グラフからすべてのデータセットを削除します。ラベルとデータセットをプッシュする方法もあります。codepenサンプルを参照してください： https://codepen.io/jordanwillis/ペン/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>