javascript - 如何推送数据创建饼图-chart js

Question

我在 json 代码文件中有来自 SQL 的数据(在 Fiddler 中检查)

{"d":[{"__type":"Dashboards.Employee","name":"Test Hen","turnover":"1500000,0000","color":"#231F20"},{"__type":"Dashboards.Employee","name":"Test Bai","turnover":"130000,0000","color":"#FFC200"}]}

但我不知道如何正确插入它们以创建饼图

我的ajax/javascript在这里:

  $.ajax({
                   url: 'HelloService.asmx/GetEmployeeDetail',
                   contentType: 'application/json;charset=utf-8',
                   data: JSON.stringify({ month: number }),
                   dataType: 'json',
                   method: 'post',                     
                   success: OnSuccess_,
                   error: OnErrorCall_
               });

               function OnSuccess_(response) {


                   var aData = response.d;
                   var arr = [];
                   //var ctx = document.getElementById('pele').getContext('2d');
                   $.each(aData, function (inx, val) {
                       var obj = {};
                       obj.label = val.name;
                       obj.value = val.turnover;
                       obj.color = val.color;
                       arr.push(obj);
                   });
                   var ctx = $("#pele").get(0).getContext("2d");
                   var myPieChart = new Chart(ctx).Pie(arr);}


                   function OnErrorCall_(response) {
                   console.log(error);
                     }

                 });

             });

我错过了什么吗？

如果我使用静态值(值、标签、颜色)，饼图就可以正常工作。
谢谢您

Answer 1

我为您创建了以下 FiddleJS:https://jsfiddle.net/cukyrh5h/1/

当然，您需要将 Ajax 调用的 URL 替换为您的 URL。您有一些错误的语法(代码片段末尾有太多分支)，并且您使用的 API 不再适用于 ChartJS 2.4。

代码如下所示:

$.ajax({
    url:"/echo/json/",
    data:data,
    type:"POST",
    success:OnSuccess_
});

function OnSuccess_(response) {
  var aData = response.d;
  var data = {
    labels: [],
    datasets: [{
      data: [],
      backgroundColor: []
    }]
  };

  $.each(aData, function (inx, val) {
    data.labels.push(val.name);
    data.datasets[0].data.push(val.turnover);
    data.datasets[0].backgroundColor.push(val.color);
  });

  var ctx = $("#pele").get(0).getContext("2d");
  var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data
  });
}

function OnErrorCall_(response) {
  console.log(error);
}