Javascript 使用AJAX调用检索数据的ChartJS是'；t渲染可视化

使用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],
      }
}

我已经尝试将var ctx包含在'drawDonut'函数内部和外部，如图所示。我将'drawDonut'存储为一个变量，并单独调用它。两者都不起作用。有什么想法吗

编辑：

---

忘记提到ChartJS中的iframe被附加到DOM中，而不是实际的图表。

确保返回的数据是JSON对象，而不仅仅是JSON字符串。换句话说，尝试

data=JSON.parse（data）

，这可能会解决问题。

data.dataset

应该是一个对象数组，您只有一个对象

如果我从一个通常在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
    }]
}

---

不，这是抛出一个异常。我们正在处理一个有效的对象。谢谢你！你确定你的ajax调用是同步的吗？我没有，但我已经尝试用$（document）调用了这两个调用。准备好了，点击事件发布页面加载，看看这是否是问题所在-不是。