填充通過Ajax多維數組

Question

更新

我得到一個錯誤syntax error, unexpected '{', expecting ']'在下面的橫線：

<?php 
$data['datasets'] = [{ 
         label: 'Quotation', 
         backgroundColor: '#96ccf1', 
         borderWidth: 1, 
         data: [ 
          100,500,5000,800,500 
         ] 
        },{ 
         label: 'Purchase Order', 
         backgroundColor: '#96ccf1', 
         borderWidth: 1, 
         data: [ 
          100,500,5000,800,500 
         ] 
        },{ 
         label: 'Invoice', 
         backgroundColor: '#96ccf1', 
         borderWidth: 1, 
         data: [ 
          100,500,5000,800,500 
         ] 
        }]; 
?> 

我有我想變成一個動態的數據檢索原來的js代碼。我可以更改labels部件，但無法更改datasets部件。

鑑於原始數據看起來像（參見下文），如何修改我的PHP代碼，以便在通過ajax傳遞時可以成功顯示正確的數據？我在這裏和那裏丟失了一些引號？

謝謝。

原始JS代碼（靜態）

$.ajax({ 
    url: "action.php", 
    type: "POST", 
    data: {'action':'RetrieveData'}, 
    dataType: "json", 
    success: function(data) { 
     console.log(data); 

     if(data.status=='success'){ 
      var barChartData = { 
       labels: ["01-Oct-2017","07-Oct-2017","14-Oct-2017","21-Oct-2017","28-Oct-2017"], 
       datasets: [{ 
          label: 'Quotation', 
          backgroundColor: '#96ccf1', 
          borderWidth: 1, 
          data: [ 
           100,500,5000,800,500 
          ] 
         }, { 
          label: 'Purchase Order', 
          backgroundColor: '#FAD84E', 
          borderWidth: 1, 
          data: [ 
           100,500,2500,800,500 
          ] 
         }, { 
          label: 'Invoice', 
          backgroundColor: '#9FFA4E', 
          borderWidth: 1, 
          data: [ 
           100,500,2000,800,0 
          ] 
         }] 
      }; 

      var ctx = document.getElementById("canvas").getContext("2d"); 
      window.myBar = new Chart(ctx, { 
       type: 'bar', 
       data: barChartData, 
       options: { 
        responsive: true, 
        title: { 
         display: true, 
         text: data.title_text 
        }, 
        tooltips: { 
         mode: 'index', 
         intersect: false 
        } 
       } 
      }); 
     } 
    }, 
    error: function(data){ 
     console.log('Error occurred'); 
    } 
}); 

修訂後的JS代碼（動態）

$.ajax({ 
    url: "action.php", 
    type: "POST", 
    data: {'action':'RetrieveData'}, 
    dataType: "json", 
    success: function(data) { 
     console.log(data); 

     if(data.status=='success'){ 
      var barChartData = { 
       labels: data.labels, // <-- This is correct 
       datasets: data.datasets // <-- I need help on this part 
      }; 

      var ctx = document.getElementById("canvas").getContext("2d"); 
      window.myBar = new Chart(ctx, { 
       type: 'bar', 
       data: barChartData, 
       options: { 
        responsive: true, 
        title: { 
         display: true, 
         text: data.title_text 
        }, 
        tooltips: { 
         mode: 'index', 
         intersect: false 
        } 
       } 
      }); 
     } 
    }, 
    error: function(data){ 
     console.log('Error occurred'); 
    } 
}); 

PHP代碼

$data['labels'] = ["01-Oct-2017","07-Oct-2017","14-Oct-2017","21-Oct-2017","28-Oct-2017"]; 
$data['datasets'] = [{ 
         label: 'Quotation', 
         backgroundColor: '#96ccf1', 
         borderWidth: 1, 
         data: [ 
          100,500,5000,800,500 
         ] 
        },{ 
         label: 'Purchase Order', 
         backgroundColor: '#96ccf1', 
         borderWidth: 1, 
         data: [ 
          100,500,5000,800,500 
         ] 
        },{ 
         label: 'Invoice', 
         backgroundColor: '#96ccf1', 
         borderWidth: 1, 
         data: [ 
          100,500,5000,800,500 
         ] 
        }]; 

echo json_encode($data); 

Answer 1

如果你想創建一個對象如{label: 'some name'}您可以使用類或關聯數組['label' => 'some name']。 PHP不能創建{}之前提到的元素之一。

$data['labels'] = ["01-Oct-2017","07-Oct-2017","14-Oct-2017","21-Oct-2017","28-Oct-2017"]; 
$data['datasets'] = [[ 
         'label' => 'Quotation', 
         'backgroundColor' => '#96ccf1', 
         'borderWidth' => 1, 
         'data' => [ 
          100,500,5000,800,500 
         ] 
        ],[ 
         'label' => 'Purchase Order', 
         'backgroundColor' => '#96ccf1', 
         'borderWidth' => 1, 
         'data' => [ 
          100,500,5000,800,500 
         ] 
        ],[ 
         'label' => 'Invoice', 
         'backgroundColor' => '#96ccf1', 
         'borderWidth' => 1, 
         'data' => [ 
          100,500,5000,800,500 
         ] 
        ]]; 

echo json_encode($data);