动态饼图未显示标签

时间:2019-09-19 14:03:11

标签: charts

我有一个动态饼图,它从SQL表中提取数据,它可以正常工作,但是它只是一个空白的Pie,并且没有遍历任何标签,我不知道为什么。

我设置了一个名为CustomerModel的变量,并将其设置为推出“已通过”,“失败”和“ Line_Down”的标签,但似乎什么也没显示...

$('#dateFrom').change(function(){
var id = $('#dateFrom').val();
var id2 = $('#dateTo').val();
$.ajax({
url: "getBarChartStatusData.php",
method: "GET",
data: "date="+id + "&dateTo="+id2,
success: function(data) {
  console.log(data);
  var CustomerModel = [];
  var DaysOut = [];
  var coloR = [];

  var dynamicColors = function() {
  var r = Math.floor(Math.random() * 255);
  var g = Math.floor(Math.random() * 255);
  var b = Math.floor(Math.random() * 255);
  return "rgb(" + r + "," + g + "," + b + ")";
  };

  for(var i in data) {
    DaysOut.push(data[i].Passed);
    DaysOut.push(data[i].Failed);
    DaysOut.push(data[i].Line_Down);
    CustomerModel.push("Passed");
    CustomerModel.push("Failed");
    CustomerModel.push("Line_Down");
    coloR.push(dynamicColors());
    coloR.push(dynamicColors());
    coloR.push(dynamicColors());
  }
  $('#myChart').remove();

  $('#piechartReason').append('<canvas id="myChart" width="400" 
height="250"></canvas>');

  var chartdata = {
    labels: CustomerModel,
    datasets : [
      {
        //label:'Total Score' ,
        backgroundColor: coloR,
        borderColor: 'rgba(200, 200, 200, 0.75)',
        //hoverBackgroundColor: "#22aa99",
        hoverBorderColor: 'rgba(200, 200, 200, 1)',
        data: DaysOut
      },
    ]
  };

  var ctx = $("#myChart");

  var barGraph = new Chart(ctx, {
    type: 'pie',
    data: chartdata,
    options: {
      legend: {
        display: false
     },
      tooltips: {
        enabled: false
     },
     plugins: {
          datalabels: {
            display: true,
            color:'white',
            align:'center',
            anchor:'center'
        }}
  }
  });
},

error: function(data) {
  console.log(data);
}

});
});

0 个答案:

没有答案