json_encodeをchart.jsに渡すことができません

Question

chart.js（最新版）を使用して円グラフを作成しようとしています。

私はグラフのデータ変数として出力したい配列を作成しました。 PHPコードです

：

<?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]; 
    } 
?> 

これは、エンコードされた値を持つ私のスクリプトです：

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

はdocumentationによると、これはあなたがチャートを作成する方法である：

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

これはデータ変数の入力の種類です：

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

これは私が取得していますものです：

$(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 
     } 
    }); 
}); 

私は、アレイ形式キーがそれらの前後に引用符を持っていることを除いて、正確であると信じ、およびデータセットには、角かっこはありません。

チャートが構築されていないと、私はこのエラーを取得しています：

Uncaught TypeError: Cannot read property 'length' of undefined

は何を行うことができますか？

Answer 1

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

ここでは、キーdataとbackgroundColorを持つオブジェクトとしてdatasetsを構築しています。ここで

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

あなたはdatasetsは、これらのキーを持つ一つのオブジェクトを含む配列なければならないことを示しています。

修正は簡単です：datasets配列を作る：

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