chart.jsを使用して、別のチャートを作成することはできません

フェリックス：

私は、別のチャートを表示したいです。ときに、ユーザーが選択以上1 SensorDataページ上には、別途のセンサーのデータを表示する必要があります。私は今取得していますと、基本的に私はしたくない、いわゆる「マルチチャート」、です。

これはAjaxのPOST呼び出しから返されるデータに基づいてグラフを描画するためのコードです：

var visualisesensor = [];

$(document).ready(function () {
    //When the button is clicked it should add the ID's from the Sensors I want to visualise in to an array.
    $("#visualisebtn").click(function () {
        $.each($("input[name='removecheckbox']:checked"), function () {
            visualisesensor.push($(this).val());
        });

        //This is where I create multiple DIVs based upon howmany Sensors the user selected to display
        for (var i = 0; i < visualisesensor.length; i++) {
            $("#chart-container").append("<canvas id=" + visualisesensor[i] + "></canvas>");
        }

        //This is where I basically draw the charts based upon the amount of sensors the user selected
        $.ajax({
               url:     "visualise.php",
               method:  "POST",
               data:    {visualisesensor: visualisesensor},
               success: function (data) {
                   var Sensornaam = [];
                   var Temperatuur = [];

                   for (var i in data) {
                       Sensornaam.push("Sensor: " + data[i].Sensornaam);
                       Temperatuur.push(data[i].Temperatuur);
                   }
                   var chartdata = []

                   for (var k = 0; k < data.length; k++) {
                       chartdata = {
                           labels:   Temperatuur,
                           datasets: [
                               {
                                   label:                'Sensor Temperatuur',
                                   backgroundColor:      'rgba(200, 200, 200, 0.75)',
                                   borderColor:          'rgba(200, 200, 200, 0.75)',
                                   hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                                   hoverBorderColor:     'rgba(200, 200, 200, 1)',
                                   data:                 Temperatuur[k]
                               }
                           ]
                       };
                   }

                   for (var j = 0; j < data.length; j++) {
                       var ctx = $("#" + data[j].SensorID);

                       var barGraph = new Chart(ctx, {
                           type: 'bar',
                           data: chartdata,
                       });

                       console.log(chartdata[j]);
                       alert('Chart has been added!');
                   }
               },
               error:   function (data) {
                   console.log(data);
               }
           });
    });
});

これはvisualise.phpコードです：

<?php
//setting header to json
header('Content-Type: application/json');

include ('../DATABASE/connection.php');

if(isset($_POST["visualisesensor"]))
{
        $j = implode(',',$_POST["visualisesensor"]);

        $query = sprintf("SELECT SensorID, Sensornaam, Temperatuur FROM sensoren WHERE SensorID in ($j)");

        $result = $con->query($query);

        //loop through the returned data
        $data = array();
        foreach ($result as $row) {
            $data[] = $row;
        }

        //free memory associated with result
        $result->close();

        //close connection
        $con->close();

        //now print the data
        print json_encode($data);
}
?>

私は今取得していますことはmultichartです。それはちょうど同じチャートでは、成功した配列内のデータを表示します。私は、センサのデータを別々に表示することにしたいです。私はこれについてどのように行きますか？

内部のデータは何ですか。

データベースの画像： 私を得る（としたくない）出力の写真：

timclutton：

success機能$.ajaxの呼び出しは非常に奇妙です。なぜ私が理解できないdata変数が3つの別々の回繰り返されます。何のテストデータは、質問に提供されていないので、私はコードに基づいて、いくつかのリバースエンジニアリング、および3つの別々のチャートを描画する単純化答えを作成しました：

// spoofed user input for testing.
var visualisesensor = ['1', '2'];

// spoofed ajax result data for test purposes.
var data = [{
  SensorID: '1',
  Sensornaam: 'tempsensor',
  Temperatuur: '45'
}, {
  SensorID: '2',
  Sensornaam: 'meter',
  Temperatuur: '83'
}];

for (var i = 0; i < visualisesensor.length; i++) {
  $("#chart-container").append("<canvas id=" + visualisesensor[i] + "></canvas>");
}

for (var i = 0; i < data.length; i++) {
  var ctx = $("#" + data[i].SensorID);

  var chartdata = {
    labels: [data[i].Sensornaam],
    datasets: [{
      label: 'Sensor Temperatuur',
      backgroundColor: 'rgba(200, 200, 200, 0.75)',
      borderColor: 'rgba(200, 200, 200, 0.75)',
      hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
      hoverBorderColor: 'rgba(200, 200, 200, 1)',
      data: [data[i].Temperatuur]
    }]
  };

  new Chart(ctx, {
    type: 'bar',
    data: chartdata,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart-container"></div>