使用ajax填充chartjs的动态饼图

Question

你好有堆栈溢出程序员，我有一个问题涉及从我的数据库使用ajax获取数据，并从chartjs库显示在饼图。现在我正试图让动态数据在饼图格式中被格式接受。

这是我的Ajax和它的响应：（它仍然不显示我的piegraph我不知道为什么。）

function getpieclinic() { 
    $.ajax({ 
      type: "POST", 
      url: siteurl+"patients_report/piedataclinic", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: OnSuccess_, 
      error: OnErrorCall_ 
    }); 

    function OnSuccess_(response) { 
     // alert("hi"); 
      var aData = response.d; 
      var arr = []; 
      $.each(aData, function (inx, val) { 
       var obj = {}; 
       obj.color = val.color; 
       obj.value = val.value; 
       obj.label = val.label; 
       arr.push(obj); 
      }); 
      var ctx = $("#myChart").get(0).getContext("2d"); 
      var myPieChart = new Chart(ctx).Pie(arr); 
     } 

     function OnErrorCall_(response) {} 
} 

我AJAX的回应是这些：

[{"clinic_name":"Clinic 1","total_checked_up":"4"},{"clinic_name":"Clinic 2","total_checked_up":"0"},{"clinic_name":"Clinic 3","total_checked_up":"0"},{"clinic_name":"Clinic 4","total_checked_up":"0"}] 

现在，我想制作一个动态格式的饼图chartjs数据格式以便能够显示它。这是从例子中的默认格式：

var pieChartCanvas = $("#pieChart").get(0).getContext("2d"); 
    var pieChart = new Chart(pieChartCanvas); 
    var PieData = [ 
     { 
     value: 700, 
     color: "#f56954", 
     highlight: "#f56954", 
     label: "Chrome" 
     }, 
     { 
     value: 500, 
     color: "#00a65a", 
     highlight: "#00a65a", 
     label: "IE" 
     }, 
     { 
     value: 400, 
     color: "#f39c12", 
     highlight: "#f39c12", 
     label: "FireFox" 
     }, 
     { 
     value: 600, 
     color: "#00c0ef", 
     highlight: "#00c0ef", 
     label: "Safari" 
     }, 
     { 
     value: 300, 
     color: "#3c8dbc", 
     highlight: "#3c8dbc", 
     label: "Opera" 
     }, 
     { 
     value: 100, 
     color: "#d2d6de", 
     highlight: "#d2d6de", 
     label: "Navigator" 
     } 
    ]; 
    var pieOptions = { 
     //Boolean - Whether we should show a stroke on each segment 
     segmentShowStroke: true, 
     //String - The colour of each segment stroke 
     segmentStrokeColor: "#fff", 
     //Number - The width of each segment stroke 
     segmentStrokeWidth: 2, 
     //Number - The percentage of the chart that we cut out of the middle 
     percentageInnerCutout: 50, // This is 0 for Pie charts 
     //Number - Amount of animation steps 
     animationSteps: 100, 
     //String - Animation easing effect 
     animationEasing: "easeOutBounce", 
     //Boolean - Whether we animate the rotation of the Doughnut 
     animateRotate: true, 
     //Boolean - Whether we animate scaling the Doughnut from the centre 
     animateScale: false, 
     //Boolean - whether to make the chart responsive to window resizing 
     responsive: true, 
     // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 
     maintainAspectRatio: true, 
     //String - A legend template 
     legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 
    }; 
    //Create pie or douhnut chart 
    // You can switch between pie and douhnut using the method below. 
    pieChart.Doughnut(PieData, pieOptions); 

Answer 1

您可以通过以下方式做到这一点...

// for demonstration purposes only 
 
// use response.d in real case scenario 
 
var response = [{ "clinic_name": "Clinic 1", "total_checked_up": "10" }, { "clinic_name": "Clinic 2", "total_checked_up": "20" }, { "clinic_name": "Clinic 3", "total_checked_up": "30" }, { "clinic_name": "Clinic 4", "total_checked_up": "40" }]; // response from ajax request 
 

 
OnSuccess_(response); 
 

 
function OnSuccess_(response) { 
 
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d"); 
 
    var pieChart = new Chart(pieChartCanvas); 
 
    var PieData = []; 
 
    
 
    // create PieData dynamically 
 
    response.forEach(function(e) { 
 
     var random_color = '#' + Math.floor(Math.random() * 16777215).toString(16); 
 
     PieData.push({ 
 
      value: e.total_checked_up, 
 
      color: random_color, 
 
      highlight: random_color, 
 
      label: e.clinic_name 
 
     }); 
 
    }); 
 
    
 
    var pieOptions = { 
 
     //Boolean - Whether we should show a stroke on each segment 
 
     segmentShowStroke: true, 
 
     //String - The colour of each segment stroke 
 
     segmentStrokeColor: "#fff", 
 
     //Number - The width of each segment stroke 
 
     segmentStrokeWidth: 2, 
 
     //Number - The percentage of the chart that we cut out of the middle 
 
     percentageInnerCutout: 0, // This is 0 for Pie charts 
 
     //Number - Amount of animation steps 
 
     animationSteps: 100, 
 
     //String - Animation easing effect 
 
     animationEasing: "easeOutBounce", 
 
     //Boolean - Whether we animate the rotation of the Doughnut 
 
     animateRotate: true, 
 
     //Boolean - Whether we animate scaling the Doughnut from the centre 
 
     animateScale: false, 
 
     //Boolean - whether to make the chart responsive to window resizing 
 
     responsive: true, 
 
     // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 
 
     maintainAspectRatio: true, 
 
     //String - A legend template 
 
     legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 
 
    }; 
 
    
 
    //Create pie or douhnut chart 
 
    // You can switch between pie and douhnut using the method below. 
 
    pieChart.Doughnut(PieData, pieOptions); 
 
}

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