Question

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

{＆＃34; d＆＃34;：[{＆＃34; __类型＆＃34;：＆＃34; Dashboards.Employee＆＃34;＆＃34;名称＆＃34;：＆＃34;试验母鸡＆＃34;＆＃34;周转＆＃34;：＆＃34; 1500000,0000＆＃34;＆＃34;颜色＆＃34;：＆＃34;＃231F20＆＃34;}，{＆＃34; __type＆＃34;：＆＃34; Dashboards.Employee＆＃34;＆＃34;名称＆＃34;：＆＃34;试验白＆＃34;＆＃34;周转＆＃34;：＆＃34; 130000,0000＆＃34;＆＃34;颜色＆＃34;：＆＃34;＃FFC200＆＃34;}]}

但我不知道，如何正确推送它们以创建饼图

我的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);
}

Answer 2

好的，我发现了问题，为什么我看不到我的图表。也许它会对其他成员有用。数据库中的数据（营业额被称为金钱，我将其改为int ....并且它有效）

如何推送数据来创建饼图 - 图表js

2 个答案: