Das Übergeben von json_encode an chart.js funktioniert nicht

Question

Ich versuche, ein Kreisdiagramm mit chart.js (neueste Version) zu erstellen.

Ich habe ein Array erstellt, das ich als Datenvariable für das Diagramm ausgeben möchte.

Das ist der PHP-Code ist:

<?php if($os != null) { 
    $tiposOs = array('Orçamento'=> "#5DC1E3", 
        'Aberto'=> "#07D7F7", 
        'Faturado' => "#07F7CB", 
        'Em Andamento' => "#FFD724", 
        'Finalizado' => "#30C70A", 
        'Cancelado' => "#FF2B2B"); 
    $chartOsData = array(); 
    $chartOsData['type'] = 'pie'; 
    $chartOsData['data'] = array(); 
    $chartOsData['options'] = array('responsive'=>true); 

    foreach ($os as $o) 
    { 
     $chartOsData['data']['labels'][] = $o->status; 
     $chartOsData['data']['datasets']['data'][] = (int)$o->total; 
     $chartOsData['data']['datasets']['backgroundColor'][] = $tiposOs[$o->status]; 
    } 
?> 

Das ist mein Skript mit codierten Werten:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var osChartc = document.getElementById('osChart').getContext('2d'); 
     var osChart = new Chart(osChartc, <?php echo json_encode($chartOsData); ?>); 
    }); 
</script> 

der documentation Laut, das ist, wie Sie ein Diagramm erstellen:

var myDoughnutChart = new Chart(ctx, { 
    type: 'pie', 
    data: data, 
    options: options 
}); 

Und das ist die Art der Eingabe für die Datenvariable:

var data = { 
    labels: [ 
     "Red", 
     "Blue", 
     "Yellow" 
    ], 
    datasets: [ 
     { 
      data: [300, 50, 100], 
      backgroundColor: [ 
       "#FF6384", 
       "#36A2EB", 
       "#FFCE56" 
      ], 
      hoverBackgroundColor: [ 
       "#FF6384", 
       "#36A2EB", 
       "#FFCE56" 
      ] 
     }] 
}; 

Dies ist, was ich bekomme:

$(document).ready(function() { 
    var osChartc = document.getElementById('osChart').getContext('2d'); 
    var osChart = new Chart(osChartc,{ 
     "type": "pie", 
     "data": { 
      "labels": ["Aberto", "Em Andamento"], 
      "datasets": { 
       "data": [1, 1], 
       "backgroundColor": ["#07D7F7", "#FFD724"] 
      } 
     }, 
     "options": { 
      "responsive": true 
     } 
    }); 
}); 

Ich glaube, das Array-Format korrekt ist, mit der Ausnahme, dass die Schlüssel haben Anführungszeichen um sie herum, und es gibt keine eckigen Klammern auf die Datensätze.

Die Grafik wird nicht gebaut, und ich bin immer diese Fehlermeldung:

Uncaught TypeError: Cannot read property 'length' of undefined

Was kann getan werden?

Answer 1

$chartOsData['data']['datasets']['data'][] = (int)$o->total; 
$chartOsData['data']['datasets']['backgroundColor'][] = $tiposOs[$o->status]; 

Hier sind Sie datasets als Objekt mit den Tasten data und backgroundColor zu konstruieren.

datasets: [ 
    { 
     data: [300, 50, 100], 
     backgroundColor: [...], 
    } 
] 

Hier Sie zeigen, dass datasets eine mit diesen Schlüsseln Array, die ein Objekt sein sollte.

Die Lösung ist einfach: machen datasets ein Array:

$chartOsData['data']['datasets'][0]['data'][] = (int)$o->total; 
$chartOsData['data']['datasets'][0]['backgroundColor'][] = $tiposOs[$o->status]; 
           ^^^