如何在JavaScript中動態創建餅圖的對象數組

Question

我正在為餅圖創建動態值，該餅圖是來自chart.js的圖形，我創建了一個變量，其中包含多個對象值，需要在餅圖數組中傳遞這些值。 如果我傳遞變量，則不會顯示任何內容，但如果我將相同的靜態值傳遞給變量，則餅圖將開始工作。 我搜索了各種方法，但無法使其與我的代碼一起使用。 我的代碼如下所示：

  /*PIE Chart*/
    var elements = [];
    var counter;
    jQuery.ajax({
    type: 'POST',
    url: 'ajax-request.php',
  data: {},
  success: function(response){
    //here data is means the out put from the php file it is not           
     $('#StudentID').val()
    var jsonData = JSON.parse(response);
        console.log(elements); 
        var pieData;
        for (var i = 0; i < jsonData.length; i++) {
            counter = jsonData[i];
            var sale = roundFloat(counter.sales,2);
            elements+= '{value:'+sale+',color: "#FDB45C",highlight: "#FFC870",label:"'+counter.sku+'"},';

        }
        var pieData = [elements];

    var ctx = document.getElementById("pie-chartjs").getContext("2d");
    window.myPie = new Chart(ctx).Pie(pieData);
   } 
   });

Answer 1

您需要對代碼進行幾處更改才能使此工作生效。

pieData應該是對象數組。 因此，您無需附加字符串，而需要將對象推入數組。 完成操作后，該elements就是對象數組，您可以將其直接分配給pieData

以下是更改后的代碼塊

for (var i = 0; i < jsonData.length; i++) {
    counter = jsonData[i];
    var sale = roundFloat(counter.sales, 2);
    elements.push({
        value: sale,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: counter.sku
    })
}
var pieData = elements;