AJAX呼び出しを使用してデータを取得するChartJSが可視化をレンダリングしない

Question

ChartJSを使用して静的データセットからビジュアライゼーションを作成する際に問題はありませんが、AJAX呼び出しで取得したデータを使用すると、エラーは発生しておらず、私のデータも同じように構成されています。ここで

は私のjavascriptです：

var ctx = $('#myChart'); 

function drawDonut(){ 

    $.ajax({ 
    method: "GET", 
    url: "url", 
    contentType: "application/json", 
    success: function(data){ 

     var myDoughnutChart = new Chart (ctx, { 
     type: 'doughnut', 
     data: data, 
     animation:{ 
      animateScale:true 
     } 
     }); 
    } 
    }); 
} 

$(document).ready(function() { 
    drawDonut(); 
}); 

はここでAJAXデータが構築される方法は次のとおりです。

var data = { 
    labels: ['red', 'blue', 'green', 'orange', 'yellow'], 
    datasets: { 
     data: [12, 15, 17, 19, 202], 
     } 
} 

示すように、私は 'drawDonut' 関数の内側と外側の両方のvar CTXを含むしようとしました。私は変数として 'drawDonut'を保存し、それを別々に呼びました。どちらもうまくいかなかった。何かご意見は？

EDIT：

ChartJSからのiframeだけではない、実際のチャートDOMに追加されていることを言及するのを忘れました。

Answer 1

返されるデータがJSON文字列ではなくJSONオブジェクトであることを確認してください。つまり、問題を解決する可能性のあるdata = JSON.parse(data)を試してください。

Answer 2

data.datasetsはオブジェクトの配列でなければなりません。オブジェクトは1つです。

私は通常、アヤックス成功関数の中で、この手動で作成した構造を使用しています私の1から配列[]を削除する場合、私は（何のグラフが描かれていない）同じ結果を得る：

data: { 
    labels: ajaxData.Labels, 
    datasets: [{ 
     label: ajaxData.Sets[0].Label, 
     data: ajaxData.Sets[0].Data, 
     backgroundColor: colourScheme.seventyPercent, 
     hoverBackgroundColor: colourScheme.opaque, 
     borderColor: colourScheme.white, 
     borderWidth: 2 
    }] 
}