dql result chartjsを使ってドーナツチャートを作成しようとしています

Question

私はチュートリアルを少し見てオンラインで検索しましたが、何が欠けているのか分かりませんでした。私はそれを動作させるために様々な可能性を試しましたが、運はありません。私はこれに新しいので、これで本当に助けを感謝します。仮定すると、

$(document).ready(function() { 
// var ctx1 = $("#mycanvas"); 

$.ajax({ 
    url:"http://localhost/multi000web/InspectionMenu.html", 
    type: 'GET', 
     dataType: 'json', 
     success : function(data){ 

console.log(data); 

      var Sitename =[]; 
      var CountOf =[]; 

      for (var i = 0; i < data.lenght ; i++){ 
       Sitename.push(data[i].Sitename); 
       CountOf.push(data[i].CountOf); 
      } 

      var chartdata ={ 
       labels:Sitename, 
       dataset: [ 
        { 
        label: "Sitename", 
       // backgroundColor:["#F4A460","#2E8B57","#E0E0E0"], 

        data: [data] 
         } 

       ] 

      }; 

       //options 
var options = { 
    responsive: true, 
    title: { 
     display: true, 
     position: "top", 
     text: "Doughnu Chart", 
     fontSize: 18, 
     fontColor: "#111" 
    }, 
    legend: { 
     display: true, 
     position: "bottom", 
     labels: { 
      fontColor: "#333", 
      fontSize: 16 
     } 
    } 
}; 
         //get the doughnut chart canvas 
var ctx1 = $("#mycanvas"); 
//create Chart class object 
var chart1 = new Chart(ctx1, { 
    type: "doughnut", 
    data: chartdata , 
    options: options 
}); 



     }, 
      error :function(data) { 

      } 
}); 



}); 

Answer 1

、あなたの応答のJSON（フォーマット）がややあなたが生成し、ドーナツグラフを動作させるために、適切labelsとdata配列を使用する必要があり、この ...

[{"Sitename": "Google", "CountOf": 75}, {"Sitename": "Facebook", "CountOf": 35}] 

のように見えます。ここで

は...ドーナツグラフを作成すべきか答えを

$(document).ready(function() { 
 
    $.ajax({ 
 
     url: "https://istack.000webhostapp.com/json/t3.json", 
 
     type: 'GET', 
 
     dataType: 'json', 
 
     success: function(data) { 
 
     var Sitename = []; 
 
     var CountOf = []; 
 
      
 
     data.forEach(function(e) { 
 
      Sitename.push(e.Sitename); 
 
      CountOf.push(e.CountOf); 
 
     }) 
 
      
 
     var chartdata = { 
 
      labels: Sitename, 
 
      datasets: [{ 
 
       label: "Sitename", 
 
       data: CountOf, 
 
       backgroundColor: ["#F4A460", "#2E8B57"], 
 
      }] 
 
     }; 
 
      
 
     //options 
 
     var options = { 
 
      responsive: true, 
 
      title: { 
 
       display: true, 
 
       position: "top", 
 
       text: "Doughnu Chart", 
 
       fontSize: 18, 
 
       fontColor: "#111" 
 
      }, 
 
      legend: { 
 
       display: true, 
 
       position: "bottom", 
 
       labels: { 
 
        fontColor: "#333", 
 
        fontSize: 16 
 
       } 
 
      } 
 
     }; 
 
      
 
     //get the doughnut chart canvas 
 
     var ctx1 = $("#mycanvas"); 
 
     //create Chart class object 
 
     var chart1 = new Chart(ctx1, { 
 
      type: "doughnut", 
 
      data: chartdata, 
 
      options: options 
 
     }); 
 
     }, 
 
     error: function(data) {} 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="mycanvas"></canvas>