尝试使用DQL结果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(格式(看起来有点像 ...

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

您需要适当地生成和使用labels和data数组以使甜甜圈图表起作用。

这是应如何创建甜甜圈图...

$(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>