javascript - ChartJS 使用 AJAX 调用检索数据未呈现可视化

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

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

编辑:

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

Answer 1

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