複数のデータセットを持つChart.js ajax

Question

折れ線グラフに1行しかない場合は、ajax呼び出しからデータセットを取得して折れ線グラフを作成することに成功しました。 2行の折れ線グラフを作成する必要がありますが、それを動作させることはできません。

私のajax戻りデータはPHPで構築されています。

$.ajax({ 
    url: "https://example.com/chart_data", 
    type: "POST", 
    dataType: 'json', 
    success: function(rtnData) { 
     $.each(rtnData, function(dataType, data) { 
      console.log(data.datasets); 
      var ctx = document.getElementById("linechart").getContext("2d"); 
      var config = { 
       type: data.type, 
       data: { 
        datasets: [data.datasets], 
        labels: data.labels 
       }, 
       options: { 
        responsive: true, 
        title: { 
         display: true, 
         text: data.title 
        } 
       } 
      }; 
      window.myPie = new Chart(ctx, config); 
     }); 
    }, 
    error: function(rtnData) { 
     alert('error' + rtnData); 
    } 
}); 

私は、コンソールにログインしてきたものを表示したときにデータがよさそうだ、私は知らない、なぜこのISN」：

$returnData['line'] = array(
    'type' => 'line', 
    'title' => 'Title', 
    'labels' => array('Jan','Feb'), 
    'datasets' => array(
    array(
     'data' => array(0,50), 
     'borderColor' => "#f7464a", 
     'label' => "Label 1", 
     'fill' => false 
    ), 
    array(
     'data' => array(10,20), 
     'borderColor' => "#8e5ea2", 
     'label' => "Label 2", 
     'fill' => true 
    ) 
) 
); 
echo json_encode($returnData); 

私のjQueryのAJAX呼び出しがある：これはコードです働いている。 私が得るのは、グラフですが、行はありません。

私は、phpコードを修正するだけで、チャートに必要なだけ多くの行を追加することができ、jQueryも変更する必要はありません。

Answer 1

私は誰がこのに実行される場合には....角括弧は、「データセットのパラメータから削除する必要が私のミスを発見しました：

$.ajax({ 
    url: "https://example.com/chart_data", 
    type: "POST", 
    dataType: 'json', 
    success: function(rtnData) { 
     $.each(rtnData, function(dataType, data) { 
       console.log(data.datasets); 
      var ctx = document.getElementById("linechart").getContext("2d"); 
      var config = { 
       type: data.type, 
       data: { 
        datasets: data.datasets, 
        labels: data.labels 
       }, 
       options: { 
        responsive: true, 
        title: { 
         display: true, 
         text: data.title 
        } 
       } 
      }; 
      window.myPie = new Chart(ctx, config); 
     }); 
    }, 
    error: function(rtnData) { 
     alert('error' + rtnData); 
    } 
});