ChartJS mit AJAX-Aufruf zum Abrufen von Daten rendern keine Visualisierung

Question

Ich habe keine Probleme beim Erstellen von Visualisierungen aus statischen Datasets mit ChartJS, aber wenn ich Daten über einen AJAX-Aufruf verwendet, wird die Visualisierung nicht gerendert. Es werden keine Fehler ausgegeben und meine Daten sind identisch aufgebaut.

Hier ist mein 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(); 
}); 

Hier ist, wie die AJAX-Daten aufgebaut ist:

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

Ich habe versucht, einschließlich var ctx sowohl innerhalb der 'drawDonut' Funktion und außen, wie dargestellt. Ich habe 'drawDonut' als Variable gespeichert und habe sie getrennt aufgerufen. Keine funktionierte. Irgendwelche Gedanken?

EDIT:

vergessen zu erwähnen, dass die iframe von ChartJS an den DOM angehängt wird, nur nicht das eigentliche Diagramm.

Answer 1

Stellen Sie sicher, dass die zurückkommenden Daten ein JSON-Objekt und nicht nur eine JSON-Zeichenfolge sind. Mit anderen Worten, versuchen Sie data = JSON.parse(data), die das Problem lösen können.

Answer 2

data.datasets sollte ein Array von Objekten sein, Sie haben ein einzelnes Objekt.

ich das gleiche Ergebnis (kein Diagramm gezeichnet), wenn ich entfernen Sie das Array [] von einem von mir, dass diese manuell erstellt Struktur innerhalb eines Ajax-Erfolgsfunktion normalerweise verwendet:

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