使用 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"存储为一个变量，并单独调用它。两者都不起作用。有什么想法吗？

编辑：

忘了提一下，来自ChartJS的iframe被附加到DOM，而不是实际的图表。

Answer 1

确保返回的数据是JSON对象，而不仅仅是JSON字符串。换句话说，尝试data = JSON.parse(data)可以解决问题。

Answer 2

data.datasets应该是一个对象数组，您只有一个对象。

如果我从一个通常在ajax成功函数中使用这种手动创建的结构的数组[]中删除数组，我会得到相同的结果（没有绘制图形）：

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